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 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Center unordered list on page

    Im sure that there is a really obvious answer to this, but i just want to know how to horizontally centre an unordered list on a page. Am i best to use html or css for this?

    Many thanks

    Tim

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by confused html View Post
    Im sure that there is a really obvious answer to this, but i just want to know how to horizontally centre an unordered list on a page. Am i best to use html or css for this?
    It is not necessarily a simple task. But we need to see your code in order to tell.

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, thats a quick reply.

    Ive actually just posted my other problem with the site. You can see the page at www.geocities.com/timdenton3000

    I can post the css or html here is you like... but theres quite a lot of it.

    Regards

    Tim

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by confused html View Post
    You can see the page at www.geocities.com/timdenton3000
    Ok, before you continue, I recommend that you get another host. The problem with geocities is that junk code is automatically added to the top above your document type declaration. This means that your page is rendered in quirks mode.

    When in quirks mode, among other things, you cannot horizontally center an element in Internet Explorer using the correct technique, namely, margin: 0 auto. Maybe this is what you are experiencing. Again, I recommend that you find another host to avoid quirks mode.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the css, sorry about the messyness;

    html just below


    body {
    font-family: Monaco, Geneva, Verdana, Courier New, monospaced;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    margin: 45px;
    list-style-type: none;
    font-weight: normal;
    }


    /*copied from another website this wlil apply to all links*
    a:link {
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    }

    a:visited {
    color: #ddd;
    background-color: inherit;
    }

    a:hover {
    color: white;
    text-decoration: none;
    background-color: #3399ff;
    border-color: #3399ff;
    }

    */

    /* Hyperlinks.
    #menu a {
    height: 1%; /* CSS2 specifies this becomes "auto" because the <li> doesn't have a "height" set. This means the anchor will expand to fit its content like we want it to. By setting a height, IE will enable the "hasLayout" flag on this element, allowing the block hyperlink effect we want. */
    /* display: block; /* Makes anchor fill the <li> which contains it. */
    /* padding: 0.2em 0.2em 0.2em 0.5em; /* Space the text from inside edges of anchor and indent it from the left by half a character. */
    /* text-decoration: none; /* Remove underline from links. */
    /*}
    /**/


    ul {
    list-style-position: outside;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0em;
    text-indent: 0em;
    width: 400px;
    }


    /*title ELECTRICIWG and anything that doesnt have a class or link tag*/
    li {
    padding-bottom: 10px;
    color: #996600;
    }
    /*
    li ul {
    padding-bottom: 6px;
    }

    li ul li {
    padding-bottom: 6px;

    }

    li ul li ul {
    padding-bottom: 6px;
    }
    */


    /*ELECTRICWIG*/
    .wig { /*the only CSS that actually goes with this webpage*/
    color: #993366;
    cursor: default;
    position: left;
    text-indent: 0px;
    font-weight: normal;
    font-family: Courier new;
    font-size: 28px;

    }

    /*1st level eg FURNITURE*/
    li .home { /*the only CSS that actually goes with this webpage*/
    color: #3399FF;
    cursor: pointer;
    position: left;
    text-indent: 0px;
    font-weight: bold;

    }

    li :link { color: #3399FF; background-color: transparent; font-weight: bold;}
    li :visited { color: #3399FF; background-color: transparent; font-weight: bold;}
    li :hover {color: white; text-decoration: none; background-color: #996600; border-color: #996600;}
    li :active {color: white; text-decoration: none; background-color: #996600; border-color: #996600;}


    /*1st level eg Billinghay commission*/
    li .main {
    color: #FF3399;
    cursor: pointer;
    position: left;
    text-indent: 0px;
    }

    li .main :link { color: #FF3399; background-color: transparent; font-weight: bold;}
    li .main :visited { color: #FFCCCC; background-color: transparent; font-weight: bold; text-decoration: none}
    /*1st Focus should turn text brown when selected but causes probs in opera and ie
    li .main :focus { color: #996600; background-color: transparent; font-weight: bold; text-decoration: none}
    */
    li .main :hover {color: white; text-decoration: none; background-color: #996600; border-color: #996600;}
    li .main :active {color: white; text-decoration: none; background-color: #996600; border-color: #996600;}


    /*1st level which are not links*/
    li .mainnolink {
    color: #FF3399;
    cursor: pointer;
    position: left;
    text-indent: 0px;
    }


    /*2nd level eg text about Billinghay commission*/
    li .sub1 {
    color: #996600;
    cursor: text;
    position: left;
    text-indent: 0px;
    }

    li .sub1 :link { color: #996600; background-color: transparent; font-weight: normal;}
    li .sub1 :visited { color: #996600; background-color: transparent; text-decoration: underline}
    li .sub1 :hover {color: none; text-decoration: none; background-color: none; border-color: none;}
    li .sub1 :active{color: none; text-decoration: none; background-color: none; border-color: none;}


    /*3rd level eg zoetropes*/
    li .sub {
    color: #33CC33;
    cursor: pointer;
    position: left;
    text-indent: 0px;
    }

    li .sub :link { color: #33CC33; background-color: transparent; font-weight: normal;}
    li .sub :visited { color: #99FF99; background-color: transparent; text-decoration: underline}
    li .sub :hover {color: white; text-decoration: none; background-color: #996600; border-color: #996600;}
    li .sub :active{color: white; text-decoration: none; background-color: #996600; border-color: #996600;}




    /*4th level eg text body about zoetropes*/
    li .sub2 {
    color: #996600;
    cursor: text;
    position: left;
    text-indent: 0px;
    }

    li .sub2 :link { color: #996600; background-color: transparent; font-weight: normal;}
    li .sub2 :visited { color: #996600; background-color: transparent; text-decoration: underline}
    li .sub2 :hover {color: none; text-decoration: none; background-color: none; border-color: none;}
    li .sub2 :active {color: none; text-decoration: none; background-color: none; border-color: none;}

    li .sub3 {
    color: #CC6699;
    cursor: pointer;
    position: left;
    text-indent: 0px;


    }

    html;
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <!-- $Id: cover.html,v 1.2 1999/12/24 23:37:45 ijacobs Exp $ -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>TITLE</title>
    <script type="text/javascript" src="script.js">
    </script><link rel="stylesheet" type="text/css" href="style.css">

    <ul id="menu">
    <li class="home"><a href="imagepages/titles/right.html" target="right" style="text-decoration: none">HEADING ONE</a>
    <ul>
    <li class="main"><a href="imagepages/meg/right.html" target="right" style="text-decoration: none"><br>Sub Heading 1</a>
    <ul>
    <li class="sub1">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    </ul>
    <li class="main"><a href="imagepages/bill/billinghay/right.html" target="right" style="text-decoration: none">Sub heading 2</a>
    <ul>
    <li class="sub1">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    <li class="sub"><a href="imagepages/bill/seating/right.html" target="right" style="text-decoration: none">> Sub sub heading 1</a>
    <ul>
    <li class="sub2">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    </ul>
    <li class="sub"><a href="imagepages/bill/feature/right.html" target="right" style="text-decoration: none">> Sub Sub heading 2</a>
    <ul>
    <li class="sub2">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    </ul>
    </ul>
    <li class="main"><a href="imagepages/turn/right.html" target="right" style="text-decoration: none">HEADING TWO</a>
    <ul>
    <li class="sub1">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    </ul>
    </ul>
    </li>
    </ul>
    <script type="text/javascript">dMenu.init('menu');</script>

  • #6
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i see, but dont worry, im not using geocities for my website. It was just somewhere to put it up for now. Im actually using yahoo web hosting... which i hope is better.

    since im not using geocities, is there anyhitng i can do?

    Regards

    Tim

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    To center your menu:
    Code:
    ul {
    list-style-position: outside;
    list-style-type: none;
    /* margin-left: 0; */
    margin: 0 auto;
    padding-left: 0em;
    text-indent: 0em;
    width: 400px;
    }

  • #8
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thats brilliant, it works great. And i really have spent too long a time searching for that.

    Many thanks

    Tim

  • #9
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually... it works in every browser apart from ie. it adds a load of padding, making each list level indent by a ridicullous amount? Ive had a quick search for a fix on the internet but no luck so far... any idea?

    Regards

    Tim

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by confused html View Post
    Actually... it works in every browser apart from ie. it adds a load of padding, making each list level indent by a ridicullous amount? Ive had a quick search for a fix on the internet but no luck so far... any idea?

    Regards

    Tim
    Which is why it was suggested that you use a different host that doesn't put ads on your page. IE6 when in quirks mode doesn't understand margin:auto. IE6 can also be in quirks mode when a full doctype isn't used. For example you have a partial doctype. I suggest using this doctype instead.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Its likely going to mess up your layout quite a bit but if it does then it means your code was written poorly to begin with.

    www.freehostia.com is a decent free host with no ads.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Aug 2006
    Posts
    64
    Thanks
    0
    Thanked 1 Time in 1 Post
    you need to put a <center> around the ul or use text-align center in the container of ul. that is: in the body class.

    then use margin: 0 auto; in the ul and text-align: left to undo the center in the body so you end up with:

    Code:
    body {
    font-family: Monaco, Geneva, Verdana, Courier New, monospaced;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: center;
    margin: 45px;
    list-style-type: none;
    font-weight: normal;
    }
    
    ul {
    	list-style-position: outside;
    	list-style-type: none;
    	margin: 0 auto;
    	padding-left: 0em;
    	text-indent: 0em;
    	width: 400px;
    	text-align:left;
    }
    I think there's a few a problems but that should cover centering regardless of quirks or not.

    anything else inside body will need text-align: left; so you may find easier to put a div around ul and specify the div as 100% width with text-align:center; instead of using text-align center in the body class.

  • #12
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks everyone

    that worked great


  •  

    Posting Permissions

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