March 22nd, 2006, 02:42 PM
|
 |
Fuzzy but Ferocious User
|
|
Join Date: Apr 2004
Location: The Restaurant at the end of the Universe
|
|
Quote: | Originally Posted by iceman25 I would like to place my navigation buttons next to eachother so that there are no gaps between them, is this done by reducing the amount of padding in the button properties ? |
Are you currently seeing gaps? I am creating a horizontal nav at the top of our corporate site and simply placed the images next to each other and it seems to work in all browsers. I test in IE 6, NS 6 7 & 8, and FF and it works fine.
Here is the layout for the nav
Code:
<div id="topNav_Div">
<a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Images/buttons/WhlSvcs_over.jpg',1)">
<img src="../Images/buttons/WhlSvcs_up.jpg" alt="WinWholesale - HOME" name="Home" width="80" height="25" border="0" id="Home" />
</a>
<a href="locations.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Locations','','../Images/buttons/Locations_over.jpg',1)">
<img src="../Images/buttons/locations_up.jpg" alt="WinWholesale - LOCATIONS" name="Locations" width="80" height="25" border="0" id="Locations" />
</a>
<a href="acquisitions.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('DevButton','','../Images/buttons/WhlDev_over.jpg',1)">
<img src="../Images/buttons/WhlDev_up.jpg" alt="WIN Company Development" name="DevButton" width="80" height="25" border="0" id="DevButton" />
</a>
<a href="opportunities_home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('jobsButton','','../Images/buttons/WhlEmp_over.jpg',1)">
<img src="../Images/buttons/WhlEmp_up.jpg" alt="WinWholesale - Employment Opportunities" name="jobsButton" width="80" height="25" border="0" id="jobsButton" />
</a>
<a href="BizSvcs.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BizSvcsHome','','../Images/buttons/WhlBusSvcs_over.jpg',1)">
<img src="../Images/buttons/WhlBusSvcs_up.jpg" alt="WinWholesale - Business Services" name="BizSvcsHome" width="80" height="25" border="0" id="BizSvcsHome" />
</a>
<a href="WSS.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WSSButton','','../Images/buttons/WhlSrcSvcs_over.jpg',1)">
<img src="../Images/buttons/WhlSrcSvcs_up.jpg" alt="WinWholesale - Product Sourcing Services" name="WSSButton" width="80" height="25" border="0" id="WSSButton" />
</a>
<a href="Contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactButton','','../Images/buttons/WhlContacts_over.jpg',1)">
<img src="../Images/buttons/WhlContacts_up.jpg" alt="WinWholesale - Contact Us" name="contactButton" width="80" height="25" border="0" id="contactButton" />
</a>
<a href="sitemap.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemapButton','','../Images/buttons/WhlSiteMap_over.jpg',1)">
<img src="../Images/buttons/WhlSiteMap_up.jpg" alt="WinWholesale - Site Map" name="sitemapButton" width="80" height="25" border="0" id="sitemapButton" />
</a>
</div>
And here is the CSS I use
Code:
/* Top Nav Div*/
#topNav_Div {
width:100%;
height:25px;
background-color:#FFFFFF;
position:relative;
top:3px;
text-align:center;
border-bottom:5px double #003366;
border-top:1px solid #003366;
}
#topNav_Div img {
border-left:1px solid #003366;
border-right:1px solid #003366;
}
__________________
GardenWeasel... Does all the work of 10 men and 1 small boy
"To know that even one life has breathed easier because you have lived.....
This is to have succeeded"
R. W. Emerson
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
