Shane--
Hmm, well I tend to consider empty divs akin to a spacer.gif in the land of tables--if it is present solely for the purposes of presentation, then you're falling short of the pursuit of "separating style from content." Particular to the header3, perhaps you could instead place that image as a background of the div that contains your Flash movie (header2). So:


#header2 {
        position: relative;
        width: 836px;
        height: 196px;
        margin: 0 auto;
        padding: 0px;
        background-color: #2A331F;
}

Could become

#header2 {
        position: relative;
        width: 836px;
        height: 233px;
        margin: 0px auto;
        padding: 0px;
        background: #2A331F url(../img/header3.gif) bottom right no-repeat;
}

And while you're at it, perhaps consider combining header4.gif and header3.gif into one image. Then of course just add a bit more height to your header2 div, and use your new combined image as the background. (Disclaimer: I haven't tested the stylesheet but it should work, barring any browser tweaks)

Along the same lines, your header1 & footer divs are not very semantically descriptive. The images themselves have a lot of information, but you can't tell that from your HTML source. Consider adding "alt" attributes to the image tags, or use a background image replacement technique, where your containing div has the image as its background, and then a <span> tag is just inside your div tags, surrounding the text and setting it to display: none.

Hope that helps!
        

--
Pura Vida
John D Wells
http://www.jdwjr.com
On Sep 29, 2004, at 2:35 PM, Shane Helm wrote:

I am working on my second CSS & XHTML site.
Home page thus far: http://sonze.com/lange/index.html
CSS for the page: http://sonze.com/lange/css/master.css

I have some empty div tags to be able to make a graphic a background image since this presentation is common to all pages.
For example in my html:
<div id="header3"></div>


My CSS for "header3"> is as follows:
#header3
        {
        position: relative;
        width: 836px;
        height: 37px;
        margin: 0 auto;
        padding: 0px;
        background: #2A331F url(../img/header3.gif) no-repeat;
        }

Since I this is only my second site using Web Standards, I'm unsure if leaving a div tag empty is okay or not. Or is there another method I should be using?


Thank you very much, Shane Helm

******************************************************
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************



****************************************************** The discussion list for http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************



Reply via email to