View Full Version : CSS - Seamless Horizontal Alignment of Images

12-30-2006, 08:06 AM
I am wanting to restructure a website i've been working on. I've been told by many that I should use CSS. I am giving it a shot, but keep hitting walls. What I want to do is quite simple. I want to have a bar going across the page below a graphic that is 740px wide. This bar is made up of slices, that all equal the above mentioned width too. They are buttons that I'd like to have fit together seamlessly. However, I am finding that they won't fit together without showing a bunch of white spaces. I've searched high and low for a tutorial on how to do this. I will continue to do so, but hope that someone will be able to help me out with this.

Here is a snippet of my code from the html document:

<div id="navbar">
<img src="../WMES/images/navBar/header/headerBottomL.gif" alt="" />
<img src="../WMES/images/navBar/buttons/home.gif" alt="" />
<img src="../WMES/images/navBar/buttons/about.gif" alt="" width="73" height="23" />
<img src="../WMES/images/navBar/buttons/calendar.gif" alt="" width="69" height="23" />
<img src="../WMES/images/navBar/buttons/tuition.gif" alt="" />
<img src="../WMES/images/navBar/buttons/application.gif" alt="" />
<img src="../WMES/images/navBar/buttons/links.gif" alt="" />
<img src="../WMES/images/navBar/buttons/faq.gif" alt="" />
<img src="../WMES/images/navBar/buttons/opportunities.gif" alt="" />
<img src="../WMES/images/navBar/buttons/contact.gif" alt="" />

Here is the css code contained in an external stylesheet:
div#navbar {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
height: 23px;
width: 740px;

I hope someone will be able to give me a good suggestion on how to fix this...or at least point me in the right direction.

I am learning tons, but at a snails pace.

To view document go here - http://www.prestigeinteractive.com/wmes/



12-30-2006, 08:34 AM
Instead of using all four margin properties, just use
margin: 0px;
Also get rid of the div before the pound signs.
The only thing I could think of for your problem is that the images are a little over 740 px.
Edit: Just checked your images and they're perfectly fine in terms of size. So I don't know what the problem could be. If you couldn't tell, I stink with CSS :D

12-30-2006, 08:57 AM
For anyone having troubles similar to this, the solution was merely:

<div id="navbar">
<img src="images/navBar/header/headerBottomL.gif" alt="" width="143" height="23" /><img src="images/navBar/buttons/home.gif" alt="" width="55" height="23" /><img src="images/navBar/buttons/about.gif" alt="" width="73" height="23" /><img src="images/navBar/buttons/calendar.gif" alt="" width="69" height="23" /><img src="images/navBar/buttons/tuition.gif" alt="" /><img src="images/navBar/buttons/application.gif" alt="" /><img src="images/navBar/buttons/links.gif" alt="" /><img src="images/navBar/buttons/faq.gif" alt="" /><img src="images/navBar/buttons/opportunities.gif" alt="" /><img src="images/navBar/buttons/contact.gif" alt="" />

NOTE: There is not line breaks in the code between the img tags.

Thanks to those of you that tried to figure this out.

Take care,


12-30-2006, 09:03 AM
Aww, got to the answer before me. Finally figured it out after I played with it for 15 minutes. I don't know why the returns and tabs would make a difference though.
Nice work and good luck with it!

12-30-2006, 01:37 PM
I don't know why the returns and tabs would make a difference though.Image elements are displayed inline (i.e., as text; CSS display: inline) by default so whitespace is collapsed as it would be if that space were between two words.

To get around the no‐whitespace issue you would need to change their display to block (display: block) and float them all in one direction to get them onto one line. As a reminder, floats may need to be cleared (http://css-discuss.incutio.com/?page=ClearingSpace).

12-30-2006, 08:14 PM
Thank you Arbitrator, for explaining something I've been doing forever!