Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Image as a "header" on each webpage

Posted by: Focus1 Mar 24 2012, 04:35 PM

Hi guy's I'm pretty new to HTML but I'm getting there all be it slowly I've taken a beginners course in HTML and it's 4.01 strict and I've just finished my first ever website and I'm happy enough I got that far as it looked quite daunting at the start.

However, in my first website I just used some text in a frame for each of my webpages as a 'header' so to speak, using frames was part of the course criteria.
But now I'd like to make a design that will go across the top of each of my webpages. For instance I'd like to make a website for my wife, she sells bouquets of flowers, so I'd like to have an image at the top of all my webpages with a picture of flowers and some text etc...

Can you guy's tell me what is the best way to go about implementing this ? I take it I create an image in photoshop of the actual width of my page and save it, then how would I go about coding this into HTML and CSS to have it done properly ?

Sorry if this is a nOOb'ish question but I just can't get my head around this at the min. I've done lots of googleing and some are saying this is called a 'header' and some are saying it's just putting an image at the top of each page...

Is there a certain way this 'header' has to be implemented ?

Many thanks

Posted by: pandy Mar 24 2012, 05:07 PM

There are no special ways really. Just put the image there as you would any old image. Since you use Strict (good boy there!) you need to put it in a block level element anyhow, so I'd do it like this.

HTML

This gives you a good starting point for the future. You can add text in that DIV should you want to later and all header stuff will be nicely held together and be structurally sound. The id makes it easy to access anything inside the DIV as well as the DIV itself for styling purposes and the name of the ID tells you what the DIV is, which is good. It doesn't take more than that to think ahead and set a good ground for the future so you can add to what you have rather than change it.

Posted by: Focus1 Mar 24 2012, 05:38 PM

Thanks very much for the fast reply

So would I be right in saying this should be the code, as if I will be using some absolute positioning too and to get my 'header div' to be set correctly?

<body>
<div class="wrapper"> all content goes here
<div id="header">
<img src="bouquets.jpg" wdith="1024px" height="200px" alt="">
</div>

</div>
</body>

CSS:

body {
text-align : center ;
min-width : 1024px ;
}
#wrapper {
width : 1024px ;
text-align : left ;
margin-left : auto ;
margin-right : auto ;
position : relative ;
}

#header
{ margin-left: auto; margin-right: auto; }

Thanks again

Posted by: pandy Mar 25 2012, 05:42 AM

Sure, looks fine. There's nothing set in stone about things like this.

You probably don't need absolute positioning. The header will be about where you want it anyway. If you want to move things a little from the place where they naturally are, margins are often a better choice.

Posted by: Frederiek Mar 26 2012, 01:20 AM

One thing though. The CSS #wrapper selector doesn't match <div class="wrapper"> and its styling will not get applied. Use .wrapper in the CSS instead or turn CLASS into ID inside the div tag.

And since you already have given the wrapper div a width and centered it, you don't need to center #header too, as that will be as wide as its parent container.

Posted by: pandy Mar 26 2012, 02:01 AM

Oops!