1 reply [Last post]
tvldeals
tvldeals's picture
User offline. Last seen 5 years 35 weeks ago. Offline
newbie
Joined: 2004-12-29
Posts: 2
Points: 0

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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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">&nbsp; 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...

thepineapplehead
thepineapplehead's picture
User offline. Last seen 2 days 6 hours ago. Offline
rank Guru
Guru
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9180
Points: 284

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;
}