CSS Problem

[Quigly]

HEY GUYS.

So I'm in the process of coding for a website I've designed and I'm running into a bit of the problem. In order to code for the top navigation portion, I decided to make an unordered list of all the image parts of the nav (Home, About Us, etc.), and then display that list inline. However when I displayed the list inline I got a gap between each image as shown:



Does anyone know how to get rid of those gaps?

[fido123]

First of all it would help if you posted the HTML and CSS used in [code] tags. Secondly it looks like the problem is probably your HTML not your CSS. Finally of all from looking of it it seems like you have those buttons aligned with the beginning of the cell containing your main body of text, but that row ends at the same point probably due to the table width which you won't want to change anyway. You just need to put the buttons in a wide enough area. You might just need to move a <blockquote /> tag.

[Quigly]

The only reason why that one button comes down to a second lime is due to those spaces in between the images, without the spaces all the buttons would fit onto one line.

HTML:

<div id="topnav">
    	<ul>
        	        <li><a href="../home.html"><img src="../images/SAM-Website-Layout-Final_03.gif" width="100" height="53" alt="home nav"></a></li>
			<li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
			<li><a href="../about-us.html"><img src="../images/SAM-Website-Layout-Final_05.gif" width="127" height="53" alt="about us nav"></a></li>
		  	<li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
			<li><a href="../experience.html"><img src="../images/SAM-Website-Layout-Final_07.gif" width="149" height="53" alt="experience nav"></a></li>
			<li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
			<li><a href="../services.html"><img src="../images/SAM-Website-Layout-Final_09.gif" width="116" height="53" alt="services nav"></a></li>
			<li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
			<li><a href="../testimonials.html"><img src="../images/SAM-Website-Layout-Final_11.gif" width="176" height="53" alt="testimonials nav"></a></li>
			<li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
			<li><a href="../press.html"><img src="../images/SAM-Website-Layout-Final_13.gif" width="82" height="53" alt="press nav"></a></li>
                        <li><img src="../images/SAM-Website-Layout-Final_04.gif" width="2" height="53" alt="header divider"></li>
                        <li><a href="../e-news.html"><img src="../images/SAM-Website-Layout-Final_15.gif" width="121" height="53" alt="e-news nav"></a></li>
		</ul> 
	</div>

CSS:

#topnav	{ width:883px; margin:0 auto; }
#topnav ul li { display:inline; }

[fido123]

That's not the usual approach I'd take to something like this, especially making the width static since if you use percentages everything scales with the screen. Try making the width in your CSS something like width:80%; .

[Quigly]

I mean this is my first time coding for a site, and it seemed like a logical way to go about it. I'm really only concerned with removing the gaps in between the gaps.
I tried setting a negative margin which got rid of the gaps, but caused everything to shift off center.

[fido123]

I'd just arrange the buttons in a table. Easiest way to go about it. Everybody bitches about presentational HTML because CSS is apparently the way you should do it, but honestly I really really don't like the CSS approach. I really only use CSS to change an element's default attributes.

[ddrking133]

Ew tables. Don't use tables. Please.

Can you post ALL the HTML and CSS for your entire layout.

[Emithith]

again, touching the carcass of a dead thread.
Watch the post date.

[ddrking133]

Whoops! Didn't see an answer just trying to help, calm down broski