View Full Version : Semantics; what's the best way to do this?

11-01-2006, 12:21 PM
I have a header that's made from three parts, and I want to know what I should make the header from (which tags).
1) a 1x240 background image. Over this background image, I will put my h1 and h2.
2) an image that will go to the left of 1)
3) an image that will go to the right of 1)

This is what I had in mind:
<img src="images/header_left.jpg" style="float:left;"><div style="background:url(images/header.jpg) repeat-x; height:240px; float:left;"><h1>tarnow thingy</h1><h2>tagline goes here</h2></div><img src="images/header_right.jpg" style="float:left;">
Now I don't know if i got the floats right, or if i need to add a float to the div too.

I just edited the code. This isn't good because the middle part doesn't stretch out as far as I'd like it to. Will I have to specifiy the width: to exactly how much I want it to be?

Bill Posters
11-01-2006, 01:18 PM
How best to go about adding the imagery largely depends on the actual imagery you want to add and which markup should be used.
It's likely that you could add the imagery as backgrounds of just the h1 and h2 elements themselves.

Can we see a mockup of the entire header?

11-01-2006, 09:56 PM
Over the day I managed to finish a good deal of the entire web page lol. Of course, here it is. (http://www.croatiankid.com/tarnow/v3/) I changed the css in the meantime, here it is:

margin:45px 0px 0px 0px;
background:url(images/header.jpg) repeat-x;

Bill Posters
11-01-2006, 10:37 PM
It seems that you're still thinking in terms of flat layouts, rather than 'layers'.
As the imagery is part of a fixed width layout, there's very little reason why you couldn't add is as the background of a header div.


#header {
margin: 0 auto;
width: 770px;
height: 200px;
background: url(header_bg.jpg) no-repeat center top;

<div id="header">
<h1>Pivotal Resources</h1>
<h2>tagline goes here...</h2></div>

The imagery you're adding is what you'd really consider 'content' as it doesn't impart any actual information. It's decorative, atmospheric. You should aim to add decorative imagery through CSS, not as img elements.
Only images which carry proper content should be implemented as img elements.

11-01-2006, 11:12 PM
i'm not sure if i'm understanding you. How can I have the whole header in one div? Do you think i should use

<div id="header">
<div id="left"></div>
<div id="head"><h1>Pivotal Resources</h1><h2>tagline goes here...</h2></div>
<div id="right"></div>

where left and right would have float: left and background images respectively? and height and width specified? Using empty divs for layout purposes is bad. or maybe i didn't understand you, could you please make a neater code?

Bill Posters
11-02-2006, 10:12 AM
There's no actual need to break the image up into three parts.
The handshake is not sufficiently important to make into its own image file.

This is how you seem to be 'seeing' the layout…

…when you could/should be seeing it as…

Create a single image from the three parts you currently have…

…and use that as the background for the #header div.
Then simply position and style your h1 and h2 elements within that.

11-02-2006, 10:45 AM
OHHHHH lol. This is what happens me too often, I do something in a more complicated way than I should. thanks a bunch

11-02-2006, 01:14 PM
could you check this out? (http://www.croatiankid.com/tarnow/v7/)
I have a similar problem with the people.jpg in the div to the left of the main content. What should i use to make it look like that? i have nothing to put in that div (content-wise), but I want the picture to be at the top, and the color to span to the bottom.