learningPHP1 Posted March 4, 2014 Share Posted March 4, 2014 Hello, I have a menu and using css to control the display. problem area: mouse over menu and bolding. for most part the menu works, what i like to do is prevent the bold (mouse over) from pushing surrounding menus to make space to display the bold. I know i need to somehow expand the menu spaceing so that when the mouse over wont pushing the other menus over but cant seem to hit that number. any ideas? <style rel="stylesheet" type="text/css"> #navcontainer ul { list-style-type: none; margin: 0; padding: 0; } #navcontainer ul li {display: inline; } #navcontainer ul li a { text-decoration: none; font-size: 18px; color: black; background-color: #FFFFFF;} #navcontainer ul li a:hover { color: darkblue; background-color: #FFFFFF; text-decoration:underline; font-weight:bold;} </style> </head> <body> <div id="navcontainer"> <ul> <li> <a href="#"> Home</a></li> <li>|<a href="#"> Project listing</a></li> <li>|<a href="#"> Directory</a></li> <li>|<a href="#"> Create project</a></li> <li>|<a href="#"> My project</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted March 4, 2014 Share Posted March 4, 2014 (edited) Currently you have set no width so it'll only consume the space it needs to fit the text. When you mouseover the text it becomes bold, which requires more space and so the text shifts slightly to the right. To prevent this you need to define a width. Also rather than hard-coding a pipe character to separate each item in menu, use borders instead Working example http://jsfiddle.net/7r6pX/1/ Edited March 4, 2014 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
learningPHP1 Posted March 4, 2014 Author Share Posted March 4, 2014 Thanks for the replay chocu3r but now i have large gaps between menus..not very attractive looking. Currently you have set no width so it'll only consume the space it needs to fit the text. When you mouseover the text it becomes bold, which requires more space and so the text shifts slightly to the right. To prevent this you need to define a width. Also rather than hard-coding a pipe character to separate each item in menu, use borders instead Working example http://jsfiddle.net/7r6pX/1/ Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted March 4, 2014 Share Posted March 4, 2014 (edited) Umm, the link I gave is not linking correctly try http://jsfiddle.net/7r6pX/1/ EDIT: Screw that, I made a new one try http://jsfiddle.net/hLKK6/ Edited March 4, 2014 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
Triniton722 Posted March 13, 2014 Share Posted March 13, 2014 (edited) <style rel="stylesheet" type="text/css"> #navcontainer ul { list-style-type: none; margin: 4; padding: 4; width: 100%;} #navcontainer ul li {display:inline-block; width: 7%; text-align: center; border-right: 1px solid #000; margin:0; padding: 2px 0; } #navcontainer ul li a { text-decoration: none; font-size: 18px; color: black; background-color: #FFFFFF;} #navcontainer ul li a:hover { color: darkblue; background-color: #FFFFFF; text-decoration:underline; font-weight:bold;} </style> </head> <body> <div id="navcontainer"> <ul> <li> <a href="#"> Home</a></li> <li>|<a href="#"> Project listing</a></li> <li>|<a href="#"> Directory</a></li> <li>|<a href="#"> Create project</a></li> <li>|<a href="#"> My project</a></li> </ul> </div> </body> </html> That is because #navcontainer ul li does not have a defined width attribute so it will take up all the space you are allowing to. Notice the width: 7%; the padding and the margin. By setting the width to 7% you are imposing specific width. I hope I could help Edited March 13, 2014 by Triniton722 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.