Jump to content

A Few Css Menu Issues


damiancds
 Share

Recommended Posts

I'm talking about a css dropdown menu (it's pure css as of now, and I plan to add a little javascript to make it smoother (so far I think i'm only going to add in a delayed fade in/out effect for the dropdown portions)for width,I've got it so they are all the same width, what I want is to have their width flexible so they fit the words and an icon.as in | Short \/ || Something Really Long \/ |where the li elements are the the width of the text + enough for the down arrowpsuedo code (width = text.width + 15px;)right now the down arrow is implemented as:

	background-image:url(/Resources/Images/Menu/arrow.gif);background-repeat:no-repeat;background-position:92% 50%;

for the centering,i want the li background to go across the page but the top level dropdown items centered (not text centered, element centered) _____________________________________________________________________________________________[ | One \/ | Two \/ | Twenty \/ | Eighty-seven thousand \/ | Five \/ | ]let me know if you need any other info, and thanks,

Link to comment
Share on other sites

Can we have a link to see it in action?

Edited by chibineku
Link to comment
Share on other sites

it should be up and runningEDIT 2: demo's dead, i got it working from the below posts,there's two style sheets because I'm somewhat anal, one being for the menu, the other for broader display issues. (there's also a third one for round corner content boxes but that's not really important hereagain, let me know what I can do,EDIT 1: also, forgot to add that not all are going to have the down error, but they are differently classed li elements, as in the first element (home)

Edited by damiancds
Link to comment
Share on other sites

It's the top level bar I'm trying to center,I want to have the gradient background stretch across the page (like it is) (either that or later set it to a fixed width)basically in simplest terms i want the top level items in a div so the div can be centered in the middle of the gradient (but doing so doesn't work)

Link to comment
Share on other sites

the best i could come up with, is this:ul.drop{ color: white; margin: 0 auto; padding: 0px; background-color: green; background-image: url(/Resources/Images/Menu/gradient.gif); text-align: left; border: 1px solid #000; list-style-type: none; position: relative; z-index: 0; height: 26px;}#menu_container{overflow:visible; background-color:#333366;} /*add background image here*/#menu_outer{display:table; margin: 0 auto; height: 28px; padding:0; overflow:visible;}#menu_inner{float:left;}<div id="menu_container"><div id="menu_outer"><div id="menu_inner"><ul class="drop"> <li class="nav_Down"> <a class="nav" href="/index.php"> Home </a> </li>........................................blah, blah, blah <li class="nav_DownIco"> <a class="nav" href="/Contact/"> Contact Us </a> <ul class="nav"> <li class="nav_End"> <a class="nav" href="/Contact/webmaster.php"> Contact Webmaster </a> </li> <li class="nav_End"> <a class="nav" href="/Contact/service.php"> Contact Customer Service </a> </li> <li class="nav_End"> <a class="nav" href="/Contact/support.php"> User Submissions </a> </li> </ul> </li></ul></div></div></div>

Edited by dsonesuk
Link to comment
Share on other sites

the best i could come up with, is this:
you make it sound like it's bad.but thanks, that was exactly what I was looking to do.I just had to manipulate the borders for seamlessnessIf I can figure out the li width problem.there isn't a way to say "width: auto + 10px;" is there?because that's the simplest way it could be coded and I think it describes what I want.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...