CSS - Tricky Css Descending Selector Question

Tip of the tongue syndrome:

What is the CSS selector that affects all elements, again?

I remember it being "*" or something

I want to apply a thin border to everything on my layout so I can see where the positionings have gone.

Thanks for taking the time to read my question.

I would like to make an horizontal nav. BUT I'd like 2 different sizes of buttons. The active page has a large button, and if you mouse over another button, it gets big also. I'm not entirely sure how to accomplish this. I've attached a pic of what I'm going for, and inserted my code thus far... and thus far, it's not working that great. I can put my images in the <li>s but I also need text there, so I have to use background-image in my css.

Thanks,

Brad


CSS:
Code:

.NavContainer {
float: left;
/*background-color:#FF0000;*/
padding: 0px;
margin: 89px 0px 0px 0px;
width: 800px;
}

.NavContainer ul li {
display: inline;
}

.NavContainer ul {
padding: 0px;
margin: 0px;
}

.NavContainer ul li {
width: 133px;
height: 101px;
/*background-color:#FF00FF;*/
}

.NavContainer ul li .Active {
background-image:url(Images/ButtonLarge.jpg);
background-repeat:no-repeat;
background-position:top;

}

.NavContainer ul li .NotActive {
background-image:url(Images/ButtonSmall.jpg);
background-repeat:no-repeat;
background-position:top;

}

HTML:
Code:

	<div class="HeaderContainer">
    	<div class="NavContainer">
        	<ul>
            	<li class="Active"></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
                <li><img src="Images/ButtonSmall.jpg" alt="Home" /></li>
            </ul>
        </div>
    </div>

I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to.

I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit.

I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images.

This diagram describes what I'm trying to do:

+----------------------------------------+
|........................................|
|..Fixed height header image.............|...Content
|........................................|...text
+----------------------------------------+...to
|........................................|...overlay
|........................................|...all
|..Expanding region (solid fill color)...|...three
|........................................|...regions
|........................................|...with
+----------------------------------------+...the
|........................................|...center
|..Fixed height footer image.............|...region
|........................................|...expanding
+----------------------------------------+


This is what I'm doing in my html:

Code:

<div class="contentArea">
     <div class="contentTop"></div>
     <div class="contentStretch"></div>
     <div class="contentBottom"></div>
     <div class="main-page-content">
         My Content Here
     </div> 
</div>

This is in my style sheet:

.contentArea{
border: none;
height:auto;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


.contentTop {
background: url('../images/contentTop.jpg') no-repeat left center;
border: none;
height: 276px;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}

.main-page-content{
border: none;
line-height: 100%;
padding: 0px;
width: 515px;
height: auto;
position:relative;
left:265px;
top:-610px;
}


.contentBottom {
background: url('../images/contentBottom.jpg') no-repeat left center;
border: none;
height: 317px;
line-height: 100%;
padding: 0px;
width: 785px;
vertical-align:bottom;
}

.contentStretch {
background: url('../images/StretchPic.jpg') repeat-y left center;
border: none;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave!

I've been at this for days and I'm at the point where I need help! Any suggestions?

Ron

this is really for a counter strike source server MOTD (which lets you use HTML/CSS)

First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+)

unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions.

so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing....

Can this be done or will I just have the face the music?

I have a menu that needs to be pixel perfect.
It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far.

It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning.

eg
li#main-nav-3 a:hover{ width:83px; background position:-227px 0;}
...
<li id="main-nav-3"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...

on rollover:

...
<li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...


I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't.

Anyone else faced a similar problem?

Link to the problem page:
http:sidouglas.net/cmx/tourism/
The rollovers are : Business a nd About NZ.

FAQ what's having issues...

Hi!

I have an FAQ page that consists of a series of answer <ul>s nested under question <li>s. A little javascript shows the active answers alongside the question. The questions are supposed to align vertically with the answers and with a constant margin.

Using relatively positioned parent li's and absolutely positioned child uls is doing the trick for all but ie 6-7, which are not respecting the left:400px declaration in a predictable (to me, at least) way. The answers are floating right and left based upon the width of the question.

Any help would be greatly appreciated!

Thanks..

Is there a CSS selector that only IE5 will detect? I have my site working fine in IE6 and Firefox now and it displays legibly in IE5 but the padding is a bit off. Is there a selector I can use (such as * for IE in general) to make a change to the padding on IE5. Or should I be looking into loading separate CSS files dependent on the users browser?

I have a large data sheet with individual td IDs, numbered 1 to 49 (first 3 shown for reference).

<td id="data_cell_1">
<td id="data_cell_2">
<td id="data_cell_3">

I have been trying to apply a style to all of them (No I don't want to use a class, because they override the id's don't they? Or could I apply both a class and id to an element?)

td[rel~="data_cell_"]:hover{background: #87F0FF;}
td#[rel~="data_cell_"]:hover{background: #87F0FF;}
td[id~="data_cell_"]:hover{background: #87F0FF;}
td#[id~="data_cell_"]:hover{background: #87F0FF;}

None of those worked.

Isn't there a way to select all ID's based on partial information?

I have three INPUT elements in a row and I want to apply different formatting to the second two. I know I can use:

input+input { }

This affects all but the first of the INPUT elements, which is exactly what I want. However, this works only with NS/Mozilla, and not MSIE.

There is a way to apply CSS based on words within the value of the element, but I'm not sure how it works. For instance in the code:

<INPUT type="submit" name="Submit" value="Browse">

I think there's a way to say "apply this style if the word 'BROWSE' is present in the element", but I can't make it work. Also, I know I can apply a CLASS to the element, but I'd like to not touch the HTML and use strictly CSS if possible.

Can anybody help with this?

Thanks.

Can CSS select the first word in a Div? If so how?

Example: first word in a pharagraph.

Can someone help me with this issue? I've looked through the selector section of the CSS2.1 spec, but I can't find anything about it.

Consider the following CSS excerpt (real life example):
Code:

#attachments table td, #attachments table th {
	padding: 0 1em;
}

Lots of extraneous text in there, right? Isn't it possible to do something like this instead:
Code:

#attachments table (td, th) {
	padding: 0 1em;
}

Or at least something similar? Can anyone help poor little me with this?

Hello friends

How can i define a css rule with an ID selector for two or more different ID's for an <div> element

thanks

is there a specific order in which to put the css selectors in a style sheet, eg
a:link
a:hover
a:active
a:visited

my problem is that the hover state isn't activated for links i have already visited.

thank you

I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back.

My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS?

The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >)

Thanks for any suggestions you might have.

Mike

********* First page *******************
Code:

<div class='view view-firstview'>
  <form action="URL"  method="get" id="views-filters">
    <div>
      <table>
        <thead>
         </thead>
        <tbody>
           <tr class="odd">
             <td>
              <div class="form-item">
                 <select name="filter0" class="form-select" id="edit-filter0" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <div class="form-item">
                 <select name="filter1" class="form-select" id="edit-filter1" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <input type="submit" id="edit-submit" value="Submit"  class="form-submit" />
            </td> 
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>

******** Second Page ********************
Code:

<div class='view view-secondview'>
  <form action="URL"  method="get" id="views-filters">
    <div>
      <table>
        <thead>
         </thead>
        <tbody>
           <tr class="odd">
             <td>
              <div class="form-item">
                 <select name="filter0" class="form-select" id="edit-filter0" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <div class="form-item">
                 <select name="filter1" class="form-select" id="edit-filter1" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <input type="submit" id="edit-submit" value="Submit"  class="form-submit" />
            </td> 
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>

Hi,

I check my css file on 3wc. you will find the error messages/warnings and my css code in this link http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falicelee.no-ip.com&usermedium=all

I did some research on ID selector. I still don;t understand understand why 3wc css validator cannot recognize ID selector...
how should i correct the errors and warning?

i have already done the html validation... it is error-free and valid in html 4.0

thanks