Friend Problems... :(

[DoubleDee]

Made ya look!

In my User Profile, I want the ability to display a Member's Friends!

Here is the look I am going for...
FriendListing.png


Here is the code I am using...

<div id="boxUser">
	<h3>DoubleDee
		<img src="/images/Light_Green_10.png" width="10" alt="" />
	</h3>
	<br />
	<img class="noborder" src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />
	<ul>
		<li><a href="">Send Private Message</a></li>
		<li><a href="">Find Latest Posts</a></li>
	</ul>
						
	<h3 class="subHeading">Friends</h3>
		<!-- Friend #1 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg" width="60" alt="" />
				<div class="userName">CowboyBob</div>
			</a>
		</div>

		<!-- Friend #2 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif" width="60" alt="" />
				<div class="userName">SamIAm</div>
			</a>
		</div>

		<!-- Friend #3 -->
		<div class="friendWrapper">
			<a href="">
				<img class="noborder" src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg" width="60" alt="" />
				<div class="userName">Pam-Was-Here</div>
			</a>
		</div>
	</div>

And my markup...

#boxUser{
	width: 150px;
	margin: 20px 0;
	padding: 0 15px 15px 15px;														/* Create Gutter */
	font-size: 0.9em;
	border: 1px solid #AAA;		/**/
}
 
 
#boxUser h3{
	/* Next two lines needed or IE6&7 won't show negative margins properly. */
	position: relative;
	zoom: 1.0;
	margin: 0 -15px 0 -15px;
	padding: 0.4em 15px 0.2em 15px;
	text-align: left;
	font-weight: bold;
	color: #2323DC;																	/* Deep Blue */
	background-color: #D7D3FF;											/* Blue Gray */
}
 
#boxUser h3 img{
	padding: 0 0 0 5px;
}
 
#boxUser h3.subHeading{
	color: #2323DC;																	/* Deep Blue */
	margin: 4em -15px 1em -15px;
}
 
#boxUser .friendWrapper .userName{
	margin: -0.5em 0 0.8em 0;
}

Is there a better way to code what I have, or does it look okay?


Some thoughts...

1.) I added a "friendWrapper" around the Friend's Image and Friend's Username so that things stay "glued" together.

2.) I wasn't sure what to wrap around the Friend's Username.

3.) It seems like I am using an awful lot of markup here...


I always strive for things which are *Semantically Correct* and also that use the least code to get the greatest benefits.

Your thoughts are welcome.

Thanks,


Debbie

[artemis]

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.

[r937]

Made ya look!

that's trolling, and is generally frowned upon by rules of netiquette



i would use separate head levels rather than successive H3 elements with the second one being a "subhead"

i would not stuff BR tags in to get desired spacing

and maybe it's only me, but i shudder to see things like DIVs inside an A

[RyanReese]

and maybe it's only me, but i shudder to see things like DIVs inside an A

You should shudder. It's invalid coding and can break extremely easily/not produce results like you want .

[deathshadow60]

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!

Something like:

<h4>Friends</h4>
<ul id="friends">
	<li>
		<a href="">
			<img
				src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg"
				width="60"
				alt="Avatar of CowboyBob"
			/>
			CowboyBob
		</a>
	</li><li>
		<a href="">
			<img
				src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif"
				width="60" 
				alt="Avatar of SamIam"
			/>
			SamIAm
		</a>
	</li><li>
		<a href="">
			<img
				src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg"
				width="60"
				alt="Avatar of Pam-Was-Here"
			/>
			Pam-Was-Here
		</a>
	</li>
</ul>

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.

[artemis]

I agree divs inside anchors make me cringe too. I just shivered thinking about it.

[DoubleDee]

Or in this case, not every element needs a class on it... or a span around it... or a div around it.

Fair enough.

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!

You bring up a valid point.

Here is a larger screenshot of what my page looks like...
MemberProfile_partial.png


And here is a larger snippet of my HTML... (Remember, DeathShadow, the H1 and H2 were approved by you after a week of vetting!!)

<!-- 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>
 
</div><!-- End of #HEADER -->
 
