4 replies [Last post]
rcbarros
rcbarros's picture
Offline
newbie
Houston TX
Last seen: 7 years 20 weeks ago
Houston TX
Timezone: GMT-5
Joined: 2013-03-27
Posts: 2
Points: 3

Hi everyone... I'm new here and hopefully get some help!

I'm working in this CSS style but I can't figure out how to stop the menu wrap under each other.

You can view @ http://www.creativelawnservice.com/beta/index.html

Bottom Line - if you press the Restore Down button (between Minimize and Close) to change the browse screen display the Menu MUST be in line and not wrap.

Any help will be very appreciate.

-------------------------
HTML CODE:
-------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<link href="CSS/dropDown.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="wrapper">
<div id="navMenu">
  <ul>
    <li> <a href="#">Products</a>
    <ul>
      <li><a href="noCopy.html">Wet Suit</a></li>
      <li><a href="#">Vacuum Cleaner</a></li>
      <li><a href="#">Pill Box</a></li>
      <li><a href="#">Knee Socks</a></li>
    </ul> <!-- end inner UL -->
    </li> <!-- end main LI -->
  </ul> <!-- end main UL -->
 
 <ul>
    <li> <a href="#">Services</a>
    <ul>
      <li><a href="#">Wet Suit</a></li>
      <li><a href="#">Vacuum Cleaner</a></li>
      <li><a href="#">Pill Box</a></li>
      <li><a href="#">Knee Socks</a></li>
    </ul> <!-- end inner UL -->
    </li> <!-- end main LI -->
  </ul> <!-- end main UL -->
 
  <ul>
    <li> <a href="#">Contact Us</a>
    <ul>
      <li><a href="#">Wet Suit</a></li>
      <li><a href="#">Vacuum Cleaner</a></li>
      <li><a href="#">Pill Box</a></li>
      <li><a href="#">Knee Socks</a></li>
    </ul> <!-- end inner UL -->
    </li> <!-- end main LI -->
  </ul> <!-- end main UL -->
 
<br clear="clearFloat" />  
</div> 
<!-- end navMenu -->
</div> <!-- end wrapper -->
 
</body>
</html>

-------------------------
CSS CODE:
-------------------------
#navMenu {
/*	margin:0; */
	margin-top:100px; 	/* Control the <DIV> position*/
	margin-left:350px; 	/* Control the <DIV> position*/
	padding:0;
}
 
#navMenu ul {
	margin:0;
	padding:0; 
	line-height:30px;
	text-shadow: 1px 1px 1px #000000;
}
 
#navMenu li {
	margin:0px;
	padding:0;
	list-style:none;	/* Remove the bullet symbol*/
	float:left;
/*	margin-left:0px; */
   	margin-right:5px;
	border:1px solid #000000;
	position:relative; /* relative*/
	background:#999999;
}
 
#navMenu ul li a {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height:30px;
	width:150px;
	display:block;
	color:#FFFFFF;
	border:1px solid #FFF;
}
 
#navMenu ul ul { 
	position:absolute; 
	visibility:hidden;
	top:32px;
}
 
#navMenu ul li:hover ul { 
	visibility:visible;
}
 
#navMenu li:hover {
	background:#0099FF;
}
 
#navMenu ul li:hover ul li a:hover {
	background:#CCC;
	color:#000000;
}
 
#navMenu a:hover {
color:#000000;
}
 
.clearFloat {
clear:both;
margin:0;	
padding:0;
}
 
/* IE7 Display Fix */  
 
#navmenu ul li {
display: inline;     
 
} 

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Not sure what you're trying

Not sure what you're trying to do with those margins, so will assume some sort of centering. There is no need to wrap the ul with a div; ul is a perfectly good container. Also, don't use a ul for each top level item. Have one top level ul with sub-lists off the li elements.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
      body {
        font: 100%/1.5 san-serif;
        margin: 0;
        }
 
      p {
        font-size: 1em;
        }
 
      #wrapper {
        border: 1px dotted gray;
        width: 90%;
        margin: 2em auto;
        }
 
      ul#nav,
      #nav ul {
        margin:0;
        padding:0; 
        line-height:30px;
        list-style:none;
        text-align: center;
        text-shadow: 1px 1px 1px #000000;
        }
 
      #nav li {
        display: inline-block;
        margin-right:5px;
        border:1px solid #000000;
        position:relative;
        background:#999;
        }
 
      * + html #nav li { /* so only ie7 sees it */
        display: inline;
        }
 
      #nav li a {
        background-color: inherit;
        text-decoration: none;
        height:30px;
        width:150px;
        display:block;
        color: white;
        border: 1px solid white;
	  }
 
      #nav ul { 
        display: none;
        left: 0;
        position:absolute; 
        top: 32px;
        }
 
      #nav ul li {
        display: block;
        }
 
      #nav li:hover ul { 
        display: block;
        }
 
      #nav li:hover {
        background:#0099FF;
        }
 
      #nav li:hover ul li a:hover {
        background:#ccc;
        color: black;
        }
 
      #nav a:hover {
        color: black;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <ul id="nav">
	<li> <a href="#">Products</a>
	  <ul>
	    <li><a href="#">Wet Suit</a></li>
	    <li><a href="#">Vacuum Cleaner</a></li>
	    <li><a href="#">Pill Box</a></li>
	    <li><a href="#">Knee Socks</a></li>
	  </ul>
	</li>
 
	<li> <a href="#">Services</a>
	  <ul>
	    <li><a href="#">Wet Suit</a></li>
	    <li><a href="#">Vacuum Cleaner</a></li>
	    <li><a href="#">Pill Box</a></li>
	    <li><a href="#">Knee Socks</a></li>
	  </ul>
	</li>
 
	<li> <a href="#">Contact Us</a>
	  <ul>
	    <li><a href="#">Wet Suit</a></li>
	    <li><a href="#">Vacuum Cleaner</a></li>
	    <li><a href="#">Pill Box</a></li>
	    <li><a href="#">Knee Socks</a></li>
	  </ul>
	</li> 
      </ul>
    </div> <!-- end wrapper -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rcbarros
rcbarros's picture
Offline
newbie
Houston TX
Last seen: 7 years 20 weeks ago
Houston TX
Timezone: GMT-5
Joined: 2013-03-27
Posts: 2
Points: 3

RE: Menu wrapping

Hi Gary, Thank you so much for your help. Thanks for the tip regarding ul is a perfectly good container - I will do that. However, the new code still not keep the menu aligned... My goal is avoid someone after re-size the browser broke the menu in two lines as you can see here: https://creativelawnservice.com/beta/issue-1.jpg

Hope you can understand my point.

Once again - Thanks for your help.

Robert

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Oops!

I had fixed that, but failed to carry it over to the posted code. Make this addition:

      ul#nav,
      #nav ul {
        line-height:30px;
        list-style:none;
        margin:0;
        padding:0; 
        text-align: center;
        text-shadow: 1px 1px 1px #000000;
        white-space: nowrap;
        }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Nota bene

From your screen cap, I see you're not running a local server. You cannot build a modern website without a web server, server-side scripting and database management. Google "wamp" and install one of the packages.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.