As it is a list of friends my suggestion would be <ul class=“friendWrapper”>
<li> <a href=“”> <img src=“/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg” width=“60” alt=“” /> <span>CowboyBob</span> </a>…
Take out all of the extra classes and use the friendWrapper class to style the child elements.
What have I said? WHAT HAVE I SAID? In the words of George Carlin, not every ejaculation deserves a name.
Or in this case, not every element needs a class on it… or a span around it… or a div around it.
I agree, it’s a ‘list’ of friends… though I might suspect if you are down to a H3 you may have issues with the heading orders, but since the things like ‘friends’ are specific to that user, I’d drop a heading level (h4) for it. If it’s a subheading of the H3 preceeding it, that’s what a H4 is for!
Since you’re only applying margin to the text, negative margin the bottom of IMG instead and pad the bottom of the LI. Will work better if you set the images to display:block. (might not even need the negative margin at that point!). As Artemis said, use the parent element’s ID to style all the children instead of wasting time throwing classes at everything.
I like your code, and think it is better than mine.
I also think I can “Friends” and “Recent Visitors” an <h4>, but see my code above to see if you still agree with that?!
Also, if I change those to <h4> then I could lose the subclass here…
<h3 class="subHeading">Friends</h3>
Since you’re only applying margin to the text, negative margin the bottom of IMG instead and pad the bottom of the LI. Will work better if you set the images to display:block. (might not even need the negative margin at that point!). As Artemis said, use the parent element’s ID to style all the children instead of wasting time throwing classes at everything.
Okay.
Thanks - as always - for the help DeathShadow60!!! (And Artemis too!)
And please let me know what you think about my code and screenshot above…
Ok, you’re h2 I’d consider a ‘wasted’ element; it adds nothing to the structure. I would probably be combining it with your first h3 from a semantic point of view so it’s ‘meaningful’ and unique. So instead of <h2>Member Profile</h2> I’d have something like:
<h2>DoubleDee’s Member Profile</h2> and lose that first H3… then the sub H3’s make sense.
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?)
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!
Though that goes with the redundant/pointless opening comments… the pointless wrapping DIV, the ID’s on elements that should only appear once on a page… and I don’t know what you are doing for the images off text in that h1, but it looks like broken methodology.
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.
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.
h1 a – it’s empty, there’s no content – so how is this a working image replacement; shouldn’t your CSS off content be inside the anchor?
div#pageMidCol – vague/meaningless name, you’ve only got one div inside it, so what purpose does this serve? SMELLS like presentational markup.
#boxMemberProfile – why ‘box’ – it’s a div, of course it’s a box. just ‘memberProfile’.
#boxMemberProfile H2 – Who’s member profile? There is no reason for this to be separate from the H3 that follows. Everything here is a subsection of THAT member’s profile, so make THAT the h2.
Something like:
<h2>DoubleDee’s Member Profile</h2>
div#boxUser – not sure if this is necessary; I smell a subsection and as a presentational hook it might not be a bad idea, but it’s making my bad-code sense twitch a little.
h3.subHeading – as before, if it’s a subheading why is it the same level as it’s sibling? Pointless class.
div.friendWrapper – as before, this should probably be a list meaning it only needs one class, not three of them.
img.noborder – presentational class, defeats the point of separation of presentation from content. At that point you might as well just use the deprecated border attribute.
In general that whole section has the problem of “if they’re all recieving the same classes, NONE of them need classes” – that’s part of what semantic markup is for.
I’m guessing since we’re waiting for your pic to be approved, but I suspect for that whole section I’d have something more like this:
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.
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.
Anyways…
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…
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…
index.php
<body>
<div id="pageWrapper" class="clearfix">
<div id="pageInner">
<!-- BODY HEADER -->
<?php require_once('components/body_header.inc.php'); ?>
<!-- LEFT COLUMN -->
<div id="pageLeftCol">
<!-- 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 -->
<div id="pageMidCol_3">
<!-- Facts Teaser -->
<?php require_once('components/content_facts_teaser.inc.php'); ?>
</div><!-- End of #MIDDLE -->
<!-- RIGHT COLUMN -->
<div id="pageRightCol">
<!-- 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 -->
<div id="pageHeader">
<!-- COMPANY BRANDING -->
<h1 id="companyLogo">
<!-- Display Logo if "Images On" -->
<a href="/index.php">
<!-- Image Replacement Technique -->
<span></span>
</a>
<!-- Display Text if "Images Off" -->
DoubleDee, Inc: Tips on starting a Small-Business
</h1>
/* COMPANY BRANDING Styles */
h1#companyLogo,
h1#companyLogo span{
position: relative; /* Create "Positioned" Containing-Block. */
float: left;
margin: 15px 0 10px 0;
padding: 0; /* Re-set <h1> defaults. */
width: 220px; /* Image Width. */
height: 36px; /* Image Height. */
overflow: hidden; /* Hide Overflow. */
line-height: 1.2em;
font-size: 1.1em; /* Reduced size to fit in space of Missing Image. */
}
/* Company Logo appears as long as "Images On" selected in browser. */
h1#companyLogo span{
position: absolute;
background: url('/images/DoubleDee_220x36.png') no-repeat;
margin: 0;
width: 100%; /* Expand to Parent's Size. */
height: 100%; /* Expand to Parent's Size. */
/*
left: 0;
top: 0;
*/
}
See above…
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.)
that’s trolling, and is generally frowned upon by rules of netiquette