SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry How to create a Menu in a list with position absolute

    Hi,

    I am trying to create a menu with one of the list item to be position absolute. Here is the code

    HTML:

    <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li> <div id="account_summary">
    <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    </ul></div>
    </li>
    </ul>


    CSS:
    div#account_summary { background:#e8f9e9; border:1px solid #d3e4d3; border-top:none; position:absolute; top:0; right:0; padding:10px 4px 10px 56px; width:148px; font-size:12px; font-style:italic; border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; }
    div#account_summary p { margin-bottom:2px; color:#555; }
    div#account_summary a { color:#555; text-decoration:underline; }
    div#account_summary a:hover,
    div#account_summary a:focus { color:#000; }
    div#account_summary img { position:absolute; top:9px; left:7px; }
    div#account_summary p.action { margin:0; font-family:Verdana,sans-serif; font-size:9px; font-weight:bold; font-style:normal; text-transform:uppercase; color:#999; }
    div#account_summary p.action a { color:#999; text-decoration:none; }
    div#account_summary p.action a:hover,
    div#account_summary p.action a:focus { color:#666; }


    In the second list items i need a list where it overflows the parent list......

    I need a list item under <ul> overflowing without changing the height of the <ul>

    Pictorial representation can be found here: Imagebin - A place to slap up your images.

    You can clearly see the border bottom, so i need the one of list item to be out of the border bottom but still act as a list item.....

    Can anybody please help...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi, welcome to Sitepoint

    You could use negative margins if you just want to overlap the border but still retain the flow.

    This is just rough but something like this should work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    ul {
    	list-style:none;
    	margin:0;
    	padding:15px 0 1px;
    	border-top:1px solid #999;
    	border-bottom:10px solid #000;
    	float:left;
    	width:100%;
    	line-height:1.0;
    }
    ul ul {
    	border:none;
    	padding:0;
    	width:auto
    }
    li {
    	float:left;
    	margin-right:20px;
    }
    div#account_summary {
    	background:#e8f9e9;
    	border:1px solid #d3e4d3;
    	border-top:none;
    	padding:10px 4px 10px 56px;
    	width:148px;
    	font-size:12px;
    	font-style:italic;
    	border-bottom-left-radius:5px;
    	-moz-border-radius-bottomleft:5px;
    	-webkit-border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    	-moz-border-radius-bottomright:5px;
    	-webkit-border-bottom-right-radius:5px;
    	position:relative;
    	height:30px;
    	margin:-15px 0 -25px;
    }
    div#account_summary p {
    	margin-bottom:2px;
    	color:#555;
    }
    div#account_summary a {
    	color:#555;
    	text-decoration:underline;
    }
    div#account_summary a:hover, div#account_summary a:focus {
    	color:#000;
    }
    div#account_summary img {
    	position:absolute;
    	top:9px;
    	left:7px;
    }
    div#account_summary p.action {
    	margin:0;
    	font-family:Verdana, sans-serif;
    	font-size:9px;
    	font-weight:bold;
    	font-style:normal;
    	text-transform:uppercase;
    	color:#999;
    }
    div#account_summary p.action a {
    	color:#999;
    	text-decoration:none;
    }
    div#account_summary p.action a:hover, div#account_summary p.action a:focus {
    	color:#666;
    }
    </style>
    </head>
    <body>
    <h1>testing</h1>
    <ul>
    	<li>One</li>
    	<li>Two</li>
    	<li>Three</li>
    	<li>
    		<div id="account_summary">
    			<ul>
    				<li>One</li>
    				<li>Two</li>
    				<li>Three</li>
    			</ul>
    		</div>
    	</li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi paul,

    Thanks a lot for the help... I was working on that last night, and figured it out...


    Thanks



Tags for this Thread

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
  •