...

View Full Version : simple css: how to make all the text white



arne2
05-18-2007, 05:56 PM
Hi, this is the content of my css:


listing, .listing_body, .listing_head, .listing_head h2{ background-color: #C80000; color: #ffffff; }
.listing, .listing_alt{width:511px; padding-right:4px; margin:8px auto;}
.listing_body, .listing_alt .listing_body{background-position: bottom left; margin-right:8px; padding:12px 0 4px 12px; color: #ffffff;}
.listing_head, .listing_alt .listing_head{background-position:top right; margin-right:-4px; padding-right:12px; color: #ffffff;}
.listing_head h2, .listing_alt .listing_head h2{background-position:top left; margin:0; border:0; padding:12px 0 0px 12px; height:auto !important; height:1%; font-size:.95em; font-weight:bold;}
.listing_head h2 a{color:#ffffff;}
.listing_body .amenities{width:auto !important; width:390px; padding:0 0 0 4px; margin:0 0 .75em 94px !important; margin:0 0 .75em 0; font-size:.85em; color:#748566; font-weight:bold;}
.listing_body .shadow{width:90px; float:left;}
.listing_body .description {
color: #ffffff;
width: auto !important;
width: 390px;
padding: 0;
margin: 0 0 0 94px !important;
margin: 0;
font-weight: normal;
font-size: 1em;
}
.listing_body .description p{margin:0; padding:0 0 0 4px;}
.listing_body .action_link{padding:0 0 9px 0; float:right;}
.listing_body .favlink{margin-top:5px;}





What i want to do is make all the text in those elements white. How can i do that?
Thank you

BonRouge
05-18-2007, 06:05 PM
body {
color:#fff;
}

Or for those you have there:
.listing, .listing_body, .listing_head, .listing_head h2, .listing_alt {
color:#fff;
}

arne2
05-18-2007, 07:03 PM
that's not working :(

Arbitrator
05-18-2007, 07:20 PM
Add color: white to the relevant style rules. It is possible to target every element in a document at once, although I suspect that this is not what you want. Example:


* { color: white !important; }

BonRouge
05-18-2007, 07:42 PM
You might want to post a link to your page...

bustamelon
05-18-2007, 07:48 PM
I might be wrong, but I seem to remember reading that you cannot use underscores (_) in your class or ID selectors. Try removing them or replacing them with hyphens.

Also, in addition to the body, you might have to also specify link colors:


a:link, a:visited, a:active, a:hover { color: #fff }

or maybe you want hover to be a different color:


a:hover { color: #00 }

BonRouge
05-18-2007, 07:53 PM
I might be wrong, but I seem to remember reading that you cannot use underscores (_) in your class or ID selectors.
No, that's not true.



a:link, a:visited, a:active, a:hover { color: #fff }

Good point. That might be the problem. We haven't actually seen any html, so it's not easy to say.

bustamelon
05-18-2007, 08:00 PM
No, that's not true.

Upon further reading, it looks like that WAS true in CSS1. Of course that's a long time ago, but until IE7 came out, we really had to follow css1 rules with respect to IE. So unless you're willing to alienate users with old browsers (I have been known to do so myself), underscores should be avoided.

Here's an article (http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/) backing that up, though it is six years old:

BonRouge
05-19-2007, 03:02 AM
Support realities

Between mistakes in implementation and changes to the specification, browser behavior with regard to underscores is rather convoluted.

* Netscape 6.x permits underscores and escaped underscores.
* Navigator 4.x honored the restriction against underscores, and so any class or ID name with an underscore will be ignored by Navigator 4.x, so the associated styles will never be applied. It also ignored escaped underscores.
* Internet Explorer 4.x and 5.x for Windows erroneously allowed underscores, and so were both non-conformant on this point until the errata was published. The same is true of IE4.x and 5.x for Macintosh.
* Internet Explorer 6 for Windows, published after the errata, permits underscores and escaped underscores.
* Opera 3.x through 5.x does not recognize underscores or escaped underscores, and so acts the same as Navigator 4.x in this regard.

According to that, the only problems you might have are with Netscape 4 and Opera 5. I think most people will be more than happy not worrying about them.

Don't worry about underscores. They're fine. (Apart from at the start of a class or id - you can't use them there).

CoNt3MpT
05-19-2007, 04:05 AM
shouldn't it be possible to achieve the goal of all text white by removing every instance of "color: #XXX;" throughout your CSS and have:

body { color: #fff;}

to achieve all text to be colored as such.

ED: if one gets distracted and alt-tabs to do some coding and reply to emails, i should re-read other's replies before writing that post :P sorry BonRouge, reread your response after posting.

The only way it wouldn't work is if there's 'color' settings throughout your xhtml, such as with font tags or header styling.

arne2
05-19-2007, 10:32 AM
I know that i have to specify the a: color things because there are links that have to be white, but normal text in those divs are still not shown in white, while they don't have a link, so i don't understand.

Here is the corresponding html:

<div id="main">
<div class="listing_alt">
<div class="listing_head">
<h2 class="clear_link">
<a href="/browse.php?act=details&id=1">&euro;1 - Townhouse in Cadiz / Costa de la Luz;
</a>
</h2>
</div>
<div class="listing_body">
<span class="shadow">
<a href="/browse.php?act=details&id=1"><img alt="1_thumb" class="thumbnail" height="60" src="$tumburl" width="80" /></a>
</span>
<h3 class="description">
<p>
This is the previewdescription
</p>
</h3>
<br class="clear" />

<div class="w49 action_link">
<a href="/browse.php?act=details&id=1">View</a>
</div>
<br class="clear double" />
</div>
</div>


</div>

And, to be clear, the css i'm currently using and that's not working:

listing, .listing_body, .listing_head, .listing_head h2{ background-color: #C80000;}
.listing, .listing_body, .listing_head, .listing_head h2, .listing_alt {
color:#fff;
}
.listing, .listing_alt{width:511px; padding-right:4px; margin:8px auto;}
.listing_body, .listing_alt .listing_body{background-position: bottom left; margin-right:8px; padding:12px 0 4px 12px; color: #ffffff;}
.listing_head, .listing_alt .listing_head{background-position:top right; margin-right:-4px; padding-right:12px; color: #ffffff;}
.listing_head h2, .listing_alt .listing_head h2{background-position:top left; margin:0; border:0; padding:12px 0 0px 12px; height:auto !important; height:1%; font-size:.95em; font-weight:bold;}
.listing_head h2 a{color:#ffffff;}
.listing_body .amenities{width:auto !important; width:390px; padding:0 0 0 4px; margin:0 0 .75em 94px !important; margin:0 0 .75em 0; font-size:.85em; color:#748566; font-weight:bold;}
.listing_body .shadow{width:90px; float:left;}
.listing_body .description {
color: #ffffff;
width: auto !important;
width: 390px;
padding: 0;
margin: 0 0 0 94px !important;
margin: 0;
font-weight: normal;
font-size: 1em;
}
.listing_body .description p{margin:0; padding:0 0 0 4px;}
.listing_body .action_link{padding:0 0 9px 0; float:right;}
.listing_body .favlink{margin-top:5px;}

_Aerospace_Eng_
05-19-2007, 11:00 AM
The only text in there is here

<h3 class="description">
<p>
This is the previewdescription
</p>
</h3>
According to your stylesheet it should be white. If this is not the case then you need to show us a link to your page because I have a feeling that you think you know what you have to show us but something else is causing the problem. Help us help you. Don't make this harder than it has to be.

arne2
05-19-2007, 01:20 PM
Ok, here's the full php code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>My page</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link rel="stylesheet" type="text/css" href="browse.css">
</head>

<body>

<div id="wrap">
<div id="header">
<?php include("PHP_includes/banner_ads.htm");?>
</div>
<div id="leftcol">
<div id="nav">
<?php include("PHP_includes/navigation.htm");?>

</div>
</div>
<div id="rightcol">
<?php include("PHP_includes/googleads.htm");?>
</div>
<div id="main">
<?//First we make a connection with the database
include("PHP_includes/connect.php");
//Look what action is requested
$action=$_GET['act'];

//If no action is specified, load a browsing page
if(empty($action)){
$sql="Select property_id,previewdescription,type,province,price From tblproperty ORDER BY dateadded DESC LIMIT 0,10";
$query=mysql_query($sql);
while($obj = mysql_fetch_object($query)){ //FETCH A RESULT AND PRINT ALL BELOW (PER RESULT)

//SPECIFYING VALUES
$id=$obj->property_id;
$description=$obj->previewdescription;
$type=$obj->type;
$province=$obj->province;
$price=$obj->price;
//END SPECIFYING

print'<div class="listing_alt">
<div class="listing_head">
<h2 class="clear_link">
<a href="/browse.php?act=details&id='.$id.'">&euro;'.$price.' - '.$type.' in '.$province.';
</a>
</h2>
</div>
<div class="listing_body">
<span class="shadow">
<a href="/browse.php?act=details&id='.$id.'"><img alt="1_thumb" class="thumbnail" height="60" src="$tumburl" width="80" /></a>
</span>
<h3 class="description">
<p>
'.$description.'
</p>
</h3>
<br class="clear" />

<div class="w49 action_link">
<a href="/browse.php?act=details&id='.$id.'">View</a>
</div>
<br class="clear double" />
</div>
</div>
';

} // END WHILE LOOP
}elseif($action=='details'){
echo"UNDER CONSTRUCTION";
}

?>


</div>
<div id="footer">
<?php include("PHP_includes/footer.htm");?>

</div>
</div>

</body>

</html>

and you already received the full browse.css page above twice

BonRouge
05-19-2007, 04:39 PM
Can you post a link to the page. Failing that, can you post the full css?

arne2
05-19-2007, 04:45 PM
Never mind:) I'll code it another way then

bustamelon
05-19-2007, 05:25 PM
there are TWO css files being called in that html, now that we're finally seeing the whole of the markup. I'd imagine the problem's in there, but a link to the page would sure help.

koyama
05-19-2007, 05:30 PM
I am not sure what you are trying to achieve, but the only text that I see on that page that is not white are the blue links in the center column.

The reason why they are not white is because of the browsers built-in style sheet. Usually it is declaring that the links should be blue.

To override the browser style sheet for the links you need to explicitly target those anchor elements with your own styles. It is not enough to target an element that is parent to the anchor element.

If you want all links on your whole page to be white, bustamelon's suggestion will work.


a { color: white; }

If you only want links within .listing_body to be white (which I think is what you are trying), this will do it:


.listing_body a { color: white; }

Note that this would not work because it does not target the links:


.listing_body { color: white; } /* does not target links */

If you want both ordinary text and links within .listing_body to be white, you will need this:


.listing_body, .listing_body a { color: white; }

Link removed while this was being typed

arne2
05-19-2007, 08:16 PM
There was also other text, but you couldn't see it as it had the same color as the red background. Thanks anyway, i'll solve it differently.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum