Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary:

Header tag using CSS

    ●  Headers are a basic part of most web pages. Headers and banners across the tops of your pages set the tone for your entire site.

    ●  The viewer's eye constantly checks them for reassurance and guidance that they are on the same site.


Learn About:

CSS Code Body Tags HTML tags

  •   If you've been following this series of tutorials, you have created a CSS document with body, html, container tags, and maybe some sort of background image or color.


  •     This tutorial is forth in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav     6 - Content   7 - Footer  

Step #1: Create a New ID ~

Hopefully you've already done the CSS Container tutorial …


Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and click on

… select ID and call it header.


Step #2: Format the #header width ~

Click Box, set the width to 100 % [percent] …

 

 

The width should be 100 percent because the container is only 80 percent.

 

 

Therefore the width is 100% of 80%. Confusing? Yes. Will you eventually get it? Yes. So Don't Panic …


Step #3: Height ~

Set the height to 200 pixels or whatever the height of your banner image is …


Step #4: Color ~

Choose another color in Illustrator from this tutorial - (If you don't have your swatch colors yet - get them now) …

… copy the HEX number of your color …

… click Background …

click background

… and paste the number of color into the Background-color of your header.

paste the number

Click OK.


Step #5: Insert Header Div

Open your index page for this project …

… click inside the #container div & delete the text, if any.

Then go to: Insert > Layout Objects > Div tag

… and insert the header div.


Step #6: View your Work ~

Hit to view your work.

Here's what we've got so far …

so far

Don't panic if yours doesn't look like this.

Just keep going. Remember, these assets are just general instructions meant to be modified to your individual needs.


Last Step: Save and Attach ~

Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it and continue working …

new styles sheet


Other Resources: http://codecamel.com/fullheight