Center unordered list on page

confused html · 07-13-2007, 08:34 PM

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

koyama · 07-13-2007, 08:37 PM

Quote:

Originally Posted by confused html

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.

confused html · 07-13-2007, 08:41 PM

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

koyama · 07-13-2007, 08:52 PM

Quote:

Originally Posted by confused html

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.

confused html · 07-13-2007, 08:56 PM

Here is the css, sorry about the messyness;

html just below

Quote:

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;

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">

<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>

confused html · 07-13-2007, 08:59 PM

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

koyama · 07-13-2007, 09:06 PM

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;
}

confused html · 07-13-2007, 09:11 PM

Thats brilliant, it works great. And i really have spent too long a time searching for that.

Many thanks

Tim

confused html · 07-13-2007, 11:12 PM

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

_Aerospace_Eng_ · 07-14-2007, 12:37 AM

Quote:

Originally Posted by confused html

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.

percepts · 07-14-2007, 01:32 AM

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.

confused html · 07-17-2007, 12:08 PM

thanks everyone

that worked great