Create More CSS Styles
Expression Web Tutorials For Beginners
Create More CSS Styles: Continued
Style the top_nav
1. Click "New Style" in the Apply or Manage Styles task pane.
Make the selector: #top_nav
And use the information we used to style the header.
2. Click on Position: Give the top_nav a height only. Leaving the width blank will cause the div to run the entire width of the page.
Give it a height of 35 px
3. Give it a background color or insert an image. See Video tutorials for adding images.
Click OK
Style the Container (Wrapper)
(Note: Another way to make this layout is to start with the container, and nest all divs inside this one container. But for now, we will just wrap the columns in a div that we will style as the container.)
Now, style the Container and nest the columns inside the container.
1. Place a div on the page, immediately below the top nav.
2. Click New Style
3. Make the Selector #container
4. Do not assign a width nor a height. Leaving the width blank will allow it to extend all the way across the page.
Leaving the height blank will allow the div to expand downward and accommodate content as you add it. This will permit your various pages to stretch open to different heights based upon the amount of content.
5. Click OK.
NOTE: YOU MAY NEED TO PRESS ENTER TO OPEN UP THE CONTAINER A TAD BIT, SO THAT YOU CAN EASILY NEST A COUPLE DIVS INSIDE THE CONTAINER THESE DIVS WILL BECOME THE LEFT COL AND PAGE CONTENT COLUMN.
Insert & Style the Left Column
1. Nest a div inside the container.
2. Click New Style
3. Make the Selector #left_col , define in existing style sheet
4. Click on the Layout Category, and choose float: left.
5. When floating a div, its best to assign a width. In this case make the width 200px.
Do NOT assign a height. Again, this will allow the div to open up in a downward fashion to accommodate the content.
(we will also need to clear the float when we style the footer.)
The Page Content
1. Place your cursor next to the left_col div, at the very top and to the right. Then double click the <div> tag in the Toolbox.
2. Click New Style
3. Make the Selector: #page_content , define in existing style sheet, etc
4. To position this column, simply specify a left margin that is equal to the width of the left_column. In this case, it's 200px.
But remember, the CSS Box Model says that padding, margins and borders will cause the div to grow in size. So we have to take that into consideration when deciding upon the Left Margin for the Page_Content.
Do not set a width. Do not set a height.
The div will expand downward as you insert content.
Feel free to add more styles to these style rules. ( ex: background color or images)