Logo on header, how?

Get Started
1

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!

2

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…

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

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

4

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

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

Then for your CSS:

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

5

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!

6

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

7

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

8

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/html-training/css/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.

9

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!

10

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!

11

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

12

I got it. Thanks a lot!