Question in regards to a defining a css class

03-27-2006

I am trying to get my webpage fully dependant on the CSS for layout. I
have several pages on my site. Here is the layout:

1. The site uses the same heading/paragraph structure and physical
layout styles;
2. Each group of similar pages (e.g. picture galleries) has the same
icons in a different color pallate.
3. The backgrounds are all laid out with an inline style in the head of
each page like this:

<style type="text/css">

</style>

My question is this, is it permissable to define a class in the css for
the individual page groupings.

My idea would be this (in the css):

body {font-family:"lucida sans unicode","arial","helvetica",sans-serif;
font-style:normal;
font-weight:normal;
font-size:small;
background-attachment: fixed }

body.red { background-image: url("backgrounds/redrey.jpg")}
body.orange { background-image: url("backgrounds/redrey.jpg")}
body.yellow { background-image: url("backgrounds/redrey.jpg")}
body.green { background-image: url("backgrounds/redrey.jpg")}
body.blue { background-image: url("backgrounds/redrey.jpg")}

etc...

Thanks,
Jeremy

03-27-2006

BK wrote:

> I am trying to get my webpage fully dependant on the CSS for layout. I
> have several pages on my site. Here is the layout:
>
> 1. The site uses the same heading/paragraph structure and physical
> layout styles;
> 2. Each group of similar pages (e.g. picture galleries) has the same
> icons in a different color pallate.
> 3. The backgrounds are all laid out with an inline style in the head of
> each page like this:
>
> <style type="text/css">
> 
> </style>
>
> My question is this, is it permissable to define a class in the css for
> the individual page groupings.

Absolutely. However you might want to take it a step further, and set up a
base.css file with all the common and default setting you want to use, as
well as a red.css, orange.css, yellow.css, and so forth.

Then in your pages, you load the base.css first followed by the relevant
colour.css file for the page.

I think that would be easier to maintain in the long run - unless there are
only a couple of things that change in each category.

<snip>

> Thanks,
> Jeremy

You are welcome

Carolyn
--
Carolyn Marenger

03-27-2006

While the city slept, BK () feverishly typed...

> I am trying to get my webpage fully dependant on the CSS for layout. I
> have several pages on my site. Here is the layout:
[...]
> 3. The backgrounds are all laid out with an inline style in the head
> of each page like this:
>
> <style type="text/css">
> 
> </style>

Get rid of this... keep it in your css file.

> My question is this, is it permissable to define a class in the css
> for the individual page groupings.
>
[...]
> body.red { background-image: url("backgrounds/redrey.jpg")}
[...]

Yes. You can define a background for each section of your site as such. In
the HTML for each such page, use <body class="red"> (etc)

I would, however, not recommend using terms such as "red", "green", "blue"
to define your pages. What happens when you decide that the contact page
should be yellow instead of orange? And the Links page should be blue
instead of yellow??? You are entering a "World Of Pain[tm]" by defining your
css code by presentation. Instead, define them by section as follows;

body.links {
background-image: url("backgrounds/bluegrey.jpg");
}

body.contact {
background-image: url("backgrounds/yellowgrey.jpg");
}

Hope that helps,
Nige

--
Nigel Moss http://www.nigenet.org.uk
Mail address will bounce. | Take the DOG. out!
"Your mother ate my dog!", "Not all of him!"

03-28-2006

Gazing into my crystal ball I observed "nice.guy.nige"
<> writing in
news:44287230$0$16470$ reenews.net:

>> My question is this, is it permissable to define a class in the css
>> for the individual page groupings.
>>
> [...]
>> body.red { background-image: url("backgrounds/redrey.jpg")}
> [...]
>
> Yes. You can define a background for each section of your site as such.
> In the HTML for each such page, use <body class="red"> (etc)
>
> I would, however, not recommend using terms such as "red", "green",
> "blue" to define your pages. What happens when you decide that the
> contact page should be yellow instead of orange? And the Links page
> should be blue instead of yellow??? You are entering a "World Of
> Pain[tm]" by defining your css code by presentation. Instead, define
> them by section as follows;
>
> body.links {
> background-image: url("backgrounds/bluegrey.jpg");
> }
>
> body.contact {
> background-image: url("backgrounds/yellowgrey.jpg");
> }
>

I think in this instance, using a color name is probably just the ticket.
A site I am developing uses liturgical colors: white, red, violet, rose,
and green. I have a main stylesheet that has the non-color properties,
size, font, position, etc., and then the color stylesheets depending on the
day's liturgical color. If the liturical color of the day is violet, then
the violet stylesheet is applied that uses various shades of purple.

--
Adrienne Boswell
Please respond to the group so others can share

03-28-2006

In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>, Adrienne Boswell
wrote:
> I think in this instance, using a color name is probably just the ticket.
> A site I am developing uses liturgical colors:

Though, to be fair, your site is using these colours for their (symbolic)
*content*, it's not just a presentation issue, which is what NGN was talking
about.

Regards
Mark

03-28-2006

"nice.guy.nige" <> wrote in message
news:44287230$0$16470$ reenews.net...
> While the city slept, BK () feverishly typed...

Actually I was feverently typing whilst slacking off from slinging Whoppers
at work (the "BK" in "BK"). Thanks for the help guys. I tried using the body
class for one of the new pages on my site yesterday and it did not properly
configure the background. Have I got this right?

Thanks again,
Jeremy

Here is the css:
http://jerem43.home.att.net/saab.css

Here is a sniplet of the code I had:

