Are conditional statements allowed in CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Are conditional statements allowed in CSS

Or am I barking up the wrong tree?

Spook

7:57 am on Apr 5, 2003 (gmt 0)

Hello All.

I am building my first web site using an entirely CSS based layout.

Index [and several other] page[s] take the format: Banner,Left/centre/right columns, footer.

However, some pages do not need a three column layout and I want to remove the extreme right column from those pages only. With the right column removed from the HTML of those pages, I am now left with a centre column which does not extend to the right side of the page because the position of the right hand edge of the centre column is determined by padding.

Brief code as follows:

#center {
background-color : transparent;
padding : 140px 220px 35px 160px;
margin: 0;
}

#centercontent{
font-size: 80%;
padding: 5px;
border : 1px solid black;
}

My question is this: Is there a way to control the right padding using a "conditional" statement, something like - IF PRESENT "right" THEN padding-right:160 ELSE padding-right:0

Or do I have to use a different style sheet for those pages?

Many thanks.

Spook

grahamstewart

11:16 am on Apr 5, 2003 (gmt 0)

There are no conditional statements in CSS, but you can override attributes by being more specific with your selectors.

So on the pages that you don't want the right column to appear you could specify an id (or class) for the body tag, like this..


<body id="indexpage">

then in your CSS rules you can specify additional rules for #center when it appears within a #indexpage body


#center { 
 background-color : transparent; 
 padding : 140px 220px 35px 160px; 
 margin: 0; 
} 
#indexpage #center {
 padding-right: 0px;
}

Spook

4:55 pm on Apr 5, 2003 (gmt 0)

Many thanks. I can't believe I missed that.

Sometimes you just can't see the wood for the trees.

My CSS is now sorted and I am off to get MY memory upgraded!

Spook

Filipe

12:49 am on Apr 8, 2003 (gmt 0)

Heh, yeah, there are inherent CSS ways to overcome some basic problems. If you positively need to have a if-then-else statement, you can always use dynamic code to output CSS directly to the page based on certain variables.

I've had to do it once before, but usually find there are really good ways to avoid having to do this.

ricfink

2:45 am on Apr 10, 2003 (gmt 0)

thanks for asking, spook and thanks for the tip, Graham!
I've been playing around with it and I've found that it can be triggered dynamically with Javascript as well.
To use your example, if the stylesheet has the rule:

#indexpage #center {
padding-right: 0px;
}

And no element on the page has the id 'indexpage', you can assign that ID with javascript and the page will apply the rule and redraw!
To give that ID to the body element:
document.body.id = 'indexpage';

Using javascript in this way - to trigger a bunch of "hidden" rules in the style sheet - is cleaner and simpler in many instances than the javascript-only approach.

It can work with classes, too, of course.
thanks again!

Filipe

8:12 pm on Apr 10, 2003 (gmt 0)

One thin I wish they did have in CSS is variable definitions. e.g. (let's say I'm using the '$' operator to denote variables)

<style>
$color1 {#eadfbe}
$color2 {#ffffff}
$color3 {#32f49e}
BODY {background-color: $color1; color: $color3;}
TD {border: 1px solid $color2}
.nav_bar {background-color: $color2;}
</style>

Get the idea? That way it's even easier to change your entire site's style instantly. If you want to change the color scheme, you just change your standard color variables.

I don't know if other developers are like me, but I usually come up with a style guide for my sites and I usually don't use more than 10 or so colors throughout the entire site for consistency purposes. Changing the entire site in a heartbeat would be much easier with this, especially if you could define any kind of variable this way.