Color bar in the centre? - CSS problem - NOW RESOLVED. [Archive]

effpeetee

Aug 13th, 2007, 10:13 AM

I am trying to alter the "centre" div to produce white text and have added the line - "text-color: white;" but it hasn't worked. :confused:

(This is just a 'learning' piece of code at the moment.)

Any help please.:D

Frank

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>

<div class="header">Header - My title will go up here.</div>
<div class="centre">Centreposition - This is the centre of the page.</div>
<div class="footer">Footer - This is the footer.</div>

</body>
</html>

body {
padding: 20px;
background-color: black;
}

div.header {
position: relative;
height: 100px;
width: 900px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: cyan;
}

div.centre {
position: relative;
height: 400px;
width: 900px;
text-align: center;
text-color: white;
margin-left: auto;
margin-right: auto;
background-color: green;
}

div.footer {
position: relative;
height: 100px;
width: 900px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: white;
}

abduraooft

Aug 13th, 2007, 10:52 AM

It's not text-color, instead use color.
color:white;

effpeetee

Aug 13th, 2007, 10:59 AM

It's not text-color, instead use color.
color:white;
Works fine, thank you.
When does one use - text-color:whatever ?

Frank

VIPStephan

Aug 13th, 2007, 11:03 AM

There is no such property called “text-color”. It’s called color and nothing else.

abduraooft

Aug 13th, 2007, 11:05 AM

I believe there is no property named text-color.

Well, it's always useful to keep
http://www.w3schools.com/css/css_reference.asp
opened in one of your browser tab:thumbsup:

effpeetee

Aug 13th, 2007, 11:20 AM

I always have that URL open in my spare browser.
I think I was getting confused with Font color.
Thank you and my other mentor VIPStephan.

I'll get there some day. (With your help of course.)

Frank

I haven't lost my mind! It's backed up on disk somewhere.

effpeetee

Aug 13th, 2007, 11:40 AM

Now that the text problems are solved. I have another problem.
Using the following CSS, the header abd footer do not centre,

All I have altered is the width of the header and the footer.

Frank:confused:

body {
padding: 20px;
background-color: black;
}

div.header {
position: relative;
height: 100px;
width: 350px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: cyan;
}

div.centre {
position: relative;
height: 400px;
width: 1000px;
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
background-color: green;
}

div.footer {
position: relative;
height: 100px;
width: 350px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: white;
}

effpeetee

Aug 13th, 2007, 12:07 PM

It works if I add this, (in red) to the HTML

Frank

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<center>
<div class="header">Header - My title will go up here.</div>
<div class="centre">Centreposition - This is the centre of the page.</div>
<div class="footer">Footer - This is the footer.</div>
</center>
</body>
</html>

VIPStephan

Aug 13th, 2007, 12:25 PM

Please don’t fall back into old customs. The <center> element is deprecated and shouldn’t be used anymore. CSS is doing all that now and your CSS is OK. In which browser were you viewing it? I suspect you used IE…

How do I know? Only IE is going nuts when it is in quirks mode. And it is in quirks mode because you don’t use a complete doctype (with URL). And please note: strict is the only option. You aren’t transitioning from old, non-standard code to new code so there’s no reason to use a transitional doctype.

http://www.alistapart.com/articles/doctype/

effpeetee

Aug 13th, 2007, 12:31 PM

Please don’t fall back into old customs. The <center> element is deprecated and shouldn’t be used anymore. CSS is doing all that now and your CSS is OK. In which browser were you viewing it? I suspect you used IE…

How do I know? Only IE is going nuts when it is in quirks mode. And it is in quirks mode because you don’t use a complete doctype (with URL). And please note: strict is the only option. You aren’t transitioning from old, non-standard code to new code so there’s no reason to use a transitional doctype.

http://www.alistapart.com/articles/doctype/

Now looks like and works fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>

<div class="header">Header - My title will go up here.</div>
<div class="centre">Centreposition - This is the centre of the page.</div>
<div class="footer">Footer - This is the footer.</div>

</body>
</html>
Thanks VIP,

I downloaded this originally from an instruction site. I didn't bother to look at the Doctype.

"Eyes Front, Taylor!"

That'll teach me.

Thanks again.

Frank