You have a valid argument, except that I have set up my website - right or wrong - like this...
Paul O' helped me create a wicked 3-Column, Fluid Center, Fixed End Column, Max-Min, Sticky Footer and some other stuff I can't remember Website Design in the past. It works, and I'm not touching it! (A lot of my code you don't like relates to that...)
Within that - and honestly my site is complex enough I can't remember everything I did, other than it was vetted as I developed by all of you, so most of what I have should be pretty good.
I am using "Debbie's Lego Approach" for building web pages.
I have a series of "box____" div's that I use to not only create a pretty Presentation Box with grey borders like this...
But I also use these "boxes" as containing blocks that set up an area where I can put a logically grouping of markup (e.g. Featured Article, Upcoming Events, Statistic, Member Profile, etc)
So I do think that each "box____" deserves its own <h2> or <h3>
But to your point, yes, the 'My Profile" "box" is for a specific User, so I guess I could combine that one, but then again, SitePoint does the same thing I am doing - at least visually... (Yeah, I'm stealing some ideas of how SitePoint does their Member Profiles, but with my own twist!)
When you see my screenshot, I think it looks better to have "DoubleDee" above my photo - and thus the <h3> - instead of combining things into your <h2> but not having a heading above the picture.
See what I mean?!
Though what is this 'light_green_10.png" thing? at 10px wide that doesn't look like a content element.
(no screeenshot BTW -- we stuck waiting on approval?)
If a User is "online and active" they have a green indicator, "idle" is a yellow indicator, and "Offline" is a grey indicator. (Mainly presentational, but also data!)
You've got a lot of vague/meaningless names/words in there -- like "box", or "midCol", or "noborder"... pageMidCol is presentational, you're not saying what it is we're looking at... you're saying where it's placed/what it is. Say what things ARE!
Because those building blocks are what makes up the templates of my website.
They are supposed to be generic!
Though that goes with the redundant/pointless opening comments...
You'll never change me on that one.
Ummm.... It was YOUR IDEA that I used the "Gilder/Levin Image Replacement for Headings" last November... :rolleyes:
Seriously, let's go down from the top...
div#pageheader -- what purpose does this serve? what are you doing that can't be done to the H1 directly.
I broke my HTML up into "component architecture" like this...
<div id="pageWrapper" class="clearfix">
<!-- BODY HEADER -->
<?php require_once('components/body_header.inc.php'); ?>
<!-- LEFT COLUMN -->
<!-- Today's Topic -->
<?php require_once('components/content_topic.inc.php'); ?>
<!-- Featured Article -->
<?php require_once('components/content_featured.inc.php'); ?>
</div><!-- End of #LEFT -->
<!-- MIDDLE COLUMN -->
<!-- Facts Teaser -->
<?php require_once('components/content_facts_teaser.inc.php'); ?>
</div><!-- End of #MIDDLE -->
<!-- RIGHT COLUMN -->
<!-- Upcoming Events -->
<?php require_once('components/content_events.inc.php'); ?>
<!-- Fast Figures -->
<?php require_once('components/content_fast-figures.inc.php'); ?>
</div><!-- End of #RIGHT -->
</div><!-- End of #INNER -->
</div><!-- End of #WRAPPER -->
Does that make more sense?
I just took Paul O's website layout, and I "plug-n-play" my containing DIV's and "boxes" to build any type of web page I want on the fly...
h2#companyLogo -- what purpose does the ID serve? There should only be one H1 per page, so there is no reason to put an ID on it.
You mean h1#companyLogo, and yes, I could clean that up.
This was YOUR CODE that you so kindly gave me...
Here are some snippets...
<!-- PAGE HEADER -->
<!-- COMPANY BRANDING -->
<!-- Display Logo if "Images On" -->
<!-- Image Replacement Technique -->
<!-- Display Text if "Images Off" -->
DoubleDee, Inc: Tips on starting a Small-Business
/* COMPANY BRANDING Styles */
position: relative; /* Create "Positioned" Containing-Block. */
margin: 15px 0 10px 0;
padding: 0; /* Re-set <h1> defaults. */
width: 220px; /* Image Width. */
height: 36px; /* Image Height. */
overflow: hidden; /* Hide Overflow. */
font-size: 1.1em; /* Reduced size to fit in space of Missing Image. */
/* Company Logo appears as long as "Images On" selected in browser. */
background: url('/images/DoubleDee_220x36.png') no-repeat;
width: 100%; /* Expand to Parent's Size. */
height: 100%; /* Expand to Parent's Size. */
I agree with your code, except for what I said above about wanting a "DoubleDee" heading above my photo like SitePoint does.
I could just make the blue shaded "header" above my photo a DIV and do what you are saying, but see why I made it an <h3>?
(Another "style" I've adopted for my "boxes" is that ever box is denoted with a Heading Name whether <h2>, <h3>, etc.)
Though again, I'll need to see that screenshot to be sure. Basically it's the KISS theory in action. You don't go throwing div and span and classes and ID's at everything; let flow, inheritance and specificity do the work for you. Like using a hammer, let the tool do the work.
I understand, and in some areas you are right. But you have given me a hard time before with my website's layout and design, and I think you are taking things out of context, because most of my DIV's should have been blessed by Paul O'...
(Not to be a jerk, but I am not willing to post my entire codebase in the forums for a few reasons. If YOU want to see more, PM me DeathShadow, and maybe that will help make more sense, because you obviously don't have all of my HTML to go off of.)