getting horizontal nav buttons to butt up together.

[sametch]

I want my horizontal nav bar buttons to sit tight against each other but i am struggling.

I have tried assigning them a class and setting padding, margin and border to zero using CSS. I have also got rid of the actinic   at the end of each, but there is still a gap of approx 5pixels between them. anyone any clues how to reduce it to zero?

[bigstylee]

I think a link would be helpful in this instance.

<div id="nav">
    <ul>
        <li><a href="#">My Link</a></li>
        <li><a href="#">My Link</a></li>
        <li><a href="#">My Link</a></li>
    </ul>
</div>

#nav {padding:0; margin:0;}
#nav ul {padding:0; margin:0;}
#nav li {list-style:none; float:left; padding:0; margin:0;}

That should give you want you want.

[sametch]

Sorry I should have been clearer, they are not text links but image buttons.

[bigstylee]

<div id="nav">
    <ul>
        <li><a href="#"><img src="link1.gif" /></a></li>
        <li><a href="#"><img src="link2.gif" /></a></li>
        <li><a href="#"><img src="link3.gif" /></a></li>
    </ul>
</div>

#nav {padding:0; margin:0;}
#nav ul {padding:0; margin:0;}
#nav li {list-style:none; float:left; padding:0; margin:0; width:20px;}

Set the width of the image (presuming they are all the same width) in #nav li.

[sametch]

[CODE]


Set the width of the image (presuming they are all the same width) in #nav li.

Thats well optimistic! They are all different.

[leehack]

You need to start providing the code that you are using or as has been asked a number of times, a URL, so that we can physically see the code ourselves on a functioning page. Remember you know what you are talking about, we haven't seen a thing, you need to paint the picture for us.

[bigstylee]

<div id="nav">
    <ul>
        <li style="width:10px;"><a href="#"><img src="link1.gif" /></a></li>
        <li style="width:20px;"><a href="#"><img src="link2.gif" /></a></li>
        <li style="width:30px;"><a href="#"><img src="link3.gif" /></a></li>
    </ul>
</div>

To be honest, you shouldn't need to set the width in this manner but due to the fact you are having problems suggests to me that you have some other styles interferring with your current layout. A link to your store would be very helpful in quickly resolving this matter.

[sametch]

You need to start providing the code that you are using or as has been asked a number of times, a URL, so that we can physically see the code ourselves on a functioning page. Remember you know what you are talking about, we haven't seen a thing, you need to paint the picture for us.

OK I'll give it a go:

First the css:

/*the navigation container div */
#navigation {
color: #333;
padding: 0px;
margin: 0px;
background: #E4E4E4;
text-align:right;
height:22px;
}

/*the navigation images class style */
img.hnav{
border:0;
padding:0;
margin:0;
}

/*the link class style, this smacks of desperation as it should not do anything anyway */

a.hnav{
border:0;
padding:0;
margin:0;
}

Now the individual nav buttons NB only one shown, the coding for all is the same:

<a class="hnav" href="<actinic:variable name="InfoURL" />" target="_self" onmouseover="SwapImage('nav_terms','<actinic:variable name="TermsIconImageHighlight" />')" onmouseout="RestoreImage()"><img src="<actinic:variable name="TermsIconImage" />" alt="<actinic:variable name="InfoText" />" name="nav_terms" class="hnav" /></a>

Then the collection of nav buttons which sits in the div:

<actinic:block if="%3cactinic%3avariable%20name%3d%22HomePageType%22%20%2f%3e%20%21%3d%20%270%27" >
<actinic:variable name="NavigationIcon" value="Home Image Navigation Button" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3e%200">
<actinic:variable name="NavigationIcon" value="Up A Level Image Navigation Button" />
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsIncludeToSiteMap%22%20%2f%3e" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Store%20Front%20Page%22" >
<actinic:variable name="NavigationIcon" value="Sitemap Image Navigation Button" />
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNavBarTopSectionOmitted%22%20%2f%3e%20%21%3d%20TRUE" >
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Store%20Front%20Page%22%29" >
<actinic:variable name="NavigationIcon" value="Store Top Image Navigation Button" />
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22InformationType%22%20%2f%3e%20%21%3d%20%270%27" >
<actinic:variable name="NavigationIcon" value="Terms Image Navigation Button" />
</actinic:block>
<actinic:variable name="NavigationIcon" value="Search Image Navigation Button" />
<actinic:variable name="NavigationIcon" value="View Cart Image Navigation Button" />
<actinic:variable name="NavigationIcon" value="Checkout Image Navigation Button" />
<actinic:variable name="NavigationIcon" value="Contact Us Image Navigation Button" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22AreRegCustomersAllowed%22%20%2f%3e">
<Actinic:NOTINB2B>
<actinic:variable name="NavigationIcon" value="Login Image Navigation Button" />
</Actinic:NOTINB2B>
</actinic:block>

