gratsami Posted December 7, 2008 Share Posted December 7, 2008 Hello i tried in css to align my horizental menu to center but failed my test in attachs ... i wanna to make my menu in the center ... notes: the links increase or decrease. thanks [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
dropfaith Posted December 7, 2008 Share Posted December 7, 2008 i didnt check your code but adding text-align:center; to the ul elemant should center it or margin:0 auto to the sAME ELEMENT should work i think Quote Link to comment Share on other sites More sharing options...
gratsami Posted December 7, 2008 Author Share Posted December 7, 2008 i didnt check your code but adding text-align:center; to the ul elemant should center it or margin:0 auto to the sAME ELEMENT should work i think i traid that ... the problem cause all (li) float: left... can you check at my code please.. maybe there is a wrong in my code.. thank you bro. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted December 7, 2008 Share Posted December 7, 2008 why are they all floated left is this a drop menu?or just a nav bar Quote Link to comment Share on other sites More sharing options...
dropfaith Posted December 7, 2008 Share Posted December 7, 2008 to avoid forcing people to download it hers the full code for testing this i will be back later to fix it if nobody else has got some things to do <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body { background: #FFF; font-size: 9pt; font-family: Tahoma, arial, sans-serif; color: #333; text-align: center; margin: 0; padding: 0; } a{ text-decoration: none;} a:visited{ text-decoration: none;} a:hover { text-decoration: none;} #centeralignment{ width: 930px; height: 27px; border: #333 1px solid; text-align: center; } #nav { margin: 0; padding: 0; list-style-type: none; text-align: center; display: block; } #nav ul{ text-align: center; } #nav li { margin: 0; padding: 0; float: left; text-align: center; } #nav a { float: left; width: 111px; line-height: 27px; color: #455B80; text-decoration: none; font-family:arial; font-size:16px; font-weight:bold; text-align: center; background: url(headbuttonnormal.gif) no-repeat; } #nav a:hover { float: left; width: 111px; line-height: 27px; color: #455B80; text-decoration: none; font-family:arial; font-size:16px; font-weight:bold; text-align: center; background: url(headbuttonhover.gif) no-repeat; } </style> </head> <body> <div id="centeralignment"> <ul id="nav"> <li id="nav_1"><a href="#">LINK#1</a></li> <li id="nav_2"><a href="#">LINK#2</a></li> <li id="nav_3"><a href="#">LINK#3</a></li> <li id="nav_4"><a href="#">LINK#4</a></li> <li id="nav_5"><a href="#">LINK#5</a></li> <li id="nav_5"><a href="#">LINK#6</a></li> <li id="nav_6"><a href="#">LINK#7</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted December 7, 2008 Share Posted December 7, 2008 Centering a horizontal menu sometimes requires using display:table and display:table-cell. Search around Google or Yahoo and you will see how this is used. Quote Link to comment Share on other sites More sharing options...
gratsami Posted December 7, 2008 Author Share Posted December 7, 2008 Centering a horizontal menu sometimes requires using display:table and display:table-cell. Search around Google or Yahoo and you will see how this is used. Thanks bro. i'll search about it Quote Link to comment Share on other sites More sharing options...
ifubad Posted December 7, 2008 Share Posted December 7, 2008 You can't center a floated element easily, try the following http://pmob.co.uk/pob/centred-float.htm Next x, instead of attaching a zip, just paste part of the code. Quote Link to comment Share on other sites More sharing options...
gratsami Posted December 8, 2008 Author Share Posted December 8, 2008 You can't center a floated element easily, try the following http://pmob.co.uk/pob/centred-float.htm Next x, instead of attaching a zip, just paste part of the code. thank you bro. i'll try this example Regards Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.