centering header

docock · 12-27-2007, 11:53 PM

I'm having trouble getting a header centered, the coding below speaks for itself, I've tried several things to get the header centered, however it doesnt do the job, how can I alter my coding so that the header will be horizontal centered?

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {background: yellow;margin:0px;}
.container { font-size:10px;width: 770px; text-align:center;margin-left:auto;margin-right:auto;}
.header {background: url(header_top.jpg) top no-repeat;height:160px;}
</style>

</head>
<body>
<div class="container">
<div class="header">
test
</div>
</div>

</body>
</html>

Majoracle · 12-28-2007, 12:15 AM

I don't really see a problem. I tried it in Firefox 2 and it worked fine. if it's centering the header without having the text inside it centered, you can just take out text-align:center; in .container. It'll remain centered without the text being centered. What browser(s) are you trying it in?

VIPStephan · 12-28-2007, 12:54 AM

Quote:

Originally Posted by docock

[…] the coding below speaks for itself […]

Indeed, the code speaks for itself…

Fix your site with the right doctype.

P.S.: Rule number one in website development: First comes the content, then the styling. Before you start messing around with CSS put some real content. No need to style a “header” if that’s the only thing you currently have because with different content/meaning the approach of styling it is different later on.

effpeetee · 12-28-2007, 10:37 PM

Try this for size.

Frank.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<title>Untitled</title>
<style type="text/css">
body {background: yellow;
width:100%;
margin:0px;
color:#000;
Font-size:1.2em;}

.container { 
font-size:1.5em;
width: 100%; 
text-align:center;
margin-left:
auto;margin-right:auto;}

.header {
background: url(header_top.jpg); 
background: no-repeat;
height:160px;
text-align:center;}
</style>

</head>
<body>
<div class="container">
<div class="header">
test
</div>
</div>

</body>
</html>

Apostropartheid · 12-28-2007, 11:16 PM

Although IDs would be more appropriate than classes.