Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsWeb DesignAdvanced Web Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old April 14th, 2007, 09:20 AM
leev3 leev3 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Mar 2007
Posts: 32 leev3 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 8 h 26 m 9 sec
Reputation Power: 11
Css horizontal menu

I have found many sites with code for horizontal drop down pop out out menus with fixes for ie hover, everything works great. I can not however, figure out how to make variable length boxes for the ul items. Has anyone over come this issue? Here is the cookie cutter code for static length elemets :

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:8em; /* width of all menu boxes */
}

I have tried

#7 { width: 7;} and similar schemes with <ul id="7">

but to no avail.

Thx for any help

Reply With Quote
  #2  
Old July 29th, 2009, 03:50 AM
gkumar gkumar is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2009
Posts: 13 gkumar User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 26 m 52 sec
Reputation Power: 0
Css horizontal menu

1. Let's begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers.

2. Our menu is actually an unordered list element <ul> styled using CSS. So, in the body section of cssmenu.html put the following HTML code:

<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>

3. Great now, we have the list, let's stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code:

<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>

In the code above the ul list-style-type was set to none (so we have no bullet before each list element).
For having no line break between list element we set for li display property to inline.
For the a element float was set to left left and some other properties was changed for a good-looking menu. For the a element background was set to #999900 and for hover pseudo-class of the a element background was set to #CCCC00.

The HTML and CSS complete code is below:

<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS horizontal menu</title>
</head>

<body>
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignAdvanced Web Development > Css horizontal menu


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap