Back To Website Design Forum

No wrap for <ul>?

  • Goginski
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 14, 2007
  • Posts: 21
  • Loc: Alabama
  • Status: Offline

Post November 21st, 2007, 9:30 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 21st, 2007, 9:30 am

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 21st, 2007, 9:51 am

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;}
  16. #style a{
  17. display:block;
  18. float:left;
  19. color:#661010;
  20. background-color:#a6995E;
  21. border-top:1px outset;
  22. border-left:1px outset;
  23. border-right:1px outset;
  24. text-decoration:underline;
  25. padding:3px 15px 3px 15px;/*top right bottom left*/
  26. height:24px;}
  28. #style a:hover{
  29. color:#fff;
  30. background-color:#661010;
  31. text-decoration:none;
  32. padding:2px 14px 3px 14px;/*top right bottom left*/
  33. border-top:2px outset #fff;
  34. border-left:2px outset #fff;
  35. 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>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6740
  • Loc: Martinsburg, WV
  • Status: Online

Post November 21st, 2007, 9:52 am

You will have to give the #style ul a fixed width instead of auto if I understand your problem correctly.
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 21st, 2007, 9:53 am

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;}
  4. #style ul li{
  5. display:inline;
  6. list-style-type:none;}
- dM
  • crazzyDemon
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 01, 2007
  • Posts: 55
  • Status: Offline

Post November 27th, 2007, 8:46 am

Hi

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

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 130 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.