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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 29
  1. #1
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts

    Centered ul menu

    I've run into several uses for a horizontal ul navigation menu that is centered without specifying a width for it. Easy enough to do by percentage centering the ul like this: http://nopeople.com/CSS/menu-h_centered-ul/index.html


    I'm messing around with the code quoted below - a ul that has display:inline; li's and centers from inherited text-align:center; it gets from html, body.

    What will make the ul enclose the li buttons???
    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 type="text/css"> 
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	background: #999;
    	overflow:auto;
    }
    		ul#menu  {
    			background: #FFC;
    			margin: 50px 0 100px; /*just to move it down a bit*/
    			list-style: none;
    		}
    		#menu li {
    			display: inline;
    		}
    		#menu li a:link,
    		#menu li a:visited,
    		#menu li a:active {
    			color: #999;
    			background: #6C9;
    			padding: 5px 20px;
    			text-decoration: none;
    		}
    		#menu li a:hover {
    			background: #C63;
    			color: #000;
    		}
    </style>
    </head>
    <body> 
        <div id="wrap">
                    <ul id="menu">
                        <li><a href="#">a long one</a></li>
                        <li><a href="#">two</a></li>
                        <li><a href="#">three</a></li>
                        <li><a href="#">and four is even longer still</a></li>
                    </ul>
        <!--end wrap--></div>
    </body>
    </html>
    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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hello Excavator,

    Not quite sure what you mean or what you are after. I'm a bit thick tonight.
    Can you put it another way?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #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
    Quote Originally Posted by effpeetee View Post
    Hello Excavator,

    Not quite sure what you mean or what you are after. I'm a bit thick tonight.
    Can you put it another way?

    Frank
    Hi Frank - that #FFC bar is the ul. It is full width but it does not expand in height to contain the #6C9 buttons which are overflowing top and bottom.

    I'm trying to get the cream colored ul to expand in height so it wraps the green buttons.
    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

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    	background: #6C9;
    			padding: 5px 20px;
    			text-decoration: none;
    		}
    		#menu li a:hover {
    			background: #C63;
    			color: #000;
    		}
    
              #menu{height:50px;}
    </style>
    
    adding this helps. Is this what you need.
    
    Frank
    </head>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is very messy but it appears to work. I just don't have the time to tidy it up.

    Don't laugh too much.

    Frank

    [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 type="text/css">html, body {
    font: 14px "Comic Sans MS";
    background: #FC6;
    text-align: center;
    }

    * {
    margin: 0;
    padding: 0;
    border: none;
    }

    #wrap {
    width: 1000px;
    margin: 30px auto;
    background: #999;
    overflow: auto;
    }

    ul{
    margin-top: 8px;
    }

    #menu li a:hover {
    background: #C63;
    color: #000;
    }

    #menu {
    background: #FFC;
    height: 30px;
    }

    #menu ul li{
    margin-top: 120px;
    margin: 50px 0 100px;/*just to move it down a bit*/
    list-style: none;
    }

    #menu li {
    display: inline;
    }

    #menu li a:link, #menu li a:visited, #menu li a:active {
    color: #999;
    background: #6C9;
    padding: 5px 20px;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div id="menu">
    <ul>
    <li><a href="#">a long one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">and four is even longer still</a></li>
    </ul>
    <!--end wrap--></div>
    </body>
    </html>[/CODE]
    Last edited by effpeetee; 03-01-2009 at 09:20 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Not quite. Specifying a height just makes the ul taller, the li's still break out the top.
    I really don't want to specify a height anyway. The height of the button is determined by font size + bottom/top padding and that is a lot of variables to add up and still expect it to be cross browser compatable.

    I can't figure out why it won't take the height of it's content like you would think it should. I mean, I know it's because the content is displayed inline but something has to make the li size the height of the ul, instead of the a:link which is what's sizing it now.
    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

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Excavator,

    EDIT - Try this instead,

    Code:
    #menu {
      background: #FFC;
      min-height:5px;
      
    }
    What set me on this course was the tag <ul id="menu"> and I could not find a div coded under #menu. Several with other added taglets - li #menu etc. I am not very good at css I must admit. Especially where the combinations are concerned. Still I'll press on but I think you have a better chance than me.

    Carry on Coding. (sounds like a good name for a film.)

    Frank
    Last edited by effpeetee; 03-01-2009 at 09:34 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by effpeetee View Post

    Carry on Coding. (sounds like a good name for a film.)

    Frank
    Haha, you should add that to your sig.

    There is no div #menu because that is the id of the ul.
    ul#menu
    No div for this.


    Checking out the code you posted now... didn't see it a minute ago.
    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

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is no div #menu because that is the id of the ul.
    ul#menu
    No div for this.
    I didn't realise that one could do that. Live and learn!

    Frank
    Last edited by effpeetee; 03-01-2009 at 09:53 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I moved things around a bit in your code Frank, it's still not quite what I'm after. The #menu at height:30px; still doesn't contain the buttons and, even if it did... adjusting the ul margin-top and the height of #menu is not going to work cross browser I think.

    not working -
    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 type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #menu {
    	height: 26px;
    	margin: 50px 0 100px;/*just to move it down a bit*/
    	background: #FFC;
    }
    		ul{
    			margin-top: 3px;
    		}
    		#menu li {
    			display: inline;
    		}
    		#menu ul li a:link, 
    		#menu ul li a:visited, 
    		#menu ul li a:active {
    			color: #999;
    			background: #6C9;
    			padding: 5px 20px;
    			text-decoration: none;
    		}
    		#menu ul li a:hover {
    			background: #C63;
    			color: #000;
    		}
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="menu">
                <ul>
                    <li><a href="#">a long one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">and four is even longer still</a></li>
                </ul>
            </div>
        <!--end wrap--></div>
    </body>
    </html>
    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

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This one appears to be expanding with the text. Works the same for me IE8 and FFox 3.1
    Windows 7 Ultimate. 32bit.

    I've stuck it here.

    Frank

    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 type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    		ul{
    			margin-top: 3px;
    		}
    		#menu li {
    			display: inline;
    		}
    		#menu ul li a:link, 
    		#menu ul li a:visited, 
    		#menu ul li a:active {
    			color: #999;
    			background: #6C9;
    			padding: 5px 20px;
    			text-decoration: none;
    		}
    		#menu ul li a:hover {
    			background: #C63;
    			color: #000;
    		}
    
               #menu {
    	min-height: 6px;
    	margin: 50px 0 100px;/*just to move it down a bit*/
    	background: #FFC;
    border: 5px solid red;
    }
    
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="menu">
                <ul>
                    <li><a href="#">a long one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                    <li><a href="#">and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still </a></li>
                </ul>
            </div>
        <!--end wrap--></div>
    </body>
    </html>
    Last edited by effpeetee; 03-02-2009 at 12:23 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hmm, IE8 botches it here. So Does FF3.1.
    Looks best in IE7 but it's still not expanding the ul.

    Using your code, remove the extra long link so it's back to what we started with - <li><a href="#">and four is even longer still</a></li>
    Change the border to the background color so it matches - border: 5px solid #FFC;

    And it still doesn't look like what I'm after - http://nopeople.com/CSS/menu-h_centered-ul/index.html


    To illustrate, change the li padding in both our codes to padding:10px 20px; and see what happens.
    In http://nopeople.com/CSS/menu-h_centered-ul/index.html the cream colored menu bar expands with the buttons.
    In your code, and mine at http://nopeople.com/test/inline_ul.html, the button gets bigger but the ul stays the same.
    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

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    a different appraoch:
    horizontal menu center align?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    My editor is the problem. It is showing me faulty results. Never done that before.

    Frank

    Off to bed. It's 1230 am here.

    Back tomorrow.

    Latest effort.
    Attached Thumbnails Attached Thumbnails Centered ul menu-screenhunter_01-mar.-02-00.15.jpg  
    Last edited by effpeetee; 03-02-2009 at 12:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by harbingerOTV View Post
    a different appraoch:
    horizontal menu center align?
    Hello harbinger,
    Are you talking about the % centering method like I mentioned when I started this thread?
    Easy enough to do by percentage centering the ul like this: http://nopeople.com/CSS/menu-h_centered-ul/index.html
    Or is there something else there that I missed?

    I already use that method. I'm more interested in why the ul won't act like a div and expand to contain the display:inline; li's inside it.
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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