Hi everyone,
All I can say is boy I am glad to have found this forum.
Well I am having an issue with my webpage. I am trying to create a css horizontal navigation bar. I did find some code for doing this and it does display exactly the way I wish, HOWEVER, I want the navigation bar to be horizontal and I do not have a clue what needs to be changed in order to view it as so.
I have listed the code below, again, if someone could make the necessary changes and re-insert it here in another post I would be so very grateful.
Currently what I am using in the way of green buttons (gifs) splits if someones browser is set at 800 /600 and so I felt this would be a viable solution, not to mention look more professional. If you visit my site I think you'll see what I mean.
Anyhow here is the code for the css navigation, just again needs to be horizontal.
<style type="text/css">
<!--
.Navlink {COLOR: #FFFFFF; TEXT-DECORATION: none; font-family: arial; font-size: 10pt; font-weight: bold;}
a:link.Navlink {color : #FFFFFF;}
a:visited.Navlink {color : #FFFFFF;}
a:active.Navlink {text-decoration: none;}
a:hover.Navlink {text-decoration: none;}
-->
</style>
<script language = "javascript">
<!--
function LmOver(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";
elem.style.cursor = 'hand'}
function LmOut(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";}
function LmDown(elem, clr)
{elem.style.backgroundColor = clr;
elem.children.tags('A')[0].style.color = "#FFFFFF";}
function LmUp(path)
{location.href = path;}
//-->
</script>
<table border="0" width="100" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="1">
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://travel.ian.com/index.jsp?pageName=hotSearch&isHotels=true&isCondos=false&cid=117116')" bgcolor="#00A1DC"><A HREF="http://travel.ian.com/index.jsp?pageName=hotSearch&isHotels=true&isCondos=false&cid=117116" Class="navlink"> Hotel Spa</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://travel.ian.com/index.jsp?pageName=hotelSpecials&cid=117116')" bgcolor="#00A1DC"><A HREF="http://travel.ian.com/index.jsp?pageName=hotelSpecials&cid=117116" Class="navlink"> Resort Spas</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://travel.ian.com/index.jsp?locale=en_US&isFlash=true&pageName=condos¤cyCode=USD&isDetectFlash=false&cid=117116&isRedirect=true&additionalDataString=vrBookingSource%7ChotSearch')" bgcolor="#00A1DC"><A HREF="http://travel.ian.com/index.jsp?locale=en_US&isFlash=true&pageName=condos¤cyCode=USD&isDetectFlash=false&cid=117116&isRedirect=true&additionalDataString=vrBookingSource%7ChotSearch" Class="navlink"> Condos</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://www.travelnow.com/index.jsp?pageName=newsletters&cid=117116')" bgcolor="#00A1DC"><A HREF="http://www.travelnow.com/index.jsp?pageName=newsletters&cid=117116" Class="navlink"> Hotel Deals</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://travel.ian.com/index.jsp?pageName=airSearch&cid=117116&advancedOptions=true')" bgcolor="#00A1DC"><A HREF="http://travel.ian.com/index.jsp?pageName=airSearch&cid=117116&advancedOptions=true" Class="navlink"> Flights</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://travel.ian.com/index.jsp?pageName=carSearch&cid=117116')" bgcolor="#00A1DC"><A HREF="http://travel.ian.com/index.jsp?pageName=carSearch&cid=117116" Class="navlink"> Car Rental</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://avidari.com/cgi-bin/fccgi.exe?w3exec=ta.search&special=1&ta=22223011&rcode=0&ck=1345751320')" bgcolor="#00A1DC"><A HREF="http://avidari.com/cgi-bin/fccgi.exe?w3exec=ta.search&special=1&ta=22223011&rcode=0&ck=1345751320" Class="navlink"> Spa Specials</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://dg.travelnow.com/index.jsp?cid=117116')" bgcolor="#00A1DC"><A HREF="http://dg.travelnow.com/index.jsp?cid=117116" Class="navlink"> City Guides</a></td></tr>
<tr><td width="100%" onMouseover="LmOver(this, '#cc33cc')" onMouseout="LmOut(this, '#00A1DC')" onMouseDown="LmDown(this, '#cc33cc')"
onMouseUp="LmUp('http://www.getawayspas.com/sightseeing.html')" bgcolor="#00A1DC"><A HREF="http://www.getawayspas.com/sightseeing.html" Class="navlink"> Sightseeing</a></td></tr>
</table>
</td></tr>
</table>
<a href="http://www.guistuff.com/"><img border="0" src="http://www.guistuff.com/images/11dot.gif" width="1" height="1"></a>
Thanks again!
Lost in Ohio...
CSS Navigation bar, changing from vertical to horizontal
Blech. Horrible, nasty, code.
The proper way to make horizontal menus is using an unordered list, something like this:
<ul class="horiz">
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
</ul>
See how much little code that is? Then in the CSS, use the following to remove bullets and horizontally align them:
ul.horiz {
list-style: none;
}
ul.horiz li {
float: left;
}

