Logo on header, how?

**godfather999** · Sep 25, 2011 10:09

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:

Code:

<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:

Code:

#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!

**JeffWalden** · Sep 25, 2011 11:28

While I would strongly advise against using tables for this particular situation, I believe you will accomplish what you're looking for by replacing   with the code for the logo. So...

HTML Code:

<table id="top-header" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="/image-path-to-logo.jpg" alt="Alt Text" /></td>
  </tr>
</table>

**godfather999** · Sep 25, 2011 11:36

And how to get that img in css so I can edit position?

**JeffWalden** · Sep 25, 2011 11:40

You could do that a variety of ways, one would be to first give the image an ID value:

HTML Code:

<img src="/image-path-to-logo.jpg" alt="Alt Text" id="logo" />

Then for your CSS:

Code:

#logo
{
  position: relative;
  margin-left: 100px;
}

This code would add a 100px margin to the left of the image which would essentially move it to the right. Adjust as needed.

**godfather999** · Sep 26, 2011 10:23

But if someone has bigger screen it wont be on the right place, right?
Forgot to tell. I have auto header! Width depends on browser and screen!

**JeffWalden** · Sep 26, 2011 11:19

The placement of the image is relative to where you place the code, hence the position: relative in the CSS I supplied.

**godfather999** · Sep 27, 2011 06:23

<body>
<div id="top-header"><a href="index.php"><img src="style/logo.png" alt="logo" border="0" id="logo" /> </a> </div>
<div id="bottom-header"></div>
<div id="body" align="center"><a href="webadress">Contact</a></div>
<div id="footer" align="center"></div>
</body>

#logo{
position: relative;
top: 16px;
left: 380px;
}

Ive searched all over the Internet and I cant understand relative positioning.

**JeffWalden** · Sep 27, 2011 08:14

You don't need to use relative positioning for this, it was just a suggestion. Since I don't know exactly what you're trying to make your header look like, the code doesn't help. This is a rather useful tutorial on positioning: http://www.barelyfitz.com/screencast...s/positioning/

You could use other positioning to achieve the same effect. I'm not here to write the code for you, but if you let me know specifically which part you're having trouble with I'm more than happy to help.

**godfather999** · Sep 27, 2011 09:33

I saw that link, but i will give my best, again, to try figure out fricking position and how its really work! Okay Im going to see this. Ill give you feedback!

**JeffWalden** · Sep 27, 2011 09:39

Well read through it again and try to make it work. If you're still having trouble, post back with the problem and a link so we can see what is going on. Most likely we can give you some more direction at that point. Good luck!

**AirFor** · Sep 27, 2011 22:17

If you need another resource try this - http://www.alistapart.com/articles/css-positioning-101/

**godfather999** · Oct 2, 2011 06:29

I got it. Thanks a lot!

User Tag List

Thread: Logo on header, how?

Thread Tools

Display

Logo on header, how?

Bookmarks

Bookmarks

Posting Permissions