Finally the resulting HTML code in the preview page:

<div id="navigation">

<a class="hnav" href="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/PreviewHTML/P_SiteRoot_index.html" target="_self" onmouseover="SwapImage('nav_home','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_home_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_home.gif" alt="Home" name="nav_home" class="hnav" /></a>







<a class="hnav" href="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/PreviewHTML/P_index.html" target="_self" onmouseover="SwapImage('nav_storetop','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_storetop_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_storetop.gif" alt="Catalog" name="nav_storetop" class="hnav" /></a>




<a class="hnav" href="P_info.html" target="_self" onmouseover="SwapImage('nav_terms','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_terms_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_terms.gif" alt="Terms & Conds" name="nav_terms" class="hnav" /></a>

<a class="hnav" href="P_search.html" target="_self" onmouseover="SwapImage('nav_search','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_search_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_search.gif" alt="Search" name="nav_search" class="hnav" /></a>
<a class="hnav" href="file:///C:/Program Files/Actinic v9/Act_PreviewWarningPage.html?ACTION=SHOWCART" target="_self" onmouseover="SwapImage('nav_cart','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_viewcart_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_viewcart.gif" alt="View Basket" name="nav_cart" class="hnav" /></a>

<a href="file:///C:/Program Files/Actinic v9/Act_PreviewWarningPage.html?ACTION=Start"


target="_self"

onmouseover="SwapImage('nav_checkout','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_checkout_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_checkout.gif" alt="Checkout" border="0" name="nav_checkout" /></a>


<a class="hnav" href="file:///C:/Program Files/Actinic v9/Act_PreviewWarningPage.html?ACTION=SHOWFORM" target="_self" onmouseover="SwapImage('nav_contact','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_contact_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_contact.gif" alt="Contact Us" name="nav_contact" class="hnav" /></a>

<Actinic:NOTINB2B>
<a class="hnav" href="file:///C:/Program Files/Actinic v9/Act_PreviewWarningPage.html?ACTION=LOGIN" target="_self" onmouseover="SwapImage('nav_login','file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_login_highlight.gif')" onmouseout="RestoreImage()"><img src="file:///C:/Documents and Settings/Alan/My Documents/Actinic v9/Sites/Site1/button_login.gif" alt="Login" name="nav_login" class="hnav" /></a>
</Actinic:NOTINB2B>


</div>
<!-- End Navigation -->

[bigstylee]

Give this ago.

#navigation {
    color: #333;
    padding: 0px;
    margin: 0px;
    background: #E4E4E4;
    text-align:right; /* I suspect you may mean float:right; but this may just cause you more problems */
    height:22px;
}

#navigation ul {
    padding:0;
    margin:0;
}

#navigation ul li {
    list-style:none;
    float:left; 
    padding:0;
    margin:0;
    width:20px;
}

#navigation .hnav {
    border:0;
    padding:0;
    margin:0;
}

<div id="navigation">
    <ul>
        <li style="width:100px;">
            <a class="hnav" href="<actinic:variable name="InfoURL" />" target="_self" onmouseover="SwapImage('nav_terms','<actinic:variable name="TermsIconImageHighlight" />')" onmouseout="RestoreImage()">
                <img src="<actinic:variable name="TermsIconImage" />" alt="<actinic:variable name="InfoText" />" name="nav_terms" class="hnav" />
            </a>
        </li>
        <li style="width:50px;">
            <a class="hnav" href="<actinic:variable name="InfoURL" />" target="_self" onmouseover="SwapImage('nav_terms','<actinic:variable name="TermsIconImageHighlight" />')" onmouseout="RestoreImage()">
                <img src="<actinic:variable name="TermsIconImage" />" alt="<actinic:variable name="InfoText" />" name="nav_terms" class="hnav" />
            </a>
        </li>
    </ul>
</div>

[SpecTech]

surely if you set the width to be 1 if you put an image inside of the div it usually forces the width of the div to fit everything inside but not leave any free space

but if that does not work you could always just put your images inside a table so that each image has a column to itself then set the column widths to what ever the width of the image is

[sametch]

This seams to have sorted itself out an an actual web publish site. For some reason the page preview screws up the spacing, but a propoer publish to the web server works fine. Thanks for all the replies.

[sametch]

but if that does not work you could always just put your images inside a table so that each image has a column to itself then set the column widths to what ever the width of the image is

That really would be a last resort . I would rather have all my teeth taken out without anaesthetic than use a table for laying out images! There is already far too much of that goes on on the internet IMHO! Its almost as bad as using tables to layout forms! oops I forgot actinic does that i think