How to add logo on header?

[francisco]

Im working on my first web page and I need a little help!

Im good with css, but not with html. Im not saying html is hard, I just dont have enough practice.

So here it is:

Because Im not good at html, Im using table for header,footer and body. Example:

<table id="top-header" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

the I call this in css. Example:

#top-header{
	background-image:url(topheader.png);
	height: 76px;
	background-repeat: repeat-x;
	background-position: center;
	background-position: top;
}

So I create another table with id="logo" and in css #logo{} and I get my logo, but problem is that logo is not on header. It is above or under. Depends where I write "logo" code in HTML. (under or above "header" code). If you know what I mean!

Thanks!

 

[Absolution]

Firstly, try using divs instead of tables <div id="top-header"></div> makes the layout much easier to handle, because you dont have to do weird things with cell spacing.

If you are working in HTML5 you can do <header id="top-header"></header> which is just as easy but more informative.

Now for your CSS try:

background-position: top center;

And try giving a width in the CSS as well.

 

[francisco]

Ive changed header, footer and body in div's. But now my bottom footer picture isnt centered!

<div id="bottom-header" align="center"></div>

#bottom-header{
	background-image:url(bottomheader.png);
	width:1200px; 
	height:355px;
}

 

[Absolution]

try adding

#bottom-header{
background-image:url(bottomheader.png);
width:1200px;
height:355px;

background-position: top center;
margin: 0px auto 0px auto;
}

 

[francisco]

Thanks man! Can you tell me whats the last row mean?

 

[Absolution]

Ya check here!
http://www.w3schools.com/css/css_margin.asp

basically it controls spacing from top, right, bottom, left

where 0px is no spacing and auto means automatic spacing, which allows you to center things

 

[PixelPusher]

try adding

#bottom-header{
background-image:url(bottomheader.png);
width:1200px;
height:355px;

background-position: top center;
margin: 0px auto 0px auto;
}

...because I love super clean code:

#bottom-header{
	background:url(bottomheader.png) center top no-repeat;
	width:1200px; 
	height:355px;
 	margin: 0 auto;
}

(shorthand version)

 

[Absolution]

Thanks pixel! Every bit does count. I probably should check my site and see if I can clean any of the CSS as well.