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> Link to comment https://forums.phpfreaks.com/topic/286695-controling-the-bold-display-of-a-menu/ Share on other sites More sharing options...
Ch0cu3r Posted March 4, 2014 Share Posted March 4, 2014 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/ Link to comment https://forums.phpfreaks.com/topic/286695-controling-the-bold-display-of-a-menu/#findComment-1471447 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/ Link to comment https://forums.phpfreaks.com/topic/286695-controling-the-bold-display-of-a-menu/#findComment-1471457 Share on other sites More sharing options...
Ch0cu3r Posted March 4, 2014 Share Posted March 4, 2014 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/ Link to comment https://forums.phpfreaks.com/topic/286695-controling-the-bold-display-of-a-menu/#findComment-1471460 Share on other sites More sharing options...
Triniton722 Posted March 13, 2014 Share Posted March 13, 2014 <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 Link to comment https://forums.phpfreaks.com/topic/286695-controling-the-bold-display-of-a-menu/#findComment-1472525 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.