No wrap for <ul>?

  • Goginski
  • Novice
  • Novice
  • Goginski
  • Posts: 21
  • Loc: Alabama

Post 3+ Months Ago

I have a css menu I put together by looking at a ton of examples. I don't want it to wrap to the next line though and I can't figure out how to make it stay put. If the browser is minimized it make the menu look funny. website http://www.goggansinsurance.com

HTML
<!****CSS Menu*****>
<div id="style">
<ul>
<li><a class="current">Home</a></li>
<li><a href="personal.html">Personal Insurance</a></li>
<li><a href="commercial.html">Commercial Insurance</a></li>
<li><a href="directions.html">Locations</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="quote.html">Quote</a></li>
</ul>
</div>

<!****end Menu****>

CSS
/**********Main Menu******/
#style{
position:relative;
width: auto;
display:block;
height:24px;
border-bottom: 5px solid #7f7548;
margin-left: 0px;
font-size:12px;
font-weight:bold;
background-color:#cCbC74;
font-family:Arial,Helvitica,sans-serif;}

#style ul{
margin-left:2px;
padding:0;
list-style-type:none;
background:transparent;
width:auto;}

#style ul li{
display:block;
float:left;
padding:0 1px 0 0;}

#style ul li a{
display:block;
float:left;
color:#661010;
background-color:#a6995E;
border-top:1px outset;
border-left:1px outset;
border-right:1px outset;
text-decoration:underline;
padding:3px 15px 3px 15px;/*top right bottom left*/
height:24px;}

#style ul li a:hover{
color:#fff;
background-color:#661010;
text-decoration:none;
padding:2px 14px 3px 14px;/*top right bottom left*/
border-top:2px outset #fff;
border-left:2px outset #fff;
border-right:2px outset #fff;}
/************end*********/

Any Ideas? Can I fix this within the menu or could I fix it with the the <div> that the menu is in? Any Help would be great.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

You can use something else then <ul>'s for the menu... I use regular a's :D

Here is how I would do it...

Code: [ Select ]
#menu_wrap {
width: 682px;
}
#style{
position:relative;
width: auto;
display:block;
height:24px;
border-bottom: 5px solid #7f7548;
margin-left: 0px;
font-size:12px;
font-weight:bold;
background-color:#cCbC74;
font-family:Arial,Helvitica,sans-serif;}

#style a{
display:block;
float:left;
color:#661010;
background-color:#a6995E;
border-top:1px outset;
border-left:1px outset;
border-right:1px outset;
text-decoration:underline;
padding:3px 15px 3px 15px;/*top right bottom left*/
height:24px;}

#style a:hover{
color:#fff;
background-color:#661010;
text-decoration:none;
padding:2px 14px 3px 14px;/*top right bottom left*/
border-top:2px outset #fff;
border-left:2px outset #fff;
border-right:2px outset #fff;}
  1. #menu_wrap {
  2. width: 682px;
  3. }
  4. #style{
  5. position:relative;
  6. width: auto;
  7. display:block;
  8. height:24px;
  9. border-bottom: 5px solid #7f7548;
  10. margin-left: 0px;
  11. font-size:12px;
  12. font-weight:bold;
  13. background-color:#cCbC74;
  14. font-family:Arial,Helvitica,sans-serif;}
  15. #style a{
  16. display:block;
  17. float:left;
  18. color:#661010;
  19. background-color:#a6995E;
  20. border-top:1px outset;
  21. border-left:1px outset;
  22. border-right:1px outset;
  23. text-decoration:underline;
  24. padding:3px 15px 3px 15px;/*top right bottom left*/
  25. height:24px;}
  26. #style a:hover{
  27. color:#fff;
  28. background-color:#661010;
  29. text-decoration:none;
  30. padding:2px 14px 3px 14px;/*top right bottom left*/
  31. border-top:2px outset #fff;
  32. border-left:2px outset #fff;
  33. border-right:2px outset #fff;}


and the menu itself would be...

Code: [ Select ]
<div id="style">
<div id="menu_wrap">
<a class="current">Home</a>
<a href="personal.html">Personal Insurance</a>
<a href="commercial.html">Commercial Insurance</a>
<a href="directions.html">Locations</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
<a href="quote.html">Quote</a>
</div>
</div>
  1. <div id="style">
  2. <div id="menu_wrap">
  3. <a class="current">Home</a>
  4. <a href="personal.html">Personal Insurance</a>
  5. <a href="commercial.html">Commercial Insurance</a>
  6. <a href="directions.html">Locations</a>
  7. <a href="about.html">About Us</a>
  8. <a href="contact.html">Contact</a>
  9. <a href="quote.html">Quote</a>
  10. </div>
  11. </div>
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6801
  • Loc: Martinsburg, WV

Post 3+ Months Ago

You will have to give the #style ul a fixed width instead of auto if I understand your problem correctly.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Am I missing something or is there no </head><body> in the page?

I would do something like this...
Code: [ Select ]
#style ul{
white-space:nowrap;}

#style ul li{
display:inline;
list-style-type:none;}
  1. #style ul{
  2. white-space:nowrap;}
  3. #style ul li{
  4. display:inline;
  5. list-style-type:none;}
  • crazzyDemon
  • Beginner
  • Beginner
  • User avatar
  • Posts: 55

Post 3+ Months Ago

Hi

try to remove
Code: [ Select ]
display:block;

from
Code: [ Select ]
#style a{ ...

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 98 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.