scherpenzeel Posted June 20, 2006 Share Posted June 20, 2006 Hi I have a strange problem. I have a menu box. First it was lined to the left since the design is asking for the menu showing on the right I have done float right for the li part. Now its giving me the wrong result:The menu: which shows of nice, but with the list in reverse order? starting with the last href instead of starting with the first one = index. <div id="menu"> <ul> <li><a href="?actie=index_3a">Home</a></li> <li><a href="?actie=log">Log</a></li> <li><a href="?actie=recepten">Recepten</a></li> <li><a href="?actie=contact">Contact</a></li> <li><a href="?actie=workshop">Workshop</a></li> <li><a href="http://www.emaand.nl" target="_blank"> Pizza van de maand!</a></li> </ul></div> How can I get this lined up in teh right way?this is the css for this part: #menu{ width:973px; padding-top:5px; padding-bottom:0px; padding-left:0px; height: 31px; padding-right: 0px; margin: 0px; margin-right:0px; margin-bottom: 0px; margin-left:0px; background-image: url(/pizzatest/afbeeldingen/menu.jpg); background-repeat: no-repeat; background-color: #FFFFFF; }/* ------------------- menu boven lijst opmaak ------------------- */ #menu ul{ width:973px; padding:0; margin:0; list-style-type:none; color: #003399; }#menu li{ display:inline; color: #003399; float: right; } #menu li a{ color: #666600; text-decoration: none; font-size: 90%; padding: .2em .5em; background-color: #E9FFD2; text-transform: none; }#menu li a:hover{ color: #FFFFFF; background-color: #666600; text-decoration: none;} #menu li a:active{ color: #666600; font-weight: bolder;} How to Get this right? here is a sample for both ie and ff: My Webpage Link to comment Share on other sites More sharing options...
aspnetguy Posted June 20, 2006 Share Posted June 20, 2006 It is because you put the float on the li element. try it on the ul. Link to comment Share on other sites More sharing options...
scherpenzeel Posted June 20, 2006 Author Share Posted June 20, 2006 It is because you put the float on the li element. try it on the ul.<{POST_SNAPBACK}> OK I wil try that. Thanks for your help.I have tried it but than the menu is again on the left so I thought than also have float with the li but that does not make a difference. Link to comment Share on other sites More sharing options...
aspnetguy Posted June 20, 2006 Share Posted June 20, 2006 you could also try in #menu adding text-align:right that should move the ul to the right Link to comment Share on other sites More sharing options...
scherpenzeel Posted June 20, 2006 Author Share Posted June 20, 2006 you could also try in #menu adding text-align:right that should move the ul to the right<{POST_SNAPBACK}> No its not working than its again on the left hand... I keep on trying Link to comment Share on other sites More sharing options...
scott100 Posted June 20, 2006 Share Posted June 20, 2006 No its not working than its again on the left hand... I keep on trying<{POST_SNAPBACK}> addind text-align:right to the div and removing the float works fine #menu{width:973px;padding-top:5px;padding-bottom:0px;padding-left:0px;height: 31px;padding-right: 0px;margin: 0px;margin-right:0px;margin-bottom: 0px;margin-left:0px;background-image: url(/pizzatest/afbeeldingen/menu.jpg);background-repeat: no-repeat;background-color: #FFFFFF;border:0px solid black;text-align:right;}/* ------------------- menu boven lijst opmaak ------------------- */ #menu ul{width:973px;padding:0;margin:0;list-style-type:none;color: #003399;}#menu li{display:inline;color: #003399;} #menu li a{color: #666600;text-decoration: none;font-size: 90%;padding: .2em .5em;background-color: #E9FFD2;text-transform: none;}#menu li a:hover{color: #FFFFFF;background-color: #666600;text-decoration: none;}#menu li a:active{color: #666600;font-weight: bolder;} Link to comment Share on other sites More sharing options...
aspnetguy Posted June 20, 2006 Share Posted June 20, 2006 ahhh I forgot about removing the float when using text-align.Man my brain is like goo today. I hate getting up at 5:30am! Link to comment Share on other sites More sharing options...
scott100 Posted June 21, 2006 Share Posted June 21, 2006 ahhh I forgot about removing the float when using text-align.Man my brain is like goo today. I hate getting up at 5:30am! easy to forget 5:30 :blink:You the local milkman :) zzzzzzzz Link to comment Share on other sites More sharing options...
scherpenzeel Posted June 21, 2006 Author Share Posted June 21, 2006 easy to forget 5:30 :blink:You the local milkman :) zzzzzzzz<{POST_SNAPBACK}> Thanks Both for your "early" reply. I changed it into the align right but then I am ending up the wrong way. Now the menu is back on the left side again and what I wanted is having it on the right side But when I use float right the hrefs are messed up and showing of reversed (the other way auround)instead of hrf1, href2, href3, href4 it end up like href4, href3, href2, href1.in my sample hrf1=homeStrange behaviour.. Pherpahs the only solution is adding an additional div which i then float to the right? But that's not what i wanted. So someone with an other clever idea? Link to comment Share on other sites More sharing options...
scott100 Posted June 21, 2006 Share Posted June 21, 2006 Thanks Both for your "early" reply. I changed it into the align right but then I am ending up the wrong way. Now the menu is back on the left side again and what I wanted is having it on the right side But when I use float right the hrefs are messed up and showing of reversed (the other way auround)instead of hrf1, href2, href3, href4 it end up like href4, href3, href2, href1.in my sample hrf1=homeStrange behaviour.. Pherpahs the only solution is adding an additional div which i then float to the right? But that's not what i wanted. So someone with an other clever idea?<{POST_SNAPBACK}> Uss the css that i posted earlier (post #6), that aligns the menu to the right and keeps it in the correct order. Link to comment Share on other sites More sharing options...
scherpenzeel Posted June 21, 2006 Author Share Posted June 21, 2006 Uss the css that i posted earlier (post #6), that aligns the menu to the right and keeps it in the correct order. <{POST_SNAPBACK}> Thanks guys now it looking the way i wanted it. Link to comment Share on other sites More sharing options...
aspnetguy Posted June 21, 2006 Share Posted June 21, 2006 easy to forget 5:30 :blink:You the local milkman :) zzzzzzzz<{POST_SNAPBACK}> no I had to work early to finish up a project on time Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now