css layout with html5

Styling Your Design

index3.html and css/style3.css

Time to start making this dummy site look like a real site. Let's start by adding a site title, background image, and logo to the header area. But since we'll have a logo, do we need the site title to appear there as well? Yes and no. Yes, search engines will need that text present for SEO reasons. But it would be visually redundant. To resolve this dilemma, we're going to place the site title in an h1 inside the header, then move it off-screen with CSS. That way it's still there semantically, but won't disturb our design.

Change your header data in index.html as shown:

Now let's move that heading 3000 pixels off to the left of the screen visually by adding this to your stylesheet, style.css:

Notice that many CSS values can take negative numbers, giving you full control over placement - even allowing you to hide things completely! (note that this is just one technique for hiding objects with CSS).

Now let's add a background image to the header. Since we know our banner is 960x150px, we've prepped an image in Photoshop at those dimensions - it's in your tutorial "img" folder as old-plumbing.jpg. To use that image as the background for the header container, add this CSS:

Background images can be tiled infinitely within a box, or just horizontally or just vertically. In our case, the background image is exactly the same size as the box it lives in, so we don't need to think about tiling rules here.

We also need a logo to position on top of the background. For this tutorial we created a simple PNG with transparency in Photoshop at 400x133px - it's acme.png in your "img" folder. Since a box can only have one background image, we'll need to add this to our HTML directly, laying it on top of the background:

Notice that we gave the img tag a custom ID so we can address it in our CSS and control its positioning precisely. :

We used position:relative on the headerimg ID, which means that all positioning in that box should occur relative to the position it would occupy by default. Tweak these values until your logo sits right where you want it.

Background image courtesy freewebpageheaders.com

Your design should now look like this:

With Headerimg