Scribd
Upload
69 views

DRILL2 - Instructions CSS Fixed Layout

This document provides instructions for creating a fixed layout website using CSS. It defines common CSS terms like div, float, and fixed layout. It then instructs the reader to create an HTML page with divs for the header, left column, content, and right column. Finally, it prompts the reader to add CSS rules to style each div with properties like float, width, height, background color, and border. The goal is to practice building a multi-column fixed width website layout using basic CSS positioning and styling.

Uploaded by

jecko1990
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
69 views

DRILL2 - Instructions CSS Fixed Layout

This document provides instructions for creating a fixed layout website using CSS. It defines common CSS terms like div, float, and fixed layout. It then instructs the reader to create an HTML page with divs for the header, left column, content, and right column. Finally, it prompts the reader to add CSS rules to style each div with properties like float, width, height, background color, and border. The goal is to practice building a multi-column fixed width website layout using basic CSS positioning and styling.

Uploaded by

jecko1990
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

DRILL 2: CREATING CSS FIXED LAYOUT

TECHNICAL TERMS: <div></div> - defines a division or a section in an HTML document float property that allows to position web page designs. Possible Values: right | left fixed layout has a wrapper that is a fixed width border shorthand property o Syntax: border: width style color; o Example: border: 3px solid black; o Style is required. Possible Values: solid | dotted | dashed | double | groove | ridge | inset | outset margin shorthand property o Syntax: margin: top right bottom left; o Example: margin: 0px 10px 10px 20px;

Instructions: 1. Create new folder in the desktop and rename it as drill2_surname. 2. Open the Dreamweaver. Create a New HTML file (File Menu > New or Ctrl + N in the keyboard and select HTML under the Basic Page). 3. Save the HTML file as drill2_surname.html inside the folder that you have created. 4. In the Code view, create a page container that has the following dimension: a. Width: 960px b. Height: auto Between the <body></body>, create a <div> with an id=page-container attribute: <body> <div id=page-container> Hello Page </div> </body>

5. Create a new CSS file (File Menu > New or Ctrl + N keyboard and select CSS under the Basic Page) and save it as style.css in the folder that you have created.

Created by: Mr. Jerico L. Castillo

CSS FIXED LAYOUT

6. Create a new rule in the stylesheet to select the page-container and set the width of 960px on this div: #page-container { margin: 0 auto; width:900px; }

Note: margin: 0 auto makes the page-container always center to maintain a sense of balance 7. Add this rule to the very top of your css file to reset the margins and padding on the html and body tags to zero: html, body { padding:0; margin:0; }

Note: A comma in between CSS selectors stands for or, so here the rule will be applied to the html tag or the body tag. Because both exist on the page, it will be applied to both. 8. Add 4 divs, all with individual ids that describe their purpose. These divs will correspond to the major areas of the design. Replace the Hello Page text with the divs below. Just for now well also put text inside the divs for easy visual identification when we view the page.

<body> <div id=page-container> <div id=header>Header</div> <div id=left-col>Left Column</div> <div id=content>Content</div> <div id=right-col>Right Column</div> </div> </body>

Created by: Mr. Jerico L. Castillo

CSS FIXED LAYOUT

9. Go back to CSS file. Create a new rule in the style sheet to select the header. Apply the following properties and set the values: Properties float width height background-color Values #header { left 960px 100px #017890 } float:left; width:960px; height:100px; background-color:#017890;

Create a new rule in the style sheet to select the left-col. Apply the following properties and set the values: Values #left-col { left 195px 400px #D9CCB9
width = 3px style = solid color = #613D2D

Properties float width height background-color border

float:left; width:900px; height:100px; background-color:#D9CCB9; border: 3px solid #613D2D; }

Created by: Mr. Jerico L. Castillo

CSS FIXED LAYOUT

Create a new rule in the style sheet to select the content. Apply the following properties and set the values to #content: Values #center-col { left 674px 400px } #DF7782 top = 0px right = 10px bottom = 0px left = 10px
width = 3px style = solid color = #613D2D

Properties float width height background-color

margin

border

Create a new rule in the style sheet to select the right-col. Apply the following properties and set the values to #right-col: Values #right-col { left 124px 400px } #D9CCB9
width = 3px style = solid color = #613D2D

Properties float width height background-color border

10. Upload it to moodle.

Created by: Mr. Jerico L. Castillo

CSS FIXED LAYOUT

You might also like