Hello,

 

I managed to get my navigation system up and running more or less how I'd like it to by making a an inline list as I was reccomended earlier. I have a logo as the first item in the list and then some links. If [] represents a picture and _ _ _ represent links the website looks like this:

 

[]_ _ _ _ _ _ _ _

 

I would like it to have a gap (represented by full stops) between the picture and the links, as follows:

 

[]............ _ _ _ _ _ _ _ _

 

 

I have tried messing around with padding but it seems to affect all links. I have also tried giving just the image section it's own class (in the <li> tag, <li class="menuImg">) but it was coming out all garbled. Should the image be outside of the list? If so I am having trouble lining it up with the text.

 

Also, the bottom of the type in the logo does not line up with the bottom of the type in the links. Can I fix this in CSS or do I have to open the image up in Photoshop and resize it to line up there?

 

If you want to check my code the website is temporarily at www.thegaragestudios.co.cc It's rendering correctly in Safari, but Firefox is showing my old style without the inline list. I think it's a cache thing, but if you see a vertical menu rather than a horizontal one I'll need to look and see why the correct version isn't online..

 

<EDIT> firefox is now showing the inline horizontal menu, so it was the cache..</>

 

Cheers,

 

Al

Your first li tag after the logo has a class="navBar" but I can't see that class in the stylesheet.

 

Add this as the class:-

li.navBar { margin-left: 40px; }

 

and the Home link moves away from the logo image.

 

The Logo.png image is 718*640px and you are sizing it in the html code to 150*130px; you should resize the image to 150*130px as it will reduce download time and probably produce a clearer image.

Thanks,

 

I had tried it with "p.navBar" instead of "li.navBar".

 

I had thought the "p." told it to look for a class whichever tag it was inclosed in. Obviously by making it "li.navBar" it has told it the correct place to look, right?

 

So what does the "p." mean?

 

I have corrected that now but there is a gap beside both the "home" link and the "about" link.

But none of the rest of the navigation items. By holding the mouse over the home link in dreamweaver I can see the padding that has just been added. This padding isn't present on the about link. I would guess therefore that the padding and navBar class (now called indent) is working correctly and it's something else thats wrong.

 

My design computer is not connected to the internet (I am posting from the office computer) so I cannot upload the site for you to see but the HTML and CSS is as follows:

 

HTML

<ul id="mainNav">
<li><img src="Images/logo.png" alt="The Garage Studios" width="150" height="130" class=logoImg></li>
<li class=indent"> <a href="index.thml">Home</a></li>
<li><a href="about.html">About</a></li>
...
...
</ul></p>

 

CSS

ul#mainNav li {
display: inline;
list-style: none;
position: relative;
top: 10px;
left:10px;
}

li.indent {
margin-left: 40px;
}

 

The logoImg class mentioned in the HTML section is commented out at the minute as I am not using it right now.

 

And the logo will be resized in Photoshop, it's just subject to change so in the meantime I will keep the HTML resize and update it with the correct size version once it's finalized..

Your source code had two sections for the menu, the first had p tags for all the links but you had disabled that with comment tags.

 

The second set of links was a list in li tags so my suggestion li.navBar { margin-left: 40px; } applies the style where class="navBar is for a li tag, which is just the first link, so it only creates a margin-left on the first link.

 

p.navBar {...} will only apply the style where class="navBar" is inside a p tag.

 

If you want the style to apply to any tag, just use

.navBar { margin-left: 40px; }

 

You only have the class="indent" in the li tag for Home so it shouldn't affect the about link (it didn't affect my test) so it must be something else. What is all your style code now?

Note: you have a missing " here:- <li class=indent"> it should be <li class="indent"> and index.thml should be index.html

Ok, I'll have to get home and upload the site to the server.. I think the missing " and the html mispelling is just as I have copied out the text from one computer to another (by hand) I think it's correct on the actual website..

 

I'll post again once it's back online.

 

Thanks,

 

Al