CSS - Multiple Class Use; Gd Practice Or To Be Avoided.

Hi Everyone,

I'm currently building a site for a client that has a 3 column layout and horizontal footer at the bottom of the page.

The client has requested the navigation column (which is running down as the far left column, (I have attached an image for clarification) has a background-color that runs down the full length of the page, from the top of the browser window until it meets the footer at the bottom of the page.

The footer needs to do the same, but expand horizontally so it stretches from the left of the browser window to the right. Additionally, if the user is on a larger screen size that creates more vertical space at the bottom of the browser window, the background-color of the footer needs to stretch down to meet the bottom of the browser window.

Currently, the website is set up so the 3 columns (including the navigation) is housed in a div tag with relative positioning, auto margins for centering and 960px width.

The site is currently in offline development so I unfortunately won't be able to share it with you at this stage. However, please see the attached image for clarification.

What I'm after is opinions on a best practice to achieve this. I have tried setting the navigation height to 100% and footer width to 100%, however it's producing undesirable results.

Any help would be greatly appreciated! Please let me know if you would like further descriptions.

The image can be found he

www . harrycourt . com /temp-images/layoutimage01.png

Edit: I forgot to mention an important point. I would prefer if this can be achieved while keeping the height of the main wrap container as auto, as opposed to a pixel value.

Thanks,

Harry

Hi team,

Ok, so I'm biting the web2.0* buzzword bullet, and decided I want a tag cloud & I'm wondering what's the best (standards compliant, portable, etc ) way to handle this in css?

The main issue I'm having is how to handle the random positioning of the tags in the cloud? Any ideas on the semantics of these tags - are disconnected href's ok, or should I be wrapping them in p's or something?

Another question - is there a more elegant way of handling different sizes without having one style for each size?

Cheers all,
Simon
(* )

Is it more common practice to place all div's within one div as seen he


Or to have all div's independent, as shown he

Hi
I wanted to see what some of you folks do with web files as a "best practice" for testing.
I try to be as economical as possible with my css, but sometimes it seems like i have way too many styles going.
Anyway, I usually go to the W3C validator and test my files here first.
(especially if i am doing standards strict)

http://validator.w3.org/

Then I usually run it through HTML tidy to make sure i haven't made any mistakes.

Does anyone have any better ideas for checking to be sure you are doing things the best way? Or a better web production file release protocol?

Thanks in advance!
Shana

I've seen where the "primary" font and size are set in the body tag, and in various sub-tags, the size and other characteristics such as line height and color are then set. As to size, in the case I describe, I've seen it expressed as a percentage. Is this how it's done, "best practice"? I've seen it on a number of high-profile sites, specifically the NYT site.

Example:
Code:

body {
font-family: Georgia, Times, serif;
font-size: 12pt;
}
#main {
font-size: 80%;
color: #330;
line-height: 1.5em;
}

I heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes?

many thanks.

dan

hey,

I got a table, every <td> in the table got the css class .regular.
(<td class='regular'>).
When the user moves their mouse over a row, that row should change color. This works with the following code:
<tr onmouseover='this.className=\"hoverRow\"'>
However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this.

How can i overwrite the class of the td's by the class for the whole row?

thanks in advance

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.

I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated!

Code:

HTML Code

<div class="menu">
    <ul>
        <li><a href="#" class="search"></a></li>
        <li><a href="#" class="battery"></a></li>
        <li><a href="#" class="cart"></a></li>
        <li><a href="#" class="contact"></a></li>
    </ul>
</div>

CSS

.search, .contact, .cart, .battery
{
    width:100px;
    height:30px;
    margin-left:-1px;
    display:block;
}

.search
{
    background-image:url(Images/search.png);
}
.contact
{
    background-image:url(Images/contact.png);
}
.cart
{
    background-image:url(Images/cart.png);
}
.battery
{
    background-image:url(Images/battery.png);
}

ul li a.search:hover
{
    background-position:0px 60px;
}


ul li a.search:hover ul li a[class=battery]
{
    background-position:0px 60px;
}

I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width?

Example:

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...

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.

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.

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!