The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image as a "header" on each webpage
Focus1
post Mar 24 2012, 04:35 PM
Post #1


Newbie
*

Group: Members
Posts: 18
Joined: 24-March 12
Member No.: 16,776



Hi guy's I'm pretty new to HTML but I'm getting there all be it slowly smile.gif 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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 24 2012, 05:07 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,229
Joined: 9-August 06
Member No.: 6



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
<div id="header">
<img src="bouquets.jpg" wdith="" height="" alt="">
</div>


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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Focus1
post Mar 24 2012, 05:38 PM
Post #3


Newbie
*

Group: Members
Posts: 18
Joined: 24-March 12
Member No.: 16,776



Thanks very much for the fast reply smile.gif

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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 25 2012, 05:42 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,229
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 26 2012, 01:20 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 4,282
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 26 2012, 02:01 AM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,229
Joined: 9-August 06
Member No.: 6



Oops! blush.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 31st July 2014 - 04:38 PM