PDA

View Full Version : CSS (Tableless Design) Having difficulty with vertical positioning on text



justplaindoug
Jan 20th, 2009, 09:33 PM
I am trying to make the switch to tableless design, and use css as it should. The problem is- without tables I am having trouble getting my text to layout as I want- vertically.

In the header and footer of my pages- the text aligns center within the #header and #footer divs. That's in firefox. in IE it top aligns.

I tried using line spacing and that works flawlessly in IE but creates a huge gap in Firefox.

Any suggestions (I am giving this an honest try- so don't slam me, I am sure there are flubs in my coding)

Site- http://www.kcrockyhorror.com/test.html

test.html code

<!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">
<head>
<title>KCRockyHorror.com - The Home of Fishnets and Floorshows</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<h1>yeah</h1>
</div>
<div id="leftnavigation">
<h1>This Way to Denton</h1>
<p>Testing the css</p>
</div>
<div id="content">
<h1>dasdfa</h1>


</div>
<div id="rightnavigation">
<h1>Upcoming Events</h1>
<p>February 21st<br />
10pm Show at the Screenland</p>
<p>March 21st<br />
The Stripping of the Green!<br />
Our special St. Patricks Show
</p>
</div>
<div id="footer">
<p align="right">copyright</p>
</div>
</body>
</html>


css code


body {
margin : 0;
padding : 0;
border-color : #cc0000;
background:url(Argylebl.jpg);
background-color : #000000;
color : #ffffff;
}
p, ul, ol, li {
font : 10pt Arial,geneva,helvetica;
}
h1 {
font : bold 14pt Arial, Helvetica, geneva;
}
h2 {
font : bold 12pt Arial, Helvetica, geneva;
}
#leftnavigation {
position : absolute;
left : 0;
width : 15%;
margin-left : 10px;
margin-top : 70px;
color : #000000;
padding : 3px;
background-color:#666;
}
#rightnavigation {
position : absolute;
right : 0;
margin-right: 10px;
top : 70px;
width : 15%;
padding-left : 10px;
z-index : 3;
color : #000000;
padding : 3px;
background-color:#666
}
#header {
position : absolute;
width:100%;
height: 100px;
margin-right: 0px;
top : 0px;
color : #ffffff;
background-color:#000000
}

#header p h1{
padding-left: 10px;
padding-top: 10px
}

#footer {
position : absolute;
width:100%;
height: 50px ;
bottom : 0px;
color : #ffffff;
line-height: 50px;
background-image:url(footer.jpg);
background-color:#000000
}

#footer p {
font-family:Tahoma, Geneva, sans-serif;
padding-right: 10px;

}


#content {
position: absolute;
top : 0px;
margin : 90px 25% 0 25%;
width : 50%;
padding : 3px;
background-color:#666;
color : #000000;
}
#content h1, #content h2 {
color : #cc0000;
}

and yes, I am aware my header is too big, I still have to adjust positioning on the three main areas.


TIA

BoldUlysses
Jan 20th, 2009, 09:49 PM
Try adding the universal reset to the beginning of your CSS:


* {
margin:0;
padding:0;
}

Next, for the line-height vertical centering method to work, if you have a block-level item (such as a <p>)inside your div (as you do in your footer, for example), it needs to be applied to that and not the containing div. Like so:

HTML:


<div id="footer">
<p>copyright</p>
</div>

CSS:


#footer {
position:absolute;
width:100%;
bottom:0px;
color #fff;
background-image:url(footer.jpg);
background-color:#000;
}

#footer p {
font-family:Tahoma, Geneva, sans-serif;
padding-right:10px;
float:right;
height:50px;
line-height:50px;
}

Same goes for your header div.

justplaindoug
Jan 20th, 2009, 09:58 PM
Thank you so much.

I have a lot to learn about css, no doubt.

However, I had no idea about that rule- that I was essentially using the write code but on the wrong css id.

Your help is much appreciated.