Jump to content


Photo

ul extends past container


  • Please log in to reply
6 replies to this topic

#1 doofy

doofy

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 10 February 2013 - 03:06 AM

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;
}


#2 Zane

Zane

    Advanced Member

  • Moderators
  • 3,818 posts
  • LocationMurphy, NC

Posted 10 February 2013 - 03:25 AM

A screenshot would be helpful.. or a link to the actual site of this problem. Otherwise, we will have to create our own HTML to go along with your CSS.. and that could take quite some time.
btn_donate_SM.gif  Want to thank me?  Contribute to my PayPal piggy-bank
 
401299.png

#3 denno020

denno020

    Advanced Member

  • Members
  • PipPipPip
  • 712 posts
  • LocationAustralia

Posted 10 February 2013 - 04:00 AM

I would suggest to check that your floats are cleared.

Also if you want your container to be a specific height but the content within it can be longer, then you'd need to set overflow correctly to allow the content to be scrolled in the container.

Denno

#4 doofy

doofy

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 10 February 2013 - 06:27 AM

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>


#5 kicken

kicken

    Wiser? Not exactly.

  • Gurus
  • 2,635 posts
  • LocationBonita, FL

Posted 10 February 2013 - 10:25 AM

Either I'm not understanding where the issue is, or it seems to be solved.  The menu fits within your container just fine when I put the code into a fiddle and look at it:
http://jsfiddle.net/SeYFm/

Perhaps you should post a screenshot showing the problem so we can literally see it.

Recycle your old CD's, don't trash them!
Did I help you out?  Feeling generous? I accept tips via Paypal or Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7

#6 doofy

doofy

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 10 February 2013 - 12:47 PM

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):

Posted Image

#7 doofy

doofy

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 10 February 2013 - 08:33 PM

Thanks for the help guys, you got me in the right direction.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com