PDA

Click to See Complete Forum and Search --> : Problem centering

matt25
11-01-2008, 04:35 PM
I am Trying to build a new homepage and I cant work out why the header won't center, This (http://thttest.110mb.com/) is the page and the code is below; can anyone help? thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>South west THT Young Leaders</title>
<link rel="stylesheet" type="text/css" href="/layout.css" />
</head>
<body>
<div id="page-wrap">
<ul id="nav">
<li></li>
</ul>
</div> <!-- END page-wrap-->
</body>
</html>
body
{
background:url('images/header.jpg') repeat-x top;
background-color: #ffffcc
}

div.page-wrap {
margin: 0 auto;
}

ul#nav {
height: 200px; width: 900px;
background: url('/images/banner_ctr.gif') no-repeat;
margin: -8px;
list-style-type: none;
}
felgall
11-01-2008, 05:10 PM
div.page-wrap

should be

div#page-wrap
matt25
11-01-2008, 05:19 PM
I have changed that and it still isn't centering :confused:
felgall
11-01-2008, 05:42 PM
Since you haven't specified a width for page-wrap it is defaulting to 100% and is centering in that - ie. the margins that auto places on each side are zero.
matt25
11-01-2008, 05:46 PM
Ah ok, I get it, I have specified the width and it works! thanks.
matt25
11-02-2008, 08:09 AM
I know have another problem, I can't get the links to show; this is my latest code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>South west THT Young Leaders</title>
<link rel="stylesheet" type="text/css" href="/layout.css" />
</head>
<body>
<div id="page-wrap">
<ul id="nav">
<li id="home"><a href="#">Home</a></li>
<li id="forum"><a href="#">Forum</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div> <!-- END page-wrap-->
</body>
</html>

body
{
background:url('images/header.jpg') repeat-x top;
background-color: #ffffcc
}

div#page-wrap {
margin: 0 auto;
width: 920px;
}

ul#nav {
height: 200px; width: 900px;
background: url('/images/banner_ctr.gif') no-repeat;
margin: -8px;
list-style-type: none;
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 98px;
float: left;
text-indent: -9999px;
}
ul#nav li.home a {
width: 319px;
background: url(images/nav_home.jpg) bottom center no-repeat;
}
ul#nav li.forum a {
width: 286px;
background: url(images/nav_forum.jpg) bottom center no-repeat;
}
ul#nav li.contact a {
width: 315px;
background: url(images/nav_contact.jpg) bottom center no-repeat;
}
Fang
11-02-2008, 08:22 AM
The links are off screen: text-indent: -9999px;
matt25
11-02-2008, 10:04 AM
Yeah, I want the text to be off screen and the images to be the links.