CSS - Change Another Class When Hovered Over A Second Class

Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine.

The page is http://holiday.mrpunkin.com/about.php

My classes are as follows: they all modify the "mid" div as you can see:

Code:

#mid.about {background: transparent url("/img/headers/mid_about.gif");}

#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}

#mid.food {background: transparent url("/img/headers/mid_food.gif");}

#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}

#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}

#mid.health {background: transparent url("/img/headers/mid_health.gif");}

#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}

#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}

#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}

#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}

Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks.

I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen:

i have a bunch of headings along the top of a page that a person can click on.

Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet)

tanks, matt.

any recommendations on a way to make my h2 text change opacity when the containing div is hovered?

Better explanation:

I have an accordion style page with click-able divs that contain the title of that div in a h2 tag. The div is much larger than the text in the h2 tag.
I am able to make the text itself change opacity when it its hovered but I would like the text to change when the div is hovered.

I do not want to make the div itself change opacity because it overlaps the div behind it.

(I understand that I need have to add some filters and such, I am not worried about that at this point)

html code:
Code:

<div class="previous_tab">
          <a href="movement.html" class="clickable_tab">
              <h2>The Movement</h2>
          </a>
</div>

css code:
Code:

.previous_tab
      {
	width:100px;
	height:500px;
	margin-left:-5px;
	background-color: #CCCCCC;
     {

.clickable_tab
     {
	display:block;
	width:100px;
	height:500px;
	text-decoration: none;	
     }

h2
     {
	opacity:.6;
	font-size: 1em;
	color: #333333;   
     }

h2:hover
     {
	opacity:1;
     }

Sorry for the lousy title, can't come up with better wording....

What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one.

Thanks...

hii

plz tell me
how can i change my td css class,when i click on tht
particular td.
what will be the syantax plz reply by mail or post .

The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header"
and divs also class.

thank you in advance

I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class.

#nav {
padding: 0;
clear: both;
}
body.main #nav, body.blogger #nav {
float:right;
width: 220px;
\width: 250px;
w\idth: 220px;
margin: 10px 10px 0 0;
padding: 0;
}
body.second #nav {
float:left;
width: 200px;
\width: 210px;
w\idth: 200px;
padding:0 0 20px;
margin: 0;
}
body.second #nav img {
padding-bottom: 10px;
}
#nav a { color: #006; }
body.second #nav ul {
list-style: none;
padding: 0 0 0 5px;
margin: 0;
}
body.second #nav ul li {
margin: 0 0 7px 0;
font-size: 11px;
}
body.second #nav ul li ul li { margin: 0 0 5px 15px; }
.skip { display:none; }
/* end #nav */

#content p, #nav p {
padding: 0;
margin-top: 0;
margin-bottom: 10px;
line-height: 140%;
}
#content li, #content ol {
margin-top: 0;
line-height: 140%;
}
code, pre { font-family:"Courier New", Courier, mono, monospace; }

/* definition lists, all that and a bag of chips! */
#content dl {
margin:0px;
padding:0;
}
#content dt { font-weight: bold; }
#content dd {
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding: 0 5px 0 0;
}
/* end definition list*/

Any help is appreciated.

In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text".

Any info or links to pages with info on this matter would be greatly appreciated!

So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc.

The main thing here is that I'm thinking the specifics will be placed inside an ID like so:

Code:

#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}

And then to handle the float I'd use a class like so:
Code:

.floatRight{float:right;}
.floatLeft{float:left;}

Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example:

Code:

	<div id="templateBlueBox" class="floatRight">
		<h2>Six free lessons</h2>
		<p>These free Lessons are great to read online or print out and carry with you.</p>
					</div>
					
	<div id="templateGreenBox" class="floatRight">
		<h2>New Features</h2>
	        <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p>
					</div>
				
	<div id="templateOrangeBox" class="floatRight">
		<h2>Sign up for email updates</h2>
		<p>So we can let you know when you can subscribe to get it every week.</p>
	</div>
					
	<div id="templatePinkBox" class="floatleft">
			<h2>Send us feedback</h2>
			<p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p>
			</div>
					
	<div id="templateBlueBox" class="floatLeft">
		<h2>Submit photos</h2>
		<p>
		You can be part it..</p>
	</div>

So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this?

I am new to CSS and confused about when to use id # and when to use class .

Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something

Thanks!

Problem solved.

When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour?

Which is better to use id (#) in CSS or to use class (.) ??

does it affect website rank?

Trying to migrate vbulletin software to xhtml 1.1 using CSS and I have run into a bit of a problem.

It was my understanding that a class can have the same name as another class but behave differently if the parent classes are different.

For example:

table.main .bigWrap .color {
color: blue;
}

Would be different than:

table.sub .bigWrap .color {
color: red;
}

I assumed that .color's parents dictate it's behaviour so main tables and sub tables will display different colors. Is this indeed the case or am I off base?

Hi all.

Code from the php file:
PHP Code:
<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<p class="browsing">You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives.</p>
<?php } ?>



Page is at http://www.bartlett-family.net/chri...tt/blog2/?cat=1

You can see on the right where the text is right below the blog search.

Why is the text not formatted to the left?
CSS code:
Code:

.browsing {
	text-align: left;
}

Simple enough. I've put in other CSS attributes just to test. Absurd things like font-family: Arial, Helvetica, Sans-Serif;
& font-size: 8em; just to see if I was missing something small.

Nothing, the class just isn't working. Huh?

Chris