4 Replies - 3211 Views - Last Post: 09 October 2007 - 11:44 AM

#1 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

CSS conditional?

Posted 09 October 2007 - 08:35 AM

I need the bg img to a wrapper be different on certain pages, is there a way you can write conditional statements in CSS like
pesudo
if url=about.html
then background-image = about.jpg
else if url=solutions.html
then background-image = soultions.jog

and so on?
Is This A Good Question/Topic? 0
  • +

Replies To: CSS conditional?

#2 no2pencil  Icon User is offline

  • Admiral Fancy Pants
  • member icon

Reputation: 5388
  • View blog
  • Posts: 27,383
  • Joined: 10-May 07

Re: CSS conditional?

Posted 09 October 2007 - 08:56 AM

View Postsupersssweety, on 9 Oct, 2007 - 08:35 AM, said:

is there a way you can write conditional statements in CSS


No. You can either use server side execution to test a condition & load the correct css, or declare a specific css for each page.

/* css */
about {
  background-image = about.jpg;
}
solutions{
  background-image = solutions.jpg;
}
/* php code */
if($_SERVER['REQUEST_URI']="about.html") { echo "class=about "; }
else  { echo "class=solutions "; }


This post has been edited by no2pencil: 09 October 2007 - 09:09 AM

Was This Post Helpful? 0
  • +
  • -

#3 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: CSS conditional?

Posted 09 October 2007 - 09:05 AM

BAH!
Was This Post Helpful? 0
  • +
  • -

#4 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: CSS conditional?

Posted 09 October 2007 - 11:33 AM

ok so here is what I did:

#secondary-wrapper{
	background-color:#fff;
	background-position:top;
	background-repeat:no-repeat;
	background-color:#e6e7e9;
	border:1px solid #717073;
	width:1023px;
	margin:0 auto;	
}
#secondary-wrapper.solutions{
 background-image:url(images/solutions-bg.jpg);
}
#secondary-wrapper.company{
 background-image:url(images/company-bg.jpg);
}
#secondary-wrapper.contact{
 background-image:url(images/contact-bg.jpg);
}
#secondary-wrapper.news{
 background-image:url(images/news-bg.jpg);
}
#secondary-wrapper.benefits{
 background-image:url(images/benefits-bg.jpg);
}
#secondary-wrapper.partner{
 background-image:url(images/partner-bg.jpg);
}
#secondary-wrapper.service{
 background-image:url(images/service-bg.jpg);
}


Internet explorer will only show the one that is stated first, in this case, .solutions, that bg shows, but the company one doesn't, they all show in FF. If I switch company and solutions then IE shows the company bg and not the solutions...wtf...here is how the html looks:

<div id="secondary-wrapper" class="solutions">


<div id="secondary-wrapper" class="company">


Was This Post Helpful? 0
  • +
  • -

#5 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Re: CSS conditional?

Posted 09 October 2007 - 11:44 AM

I got it working like this:
#secondary-wrapper{
	background-color:#e6e7e9;
	border:1px solid #717073;
	width:1023px;
	margin:0 auto;	
}
.solutions{
  background-image:url(images/solutions-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.company{
  background-image:url(images/company-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.contact{
  background-image:url(images/contact-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.news{
  background-image:url(images/news-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.benefits{
  background-image:url(images/benefits-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.partner{
  background-image:url(images/partner-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}
.service{
  background-image:url(images/service-bg.jpg);
  background-position:top;
  background-repeat:no-repeat;
}


With the html as the same ...I hate CSS


View Postno2pencil, on 9 Oct, 2007 - 08:56 AM, said:

View Postsupersssweety, on 9 Oct, 2007 - 08:35 AM, said:

is there a way you can write conditional statements in CSS


No. You can either use server side execution to test a condition & load the correct css, or declare a specific css for each page.

/* css */
about {
  background-image = about.jpg;
}
solutions{
  background-image = solutions.jpg;
}
/* php code */
if($_SERVER['REQUEST_URI']="about.html") { echo "class=about "; }
else  { echo "class=solutions "; }


I just noticed your code, its good but it wouldn't work because the pic for company.html goes to all the company sublinks...so that is 4 more pages the company pic will be on...see?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1