Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts

    How can I align this menu?

    i would like the dropdown box of this menu to align centered, at the moment it aligns to the left. so the text should remain as it is, centered beneath the menu bar option, but the box itself should move according to the length of the text in the sub-menu options (equal spacing between edges of box and text, instead of too much on the right as it is now).

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Menu</title>
    <link rel="stylesheet" href="menu.css">
    </head>
    <body>
    	<ul id="nav">
    		<li><a href="#">Option 1</a>
    			<ul>
    				<li><a href="#">sub-menu 1</a></li>
    				<li><a href="#">sub-menu 2</a></li>
    				<li><a href="#">sub-menu 3</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Option 2</a>
    			<ul>
    				<li><a href="#">sub-menu 1</a></li>
    				<li><a href="#">sub-menu 2</a></li>
    			</ul>
    		</li>
    		<li><a href="#">Option 3</a>
    			<ul>
    				<li><a href="#">sub-menu 1</a></li>
    				<li><a href="#">long sub-menu 2</a></li>
    				<li><a href="#">sub-menu 3</a></li>
    			</ul>
    		</li>
    	</ul>
    </body>
    </html>
    Code:
    html { 
      	padding:0px;
      	margin:0px;
    }
    body {
    	position: absolute;
    	background-color: white;
    	margin: 0 0 0 140px; 
    	width: 900px;
    	height: auto;
    	color: black;  
      	padding: 0; 
    }
    
    #header {
    	margin: 5px 0px 10px 50px;
    	padding-top: 1px;
    	height: 140px;
    	width: 960px;
    	background-color: black;
    }
    #nav {
    	display: inline-block;
    	margin: 20px 0px 0px 0px;
    	padding: 4px 0px 0;
    	background: black;
    	border: solid 1px rgba(5, 5, 5, .3);
    	font: 13px 'arial';
    }
    #nav li {
    	margin: 0 0px;
    	padding: 0 0 6px;
    	float: left;
    	position: relative;
    	list-style: none;
    }
    #nav a {
    	font-weight: bold;
    	color: white;
    	text-decoration: none;
    	display: block;
    	padding:  8px 15px;
    	margin: 0;
    }
    #nav li:hover > a {
    	background: black; 
    	color: white;
    }
    #nav li:hover li a {
    	background: black;
    	border: none;
    	color: white;
    }
    #nav ul li:hover a{
    	background: black;
    	border: none;
    	color: yellow;
    }
    #nav ul {
    	color: white;
    	display: none;
    	margin: 0;
    	padding: 0;
    	width: 150px;
    	position: absolute;
    	top: 36px;
    	left: 0;
    	z-index: 2;
    }
    #nav li:hover > ul {
    	display: block;
    }
    #nav ul li {
    	float: none;
    	margin: 0;
    	padding: 0;
    }
    #nav ul a {
    	font-weight: normal;
    	color: white;
    }
    /* clearfix */
    #nav:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    thanks in advance!

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    I'm a little confused by what you're asking. I know you said you want the dropdown box to align centered, but some of the other things you said seem to imply you are talking about the text inside the dropdown box instead. Perhaps you could clarify what it is you mean.

    As for sizing the box to fit the text inside in a multi-line element, I'm not actually sure. There might be some trickery when using inline (or probably more appropriately, inline-block) elements with no width defined, but I've yet to do something along those lines. Someone else should know more.

    Since your code looked workable (and in an attempt to understand what you meant to align), I dumped it on my development site.
    It's here, if anyone else wants a bit more clarity: [Gone now]
    Last edited by Custard7A; 11-30-2012 at 11:01 AM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello backa,
    Right now you have the dropped ul set at 150px width. You could re-think that width or remove it entirely...
    Look at it this way once -
    Code:
    #nav ul {
    	color: white;
    	display: none;
    	margin: 0;
    	padding: 0;
    	/*width: 150px;*/
    	position: absolute;
    	top: 36px;
    	left: 0;
    	z-index: 2;
    	white-space: nowrap;
    }
    You could also just put a smaller width than 150px.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    backa (11-30-2012)

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Excavator View Post
    Hello backa,
    Right now you have the dropped ul set at 150px width. You could re-think that width or remove it entirely...
    Look at it this way once -
    Code:
    #nav ul {
    	color: white;
    	display: none;
    	margin: 0;
    	padding: 0;
    	/*width: 150px;*/
    	position: absolute;
    	top: 36px;
    	left: 0;
    	z-index: 2;
    	white-space: nowrap;
    }
    You could also just put a smaller width than 150px.
    I was setting the width in order to allow for wider text that may be required as options when the real text is put in, but your solution seems to work 100%. Thanks! was not aware of the white-space property.

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Will you need text align center or sub menu background on center?

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    ideally I'd like the drop menu width to be was wide as the longest option at least, including the base level option, with all text to be in line. As the example stands, if you have an option named "very long option" and the submenu for it is just "option 1" etc., the submenu will be a shorter width than the option and looks off center. make sense?

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Thanks for the width and no wrap suggestions. I'm also struggling with the menus. How do I align the text in the sub-menu to align under the menu text


    Thanks..Russ

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    arghh tested this menu now in IE7, and find it's not working properly. It's almost impossible to 'catch' the dropdown menu after mouseover on the base level, as soon as you move off the base option the submenu disappears - however what is strange is that it is not uniform across all options, on some options I can at least get to the first submenu option, and moving below that causes the submenu to disappear. Any ideas how I can prevent this? (unfortunately it needs to work on IE7)

    Edit: some playing with settings shows that if I change the 'top' value in #nav ul to 26px instead of 36, the menu almost behaves properly (although the alignment is obviously way out) - but some options remain skittish. Argh!
    Last edited by backa; 12-03-2012 at 02:01 PM.


  •  

    Posting Permissions

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