<!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>
Jeremy's Saab Site- The Guestbook.
</title>



<link rel="stylesheet" type="text/css" media="screen" href="saab.css" />
<meta http-equiv="content-script-type" content="text/javascript" />



<base href="http://jerem43.home.att.net" />
<meta name="Jeremy Brown" content="Jeremy's Saab Page- The Guestbook"/>

</head>

<body class="pgwhite">
Content followed

03-28-2006

While the city slept, Usenet () feverishly typed...

[...]

> what NGN was talking about.

Ooh! I've become a TLA!!! A high honour indeed...

Cheers,
Nige

--
Nigel Moss http://www.nigenet.org.uk
Mail address will bounce. | Take the DOG. out!
"Your mother ate my dog!", "Not all of him!"

03-28-2006

In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
Adrienne Boswell <> wrote:

> A site I am developing uses liturgical colors: white, red, violet, rose,
> and green. I have a main stylesheet that has the non-color properties,
> size, font, position, etc., and then the color stylesheets depending on the
> day's liturgical color. If the liturical color of the day is violet, then
> the violet stylesheet is applied that uses various shades of purple.

This sounds very sensible, you won't mind if I utilise this idea?
It is a neat way to present drafts for website customers to show
them alternative colour schemes.

--
dorayme

03-29-2006

Gazing into my crystal ball I observed dorayme
<> writing in
news:doraymeRidThis-:

> In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
> Adrienne Boswell <> wrote:
>
>> A site I am developing uses liturgical colors: white, red, violet,
>> rose, and green. I have a main stylesheet that has the non-color
>> properties, size, font, position, etc., and then the color stylesheets
>> depending on the day's liturgical color. If the liturical color of
>> the day is violet, then the violet stylesheet is applied that uses
>> various shades of purple.
>
> This sounds very sensible, you won't mind if I utilise this idea?
> It is a neat way to present drafts for website customers to show
> them alternative colour schemes.
>

I would be honored. Here's what I do (ASP example)

<link rel="stylesheet" href="style.css" type="text/css" title="Main
Stylesheet">
<% dim sheet
if session("sheet") = "" then
if request.querystring("color") <> "" then
sheet = request.querystring("color")
session("sheet") = sheet
else
sheet = "green" 'default color
end if
else
sheet = session("sheet")
end if
%>
<link rel="stylesheet" href="<%=sheet%>.css" type="text/css" title="<%
=sheet%>">

Then further on the page somewhere in an include
<ul>
<li><a href="<%=request.servervariables("script_name")%>? color=red">Red</a>
</li>

--
Adrienne Boswell
Please respond to the group so others can share
http://www.cavalcade-of-coding.info

03-29-2006

In article <Xns9794A67B3EBA4arbpenyahoocom@69.28.186.121>,
Adrienne Boswell <> wrote:

> Gazing into my crystal ball I observed dorayme
> <> writing in
> news:doraymeRidThis-:
>
> > In article <Xns9793EF47C3DDCarbpenyahoocom@69.28.186.121>,
> > Adrienne Boswell <> wrote:
> >
> >> A site I am developing uses liturgical colors: white, red, violet,
> >> rose, and green. I have a main stylesheet that has the non-color
> >> properties, size, font, position, etc., and then the color stylesheets
> >> depending on the day's liturgical color. If the liturical color of
> >> the day is violet, then the violet stylesheet is applied that uses
> >> various shades of purple.
> >
> > This sounds very sensible, you won't mind if I utilise this idea?
> > It is a neat way to present drafts for website customers to show
> > them alternative colour schemes.
> >
>
> I would be honored. Here's what I do (ASP example)
>
> <link rel="stylesheet" href="style.css" type="text/css" title="Main
> Stylesheet">
> <% dim sheet
> if session("sheet") = "" then
> if request.querystring("color") <> "" then
> sheet = request.querystring("color")
> session("sheet") = sheet
> else
> sheet = "green" 'default color
> end if
> else
> sheet = session("sheet")
> end if
> %>
> <link rel="stylesheet" href="<%=sheet%>.css" type="text/css" title="<%
> =sheet%>">
>
> Then further on the page somewhere in an include
> <ul>
> <li><a href="<%=request.servervariables("script_name")%>? color=red">Red</a>
> </li>

Well, impressive, I will keep this in mind. I use far lower tech
and humbler approach for everything (because of my faults,
recently on full display at alt.html, I need to be especially
humble before God...)

With the client next to me I have a whole lot of stylesheet links
and turn them on and off with simple  or move them up
and down in the head list. They can be enormously impressed by
this geeky flourish of diving into what is for them
incomprehensible source and making a spectacular change to the
website.

When providing links to drafts I just send a few links to the
different versions. http://www.blueVersion.html and
http://www.crimsonVersion.html etc.

When I next have such a client, and if he or she agrees to throw
me a few shekels, I will pay you with another tale for your
pastor.

--
dorayme

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Question with regards to VS.NET2005 IDE and ASP.NET 2.0	A.M-SG	ASP .Net	11	01-15-2006 05:59 PM
Revelation of the day with regards to MS certification value [commentary]		MCSE	6	06-17-2005 05:44 PM
2 part question in regards to servlet and applets	Troy	Java	1	08-10-2004 12:23 AM
defining or not defining destructors	johny smith	C++	8	07-02-2004 08:51 AM
what is index.dat in regards to cookies?	Jason Shohet	ASP .Net	8	05-13-2004 09:37 PM