PDA

View Full Version : centering problems

hurloon
08-10-2006, 02:06 AM
well, basically i am trying to center all my content on the screen in a area that is 750px wide...but my methods arent working that is with useing text-align:center; here is my code the stylesheet and the html document:

html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>...
</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" language="JavaScript" src="scripts.js">
</script>
</head>
<body>
<div class="wrapIt">
<div id="header" class="topNess">

</div>
<div id="leftNav" class="left">
<div id="exPlain" class="leftSpace">
</div>
<ul id="nav">
<li><a class="menuLink" href="index.html">Home</a></li>
<li><a class="menuLink" href="#">Military</a>
<ul>
<li><a class="menuLink" href="#">Sa Caleta Statistics</a></li>
<li><a class="menuLink" href="#">View Your Stats</a></li>
<li><a class="menuLink" href="#">Territories/Maps</a></li>
</ul>
</li>
<li><a class="menuLink" href="#">Regional RP</a>
<ul>
<li><a class="menuLink" href="#">Participants</a></li>
<li><a class="menuLink" href="#">War Zones</a></li>
<li><a class="menuLink" href="#">Allies</a></li>
<li><a class="menuLink" href="#">Enemies</a></li>
</ul>
</li>
<li><a class="menuLink" href="#">Need help?</a>
<ul>
<li><a class="menuLink" href="#">Site Map</a></li>
<li><a class="menuLink" href="#">Links</a></li>
<li><a class="menuLink" href="#">F.A.Q.</a></li>
</ul>
</li>
</ul>
<div id="lowerhalf" class="lowHalf">
<div class="validStuffs"><p>
<a class="ver" href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a>
</p>
<p><a class="ver" href="http://jigsaw.w3.org/css-validator/"> <img

src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31"

width="88" border="0"/></a>
</p>
</div>
</div>
</div>
</div>
</body>

</html>

and my stylesheet:
body {
height : 97%;
margin : 0;
margin-left : 10px;
padding : 0;
font : normal 12px verdana;
background-color : #cccccc;
color : #333333;
}
li {
border : none;
}
ul {
margin : 0;
padding : 0;
list-style : none;
width : 150px;
position : absolute;
top : 140px;
border-bottom : 1px solid #cccccc;
z-index : 999;
}
ul li {
position : relative;
}
li ul {
position : absolute;
left : 149px;
top : 0;
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #333333;
background-color : #ebebeb;
padding : 5px;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
* html ul li {
float : left;
height : 1%;
}
* html ul li a {
height : 1%;
}
li:hover ul, li.over ul {
display : block;
z-index : 999;
}
a.menuLink:link {
color : #000000;
background-color : #ebebeb;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
a.menuLink:active {
color : #0060bf;
text-decoration : none;
background-color : #ebebeb;
border : 1px solid #cccccc;
}
a.menuLink:hover {
color : #004080;
background-color : #ffffff;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
div.leftSpace {
margin : 0;
padding : 0;
position : absolute;
width : 150px;
height : 100%;
color : #333333;
background-color : #ebebeb;
z-index : 2;
}
div.leftNav {
margin : 0;
padding : 0;
height : 100%;
background-color : transparent;
}
a:link {
color : #60bf00;
background-color : transparent;
text-decoration : none;
}
a:active {
color : #0060bf;
background-color : transparent;
text-decoration : none;
}
a:hover {
color : #004080;
background-color : transparent;
text-decoration : underline;
border-bottom : 1px dashed #004080;
}
a.ver:hover{border:0px;}
div.lowHalf {
position : absolute;
top : 70%;
width : 150px;
z-index : 2;
}
div.validStuffs {
text-align : center;
padding : 10px;
width : 88px;
height : 100px;
}
div.topNess {
width : 750px;
height : 100px;
color : #333333;
background-color : #ebebeb;
z-index : 3;

position : absolute;
}
_Aerospace_Eng_
08-10-2006, 02:14 AM
Try this for your CSS
body {
margin : 0;
margin-left : 10px;
padding : 0;
font : normal 12px verdana;
background-color : #cccccc;
color : #333333;
}
li {
border : none;
}
ul {
margin : 0;
padding : 0;
list-style : none;
width : 150px;
position : absolute;
top : 140px;
border-bottom : 1px solid #cccccc;
z-index : 999;
}
ul li {
position : relative;
}
li ul {
position : absolute;
left : 149px;
top : 0;
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #333333;
background-color : #ebebeb;
padding : 5px;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
* html ul li {
float : left;
height : 1%;
}
* html ul li a {
height : 1%;
}
li:hover ul, li.over ul {
display : block;
z-index : 999;
}
a.menuLink:link {
color : #000000;
background-color : #ebebeb;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
a.menuLink:active {
color : #0060bf;
text-decoration : none;
background-color : #ebebeb;
border : 1px solid #cccccc;
}
a.menuLink:hover {
color : #004080;
background-color : #ffffff;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
div.leftSpace {
margin : 0;
padding : 0;
position : absolute;
width : 150px;
height : 100%;
color : #333333;
background-color : #ebebeb;
z-index : 2;
}
div.leftNav {
margin : 0;
padding : 0;
height : 100%;
background-color : transparent;
}
a:link {
color : #60bf00;
background-color : transparent;
text-decoration : none;
}
a:active {
color : #0060bf;
background-color : transparent;
text-decoration : none;
}
a:hover {
color : #004080;
background-color : transparent;
text-decoration : underline;
border-bottom : 1px dashed #004080;
}
a.ver:hover{border:0px;}
div.lowHalf {
position : absolute;
top : 70%;
width : 150px;
z-index : 2;
}
div.validStuffs {
text-align : center;
padding : 10px;
width : 88px;
height : 100px;
margin:auto;
}
div.topNess {
width : 750px;
height : 100px;
color : #333333;
background-color : #ebebeb;
z-index : 3;

position : absolute;
}
.wrapIt {
margin:auto;
height:100%;
width:750px;
}
margin:auto; is the correct way to center divs. Also you need to remove this line
<?xml version="1.0" encoding="UTF-8"?>
in order for the CSS to work in IE.
hurloon
08-10-2006, 02:21 AM
that works for the most part but then my <div class="leftSpace"> doesnt show up
_Aerospace_Eng_
08-10-2006, 02:24 AM
Try this
html {
height:100%;
}
body {
margin : 0;
margin-left : 10px;
padding : 0;
font : normal 12px verdana;
background-color : #cccccc;
color : #333333;
height:100%;
}
li {
border : none;
}
ul {
margin : 0;
padding : 0;
list-style : none;
width : 150px;
position : absolute;
top : 140px;
border-bottom : 1px solid #cccccc;
z-index : 999;
}
ul li {
position : relative;
}
li ul {
position : absolute;
left : 149px;
top : 0;
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #333333;
background-color : #ebebeb;
padding : 5px;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
* html ul li {
float : left;
height : 1%;
}
* html ul li a {
height : 1%;
}
li:hover ul, li.over ul {
display : block;
z-index : 999;
}
a.menuLink:link {
color : #000000;
background-color : #ebebeb;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
a.menuLink:active {
color : #0060bf;
text-decoration : none;
background-color : #ebebeb;
border : 1px solid #cccccc;
}
a.menuLink:hover {
color : #004080;
background-color : #ffffff;
text-decoration : none;
border : 1px solid #cccccc;
border-bottom-width : 0;
}
div.leftSpace {
margin : 0;
padding : 0;
position : absolute;
width : 150px;
height : 100%;
color : #333333;
background-color : #ebebeb;
z-index : 2;
}
div.leftNav {
margin : 0;
padding : 0;
height : 100%;
background-color : transparent;
}
a:link {
color : #60bf00;
background-color : transparent;
text-decoration : none;
}
a:active {
color : #0060bf;
background-color : transparent;
text-decoration : none;
}
a:hover {
color : #004080;
background-color : transparent;
text-decoration : underline;
border-bottom : 1px dashed #004080;
}
a.ver:hover{border:0px;}
div.lowHalf {
position : absolute;
top : 70%;
width : 150px;
z-index : 2;
}
div.validStuffs {
text-align : center;
padding : 10px;
width : 88px;
height : 100px;
margin:auto;
}
div.topNess {
width : 750px;
height : 100px;
color : #333333;
background-color : #ebebeb;
z-index : 3;

position : absolute;
}
.wrapIt {
margin:auto;
height:100%;
width:750px;
}
hurloon
08-10-2006, 02:33 AM
thank you so much.