Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-27-2007, 11:53 PM   PM User | #1
docock
Regular Coder

 
Join Date: Feb 2007
Posts: 195
Thanks: 20
Thanked 1 Time in 1 Post
docock is an unknown quantity at this point
centering header

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>
docock is offline   Reply With Quote
Old 12-28-2007, 12:15 AM   PM User | #2
Majoracle
Regular Coder

 
Join Date: Nov 2006
Posts: 246
Thanks: 13
Thanked 26 Times in 24 Posts
Majoracle is an unknown quantity at this point
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?
Majoracle is offline   Reply With Quote
Old 12-28-2007, 12:54 AM   PM User | #3
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,604
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
Quote:
Originally Posted by docock View Post
[…] 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.
__________________
Don’t click this link!

Last edited by VIPStephan; 12-28-2007 at 12:57 AM..
VIPStephan is offline   Reply With Quote
Old 12-28-2007, 10:37 PM   PM User | #4
effpeetee
Senior Coder

 
effpeetee's Avatar
 
Join Date: Feb 2007
Location: Clapham Junction - London SW
Posts: 4,884
Thanks: 228
Thanked 204 Times in 203 Posts
effpeetee is an unknown quantity at this point
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>
__________________
* Sources (updated: 21.11.2012.
Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

Last edited by effpeetee; 12-28-2007 at 10:40 PM..
effpeetee is offline   Reply With Quote
Old 12-28-2007, 11:16 PM   PM User | #5
Apostropartheid
The Apostate


 
Apostropartheid's Avatar
 
Join Date: Oct 2007
Posts: 3,215
Thanks: 16
Thanked 265 Times in 263 Posts
Apostropartheid is on a distinguished road
Although IDs would be more appropriate than classes.
__________________
Blog | Twitter
Useful links: W3C HTML Validator | W3C CSS Validator | HTML 5 Guide
CF: HTML & CSS Resources/Tutorials Thread | HTML & CSS Posting Rules and Guidelines
Remember: no link, no code, no help!
Apostropartheid is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:53 AM.


Advertisement
Log in to turn off these ads.