Welcome to WebmasterWorld Guest from 107.21.163.40

Forum Moderators: not2easy

Message Too Old, No Replies

Are conditional statements allowed in CSS

Or am I barking up the wrong tree?

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

Junior Member

10+ Year Member

joined:Dec 23, 2002
posts:109
votes: 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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 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;
}

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

Junior Member

10+ Year Member

joined:Dec 23, 2002
posts:109
votes: 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

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

Preferred Member

10+ Year Member

joined:Apr 25, 2002
posts:470
votes: 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.

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

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 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!

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

Preferred Member

10+ Year Member

joined:Apr 25, 2002
posts:470
votes: 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.