joanne Posted July 1, 2006 Share Posted July 1, 2006 I am not very familar working with Horizontal menu bars example, how would you prevent the menu bar from resizing when the window is resized. I would like it to remain its size regardless of the window not being maximum view.ThanksJoanneBelow the html and css example is included <style type="text/css">#ddcolortabs{margin-left: 4px;padding: 0;width: 100%;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;}#ddcolortabs ul{font: bold 10px Verdana, Verdana, sans-serif;margin:0;padding:0;list-style:none;}#ddcolortabs li{display:inline;margin:0 2px 0 0;padding:0;text-transform:uppercase;}#ddcolortabs a{float:left;color: white;background: #0099ff url(color_tabs_left.gif) no-repeat left top;margin:0 2px 0 0;padding:0 0 1px 3px;text-decoration:none;letter-spacing: 1px;}#ddcolortabs a span{float:left;display:block;background: transparent url(color_tabs_right.gif) no-repeat right top;padding:4px 8px 2px 6px;}#ddcolortabs a span{float:none;}#ddcolortabs a:hover{background-color: #009999;}#ddcolortabs a:hover span{background-color: #009999;}#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/background-color: #000099;}#ddcolortabsline{clear: both;padding: 0;width: 100%;height: 8px;line-height: 8px;background: #000099;border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/}</style> <body><div id="ddcolortabs"><ul><li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li><li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li><li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li><li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li> <li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li> </ul></div><div id="ddcolortabsline"> </div><div style="margin-top: 1em; font-size: 90%">Credit: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS library</a></div></body> Link to comment Share on other sites More sharing options...
Err Posted July 2, 2006 Share Posted July 2, 2006 All you really need to do is change your width on your #ddvolortabs style to pixels instead of percentages... like so: #ddcolortabs{margin-left: 4px;padding: 0;width: 500px;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;} You can change it to whatever you want, right now I have it set to 500px, but you can adjust it yourself. Percentages are just like a rubber-band, the more you stretch your browser the more your rubber-band is going to stretch... meh, that wasn't a good analogy, but you get the point :) 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