Jump to content

ul extends past container


doofy

Recommended Posts

The organized inline list is extending past my container. I've gotten this far to trouble shoot it, but have no clue how to fix this css. Any direction would be appreciated, I thought it was a padding issue from everything I've read, but I couldn't figure out how to fix this.

 

Thank you in advance for helping a css n00b.

 

ul, li {
font-size:12px;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
#container{
margin:0 auto;
width:990px;
}
#menu {
z-index:1;
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #000000;

/* Borders */

border: 2px solid #3a3a3a;
-moz-box-shadow:inset 3px 3px 4px #000000;
-webkit-box-shadow:inset 3px 3px 4px #000000;
box-shadow:inset 3px 3px 4px #000000;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #3a3a3a;
padding: 4px 9px 4px 9px;
background: #000000;

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #bb7f2a;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#bb7f2a;
text-decoration:underline;
}
#menu li .drop {
padding-right:21px;
background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("../images/drop.png") no-repeat right 7px;
}
.dropdown_1column
{
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #3a3a3a;
border-top:none;

/* Gradient background */
background:#000000;
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
#menu li:hover .dropdown_1column {
left:-1px;
top:auto;
}
.col_1 {
width:130px;
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:left;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
   -webkit-border-radius: 5px 0px 5px 5px;
   border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
}
#menu li:hover div a {
font-size:12px;
color:#FFF;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#searchcontainer {
position:relative;
}
#search {
position:absolute;
top:-35px;
right:35px;
}

Link to comment
Share on other sites

Sorry about that guys.. Thank you very much for the quick replies though, already I feel like I'll get through this issue.

 

<div id="container">
<ul id="menu">

   <li><a href="main.php">Home</a></li>
<li class="menu_right"><a href="profile.php" class="drop">My Check List</a>

 <div class="dropdown_1column align_right">

		    <div class="col_1">

			    <ul class="simple">
				    <li><a href="add-goal.php">Add a Goal</a></li>
				    <li><a href="profile.php">My Profile</a></li>
				    <li><a href="edit-profile.php">Edit Profile</a></li>
				    <li><a href="settings.php">Account Settings</a></li>
			    </ul>  

		    </div>

 </div>

 </li>

  <li class="menu_right"><a href="activity.php">Member Activity</a></li>
<li class="menu_right"><a href="about.php" class="drop">About</a>

 <div class="dropdown_1column align_right">

		    <div class="col_1">

			    <ul class="simple">
				    <li><a href="about.php">About Us</a></li>
				    <li><a href="contact.php">Contact Us</a></li>
				    <li><a href="faq.php">FAQ</a></li>
				    <li><a href="terms.php">Terms & Conditions</a></li>
				    <li><a href="privacy.php">Privacy Statement</a></li>
			    </ul>
	  </div>
</div>
  </li>
</ul>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
 <tr>
   <td><div id="contentbox">content</div></td>
   <td><div id="contentbox">content</div></td>
 </tr>
</table>
</div>

Link to comment
Share on other sites

Sorry, it was late last night. I meant it expands my container. Before without the menu.css it was 990px wide, now nothing is adhering to the container.

 

Here is a screen shot when zoomed out (Before it worked fine, now with the nav bar it's all screwy, but I can't figure out how to fix the css):

 

z7dRrMz.jpg

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.