<!-- MIDDLE COLUMN -->
<div id="pageMidCol">
 
	<!-- MEMBER PROFILE -->
	<div id="boxMemberProfile">
		<h2>Member Profile</h2>
 
		<div id="boxUser">
			<h3>DoubleDee
				<img src="/images/Light_Green_10.png" width="10" alt="" />
			</h3>
			<br />
			<img class="noborder" src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />
			<ul>
				<li><a href="">Send Private Message</a></li>
				<li><a href="">Find Latest Posts</a></li>
			</ul>
 
			<h3 class="subHeading">Friends</h3>
			<div class="friendWrapper">
				<a href="">
					<img class="noborder" src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg" width="60" alt="" />
					<div class="userName">CowboyBob</div>
				</a>
			</div>
			<div class="friendWrapper">
				<a href="">
					<img class="noborder" src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif" width="60" alt="" />
					<div class="userName">SamIAm</div>
				</a>
			</div>
			<div class="friendWrapper">
				<a href="">
					<img class="noborder" src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg" width="60" alt="" />
					<div class="userName">Pam-Was-Here</div>
				</a>
			</div>
 
			<h3 class="subHeading">Recent Visitors</h3>
			<p>The last 10 visitors on this page were...</p>
		</div>

Something like:

<h4>Friends</h4>
<ul id="friends">
	<li>
		<a href="">
			<img
				src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg"
				width="60"
				alt="Avatar of CowboyBob"
			/>
			CowboyBob
		</a>
	</li><li>
		<a href="">
			<img
				src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif"
				width="60" 
				alt="Avatar of SamIam"
			/>
			SamIAm
		</a>
	</li><li>
		<a href="">
			<img
				src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg"
				width="60"
				alt="Avatar of Pam-Was-Here"
			/>
			Pam-Was-Here
		</a>
	</li>
</ul>

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

Thanks,


Debbie

[deathshadow60]

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:

	<h1>
		<a href="/index.php">
			DoubleDee, Inc <span>-</span>
			<small>Tips on starting a Small-Business</small>
		</a>
	</h1>
 
	<div id="memberProfile">
	
		<h2>DoubleDee's Member Profile</h2>
		
		<img
			src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg"
			width="100"
			alt="DoubleDee's Avatar"
		/>
		
		<ul class="controls">
			<li><a href="">Send Private Message</a></li>
			<li><a href="">Find Latest Posts</a></li>
		</ul>
 
		<h3>Friends</h3>
		<ul class="friends">
			<li>
				<a href="">
					<img
						src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg"
						width="60"
						alt="CowboyBob's Avatar"
					/>
					CowboyBob
				</a>
			</li><li>
				<a href="">
					<img
						src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif"
						width="60"
						alt="SamIAm's Avatar"
					/>
					SamIAm
				</a>
			</li><li>
				<a href="">
					<img
						src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg"
						width="60"
						alt="Pam-Was-Here's Avatar"
					/>
					Pam-Was-Here
				</a>
			</li>
		</ul>
		
		<h3>Recent Visitors</h3>
		<p>The last 10 visitors on this page were...</p>
		
	<!-- #memberProfile --></div>

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.

[DoubleDee]

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.

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

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.

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.

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.

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?

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;
*/
}

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

See above...

#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:

	<h1>
		<a href="/index.php">
			DoubleDee, Inc <span>-</span>
			<small>Tips on starting a Small-Business</small>
		</a>
	</h1>
 
	<div id="memberProfile">
	
		<h2>DoubleDee's Member Profile</h2>
		
		<img
			src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg"
			width="100"
			alt="DoubleDee's Avatar"
		/>
		
		<ul class="controls">
			<li><a href="">Send Private Message</a></li>
			<li><a href="">Find Latest Posts</a></li>
		</ul>
 
		<h3>Friends</h3>
		<ul class="friends">
			<li>
				<a href="">
					<img
						src="/uploads/ba5c9300f13b62acd3af9d7e57e571333a94a94d.jpg"
						width="60"
						alt="CowboyBob's Avatar"
					/>
					CowboyBob
				</a>
			</li><li>
				<a href="">
					<img
						src="/uploads/a73dc554b0f812fec6553652750f48c20f6cee1b.gif"
						width="60"
						alt="SamIAm's Avatar"
					/>
					SamIAm
				</a>
			</li><li>
				<a href="">
					<img
						src="/uploads/0e71dd56ccde8960313ed920eb060c4465f4a757.jpg"
						width="60"
						alt="Pam-Was-Here's Avatar"
					/>
					Pam-Was-Here
				</a>
			</li>
		</ul>
		
		<h3>Recent Visitors</h3>
		<p>The last 10 visitors on this page were...</p>
		
	<!-- #memberProfile --></div>

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

Thanks,


Debbie