HTML Forum

**CeS007** · 11-04-2010, 06:56 PM

Hi, I'm trying to get my navigation bar to be directly to the left of my logo but I can't figure it out, can someone tell me what I'm doing wrong. Below is the code I'm working with.

Quote:

<table align="center">
<tr>
<td><img src="logo.gif"></td>
</tr>
</table>
<pre>
<font face="arial" size="4" color="#999999"><a href="index.html">Home</a></td><br>
<font face="arial" size="4" color="#999999"><a href="services.html">Services</a><br>
<font face="arial" size="4" color="#999999"><a href="aboutus.html">About us</a><br>
<font face="arial" size="4" color="#999999"><a href="contactus.html">Contact Us</a></td>
</pre>

Thanks in advance.

CeS

**edgray** · 11-04-2010, 07:13 PM

Firstly, ditch the tables.

You need to code this with CSS. Lots of ways to achieve it, here's one:

Your HTML code:

HTML Code:

<div id="container">
  <div id="logo">
    <img src="logo.jpg" />
  </div>
  <div id="navbox>
    <ul>
      <li>index</li>
      <li>services</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </div>
</div>

Now we'll apply some CSS

Code:

#container { width: 800px }
#logobox { float: left; width: 200px; }
#navbox { float: right; width: 400px; }

Have a play around with those, alter the widths appropriately and remember to clear your floats.

**chrishirst** · 11-04-2010, 07:23 PM

Use a list styled with CSS instead of the 1995 style table.

**chrishirst** · 11-04-2010, 07:25 PM

Just like in Ed's post

**CeS007** · 11-04-2010, 08:20 PM

I've never used css before, do I just apply the css in my html document or do I need to make a new document specifically for css?

**Knight13** · 11-04-2010, 08:23 PM

You can do both, but it is better to make a css file and link to it.

**CeS007** · 11-04-2010, 08:34 PM

can someone link me to an easy-to-understand tutorial on how to either incorporate css into my html document & on how to link the two, I searched google but nothing I found was straight forward.

Thanks