SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS, how do i change "ul" position ?

    Hi everyone,
    The following code shows a pop up menu.
    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=utf-8" />
    <title>to_sitepoint</title>
    <style type="text/css">
    
    html, body, div, ul {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    #main {
    	position:relative;
    	width:950px;
    	height:30px;
    	margin:75px auto 0;/*75px beneath top of page, auto distance from page's right/left side*/
    	border:2px solid #8c8b4b;
    }
    #main li {
    	width:92px;
    	height:30px;
    	float:left;
    	list-style-type:none;
    	border:2px solid red;
    }
    #main li a { text-decoration:none; }
    #main li ul li {
    	width:400px;
    	border:2px solid #8c8b4b;
    	height:30px;
    }
    li.menu1 { background-image:url('images/men1.png'); }
    li.menu2 { background-image:url('images/men1.png'); }
    .menu2 li a {
    	color:white;
    	font-weight:bold;
    }
    li.menu2 div {
    	position:absolute;
    	margin-left:-999em;
    	padding-top:200px;
    }
    li.menu2 ul {
    	top:200px;
    	list-style:none;
    	margin:0;
    	font-size:110%;
    }
    li.menu2:hover div { margin:0; }
    li.menu2:hover ul li { clear:left; }
    ul li ul.rounded-corner {
    	border:2px solid red;
    	height: 200px;
    	width:776px;
    	background-image:url(../banner/bg_to_sitepoint.gif);
    	background-repeat:no-repeat;
    	-webkit-border-radius:50px;
    	-moz-border-radius:50px;
    	border-radius:50px;
    }
    </style>
    </head>
    <body>
    <ul id="main">
    		<li class="menu1"><a href="#">menu item1</a></li>
    		<li class="menu2">menu item2
    				<div>
    						<ul class="rounded-corner">
    								<li><a href="#">submenu2 item1</a></li>
    								<li><a href="#">submenu2 item2</a></li>
    								<li><a href="#">submenu2 item3</a></li>
    						</ul>
    				</div>
    		</li>
    </ul>
    </body>
    </html>
    The submenu is consisted of a ul entity reesides inside a div.
    I would like to change that ul's position within its' ancestor: a div.
    I add: "top:100px;" to "li.menu2 ul" selector and see no impact whatsoever. "left" value is no good as well.
    Can anyone explain me please why i cannot make that ul repositioned inside its' div?
    How can i make it move to other place within the div?
    Attached is a screen shot of the present page which i'd like to change.
    Thanks a lot !
    Attached Images Attached Images

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The DIV is what's receiving positioning, NOT the UL... since no positioning is set on the UL (relative or absolute) left/right/top/bottom have no effect. You need to target the DIV.

    THOUGH -- that's a BAD menu; since, well... there's no reason for that DIV to even exist. Nothing being done to that div couldn't be applied to the UL. Likewise since both those outer LI are getting the same style, I'd assume they don't need classes.

    When I'm back at my workstation I'll take a stab at putting together a cleaner/easier to deal with version of this for you.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much !
    I need classes for both main menu items for reasons not displayed in the example. Both have different bachground which is meaningless in the example.
    The div is there to allow the sub menu to be positioned far from its' menu ancestor.
    I try to position that ul through the selector: li.menu2 ul which is not the div, but i fail to get any impact ! Can you explain me please why: li.menu2 ul {top:200px doesn't make the ul positioned 200px downwards?
    Thanks again. I'll be waiting for the rest of your reply.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Alright, let's see... first step get it into a MODERN doctype so you are no longer in transition from 1997 to 1998... get the CSS into a separate file so we're testing 'real world', can have proper media types, and of course can actually edit CSS alongside the HTML instead of not being able to see both at the same time... (I really think the STYLE tag should be made obsolete), cut out the excess markup that isn't doing anything... drop the presentational 'rounded' class...

    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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	to_sitepoint
    </title>
    
    </head><body>
    
    <ul id="mainMenu">
    	<li><a href="#">menu item1</a></li>
    	<li>
    		<span>menu item2</span>
    		<ul>
    			<li><a href="#">submenu2 item1</a></li>
    			<li><a href="#">submenu2 item2</a></li>
    			<li><a href="#">submenu2 item3</a></li>
    		</ul>
    	</li>
    </ul>
    
    </body></html>
    Ok, in the cSS, remove the 'reset' part that's not resetting anything... remove the pointless height declarations (though with you setting the centering and width I would suspect the page this is going into has 'issues'... like being a crappy fixed width and probably declaring width dozens of times for what could be done once), remove the fixed width on the li since that usually looks like rubbish once you have real data in there....

    Here's what I came up with:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/deotpit

    is open for easy access. I used the 'overflow' technique instead of sliding the APO around because it's just far, far simpler to deal with. There's a thread about it here:
    http://www.sitepoint.com/forums/show...-new-way-doing

    I wasn't entirely certain where you were trying to position the hovers so I took a wild guess...

    In the CSS:
    http://www.cutcodedown.com/for_other...pit/screen.css

    I went a wee bit overboard on the commenting to make it clear the how/what/why of it. This approach should work well all the way back to IE 5.5 if you throw a behavior file in there for those browsers like peterned's hover-anywhere... if you don't care about IE6/earlier, it's fine as is.

    Hope this helps.

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot,
    I'll work on your reply hoping not to be back with more questions.


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
  •