SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Menu Cut off by Div?

    Hello all!

    I received wonderful help here not too long ago, and now I've run into another issue that I can't quite figure out how to fix.

    My submenu (if you hover over "White") is getting cut off by its containing DIV! I'm trying to make it show the submenu without having to move any of the other page's elements (even if it shows on top of the table below it on the page). I tried playing with padding, margins, and even putting different DIV's within one another as well as changing absolute/relative position, but none of that is working!

    Anyone have any idea how I can fix this?

    Here is the fiddle.

    Or...

    Here is my CSS:
    Code:
    *
    {
    	margin: 0;
    	padding: 0;
    }
    
    html,
    body
    {
    	background: #000;
    }
    
    body
    {
    	font: 13px/1.231 arial,helvetica,clean,sans-serif
    }
    
    #page
    {
    	overflow: hidden;
    	width:1000px;
    	height:840px;
    	background: #fff;
    }
    
    .widget
    {
    	overflow: hidden;
    	width:290px;
    	height:316px;
    	margin: 256px 0px 0px 60px;
    	padding: 0px;
    	float: left;
    }
    
    .scroll-pane
    {
    	width: 360px;
    	height: 400px;
    	overflow: auto;
    	margin: 72px 95px 0px 0px;
    	padding: 0px;
    	float: right;
    }
    
    h1
    {
    	font-size: 116%;
    	color: #fff;
    	background: #50506d;
    	margin: 0 0 1em;
    	padding:4px 8px 5px;
    
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    h2
    {
    	clear: left;
    	font-size: 100%;
    	color: #fff;
    	background: #000;
    	padding:4px 8px 5px;
    	margin: 0px;
    
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    h2 span.setting-type
    {
    	font-weight: normal;
    }
    
    p
    {
    	font-size: 93%;
    	margin: 1em 0;
    }
    
    #menu {
        margin: 52px -350px 0px 0px;
        float:right;
        padding: 0;
        width:100%;
        background: transparent;
    	overflow: hidden;
     }
    #menu a {
        font-family: Impact, Helvetica, sans-serif;
        background-color: black;
        color: white;
        border: 2px solid transparent;
        -moz-border-radius:50%;
        -khtml-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        display: block;
        font-size: 28px;
        line-height: 106px;
        vertical-align: middle;
        /*font-weight: bold;*/
        width: 106px;
        height: 106px;
        text-align: center;
        text-decoration: none;
    }
    
    #menu a:hover, #menu .sub-menu a:hover {
        border-color: red;
        cursor:pointer;
    }
    
    #menu , #menu ul {list-style: none;}
    #menu li {
        float: left;
        position: relative;
        text-align: center;
        margin-left:10px;
    }
    
    #menu .sub-menu {
        position: absolute;
        top: 80px;
        left: -9999em;
        padding: 10px;
        z-index: 90;
    }
    
    #menu .sub-menu li {
        text-align: left;
        margin-bottom:6px; 
    
    }
    
    #menu li:hover .sub-menu {
        left: -54px;
        /*border: 1px solid #ececec;*/
    }
    
    #menu .sub-menu a {
        font-family: Impact, Helvetica, sans-serif;
        display: block;
        font-size: 24px;
        padding: 10px;
        /*padding: 19px 25px;*/
        height: auto;
        width: 150px;
        border: 1px solid #ececec;
        -moz-border-radius:15px;
        -khtml-border-radius:15px;
        -webkit-border-radius:15px;
        border-radius:15px;
        /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
        text-decoration: none;
        line-height: normal;
    }

    And here is my HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    		"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    
    		<title>Red, White, and Blue</title>
    		
    		<link type="text/css" href="style/style.css" rel="stylesheet" media="all" />
    
    	</head>
    	<body>
    	<center>
    	<div id="page">
    		<ul id="menu">
    			<li><a href="about.php">Red</a></li>
    			<li><a href="about.php">White</a>
    				<ul class="sub-menu">
    				<li><a href="about.php">Alaska</a></li>
    				<li><a href="about.php">Rhode Island</a></li>
    				<li><a href="about.php">Florida</a></li>
    				<li><a href="about.php">District of Columbia Downtown</a></li>
    				<li><a href="about.php">New York City</a></li>
    				</ul>
    			</li>
    			<li><a href="about.php">Blue</a></li>
    			<li ><a href="about.php">Stars</a></li>
    			<li><a href="about.php">Stripes</a></li>
    		</ul>
    
    		<div class="widget">
    			<table>
    				<tbody>
    					<tr>
    						<td>One
    						</td>
    						<td>Two
    						</td>
    						<td>Three
    						</td>
    					</tr>
    					
    					<tr>
    						<td>Apples
    						</td>
    						<td>Oranges
    						</td>
    						<td>Pears
    						</td>
    					</tr>
    					
    					<tr>
    						<td>Square
    						</td>
    						<td>Circle
    						</td>
    						<td>Triangle
    						</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    
    		<div class="scroll-pane">
    			<h2>Hello World!</h2>
    			<table>
    				<tbody>
    					<tr>
    						<td>First
    						</td>
    						<td>Second
    						</td>
    						<td>Third
    						</td>
    						<td>Fourth
    						</td>
    					</tr>
    					
    					<tr>
    						<td>How
    						</td>
    						<td>Are
    						</td>
    						<td>You
    						</td>
    						<td>Doing?
    						</td>
    					</tr>
    					
    					<tr>
    						<td>Here's
    						</td>
    						<td>a
    						</td>
    						<td>test
    						</td>
    						<td>table
    						</td>
    					</tr>
    				</tbody>			
    			</table>
    		</div>
    	</div>
    
    	</center>
    	</body>
    </html>
    Thanks!

    - Pamela
    Last edited by Pamela1991; Jun 5, 2012 at 14:11. Reason: Added Fiddle link

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just remove overflow: hidden from here:

    Code:
    #menu {
    margin: 52px -350px 0px 0px;
    float: right;
    padding: 0;
    width: 100%;
    background: 
    transparent;
    overflow: hidden;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Such a SIMPLE fix!!! I was trying to do all sorts of complicated stuff!

    Thanks so much, Ralph!

    Quote Originally Posted by ralph.m View Post
    Just remove overflow: hidden from here:

    Code:
    #menu {
    margin: 52px -350px 0px 0px;
    float: right;
    padding: 0;
    width: 100%;
    background: 
    transparent;
    overflow: hidden;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. overflow:hidden certainly does what it says. It's useful in a lot of circumstances, but can't be used where a drop down is needed ... and now you know why.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •