Please review - Good CSS?

[Michael Dinowitz]

I think I've just finished the rewrite of the Fusion Authority site in CSS. Actually, it's like 95% done with a single table in the middle of the front page to go. Before I go deal with that, I wanted to know what people thought of the layout. Is it legal CSS? Does it break on some browser I'm not familiar with? What do you think?

I went for a 3 column display and treated the whole thing as blocks on a light blue background. The only thing that worries me is if the floats are wrong. In order to get each block working will with its neighbor, I used a number of floats to the left with the far right column being a right float. When I add in the 4th column, I'll be doing so by making the far right into a div and having 2 columns in the div. It 'feels' like it'll work, but I'm not 100% convinced.

As for why a 4th column, I've seen that 39%+ of my visitors are on a 1024 wide monitor or better so I might as well give them some extra content.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3042
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Michael Dinowitz]

This is what happens with no sleep, you forget to post an url with a request. :)

http://www.fusionauthority.com/_/csslayout.htm

> I think I've just finished the rewrite of the Fusion Authority site in
> CSS. Actually, it's like 95% done with a single table in the middle of
> the front page to go. Before I go deal with that, I wanted to know
> what people thought of the layout. Is it legal CSS? Does it break on
> some browser I'm not familiar with? What do you think?
>
> I went for a 3 column display and treated the whole thing as blocks on
> a light blue background. The only thing that worries me is if the
> floats are wrong. In order to get each block working will with its
> neighbor, I used a number of floats to the left with the far right
> column being a right float. When I add in the 4th column, I'll be
> doing so by making the far right into a div and having 2 columns in
> the div. It 'feels' like it'll work, but I'm not 100% convinced.
>
> As for why a 4th column, I've seen that 39%+ of my visitors are on a
> 1024 wide monitor or better so I might as well give them some extra
> content.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3043
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41

[Sandra Clark]

The CSS doesn't validate.

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http
%3A%2F%2Fwww.fusionauthority.com%2F_%2Fcsslayout.htm

Its okay code, but you shouldn't be using the inline styles.  All styles
should be in your external style sheet. Inline styles are deprecated and
they take away from the ease of changing things in your HTML without
worrying about presentation.  Content and Presentation should be separate.  

Also, way too many classes for my taste.  Put ids in your divs and descend
from there.

Example

You currently have.
div style="width: 138px; padding-top: 18px;float:right;">
<div class="shoutbox">
<a href="/quarterly" STYLE="text-decoration: none;">
<h2 class="shouthead">
Fusion Authority Quarterly Update
<img src="/_/faqu1.jpg" alt="Fusion Authority Quarterly Update image"
border="0" align="middle">
</h2>
<p class="shoutbody">
Order the Fusion Authority Quarterly Update and keep your ColdFusion skills
and knowledge up to date.
</p>
</a>
</div>

Better structure would be
<div id="rightside">
        <div class="shoutbox">
                <h2><a href="/quarterly">Fusion Authority Quarterly
Update></a></h2>
                <p>Order the Fusion Authority Quarterly Update and keep your
ColdFusion skills and knowledge up to date.</p>
        </div>
</div>

Styling can then be done as
 div#rightside{
        float: right;
        padding-top: 18px;
        width: 138px;
}

div#rightside .shoutbox{
        background-color: #CCCCFF;
        border: 1px solid #000000;
        font-size: 100%;
        margin: 2px 2px 6px 2px;
        overflow: hidden;
        width: 130px;
}

div#rightside .shoutbox h2{
        background-color: #333366;
        background-image: background-image: url(/_/faqu1.jpg);
        background-position: // Set it correctly and don't be afraid to
change padding to accommodate it.;
        background-repeat: none;
        color: #FFFFFF;
        display: block;
        font-size: 100%;
        font-weight: bold;
        margin: 2px;
        text-align: center;
}

div#rightside .shoutbox p{
        color: #000000;
        margin: 2px;
}

Your anchor is an inline body element, it should be surrounded by your h2,
not surrounding it. The image can be set via CSS rather than in the HTML,
since it doesn't really add that much to the content.

Descendant Selectors are your friend.  



Sandra Clark
==============================
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility

CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_display&id=1



 
-----Original Message-----
From: Michael Dinowitz [mailto:mdinowit@...]
Sent: Wednesday, July 26, 2006 10:47 AM
To: CSS
Subject: Re: Please review - Good CSS?

This is what happens with no sleep, you forget to post an url with a
request. :)

http://www.fusionauthority.com/_/csslayout.htm

> I think I've just finished the rewrite of the Fusion Authority site in
> CSS. Actually, it's like 95% done with a single table in the middle of
> the front page to go. Before I go deal with that, I wanted to know
> what people thought of the layout. Is it legal CSS? Does it break on
> some browser I'm not familiar with? What do you think?
>
> I went for a 3 column display and treated the whole thing as blocks on
> a light blue background. The only thing that worries me is if the
> floats are wrong. In order to get each block working will with its
> neighbor, I used a number of floats to the left with the far right
> column being a right float. When I add in the 4th column, I'll be
> doing so by making the far right into a div and having 2 columns in
> the div. It 'feels' like it'll work, but I'm not 100% convinced.
>
> As for why a 4th column, I've seen that 39%+ of my visitors are on a
> 1024 wide monitor or better so I might as well give them some extra
> content.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Introducing the Fusion Authority Quarterly Update. 80 pages of hard-hitting,
up-to-date ColdFusion information by your peers, delivered to your door four times a year.
http://www.fusionauthority.com/quarterly

Archive: http://www.houseoffusion.com/groups/CSS/message.cfm/messageid:3044
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:41
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=17837.14401.41