SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Friend Problems... :(

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


    Here is the code I am using...
    HTML Code:
    <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...
    Code CSS:
    #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

  2. #2
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,014
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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.

  6. #6
    SitePoint Addict artemis's Avatar
    Join Date
    Sep 2003
    Location
    London
    Posts
    295
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I agree divs inside anchors make me cringe too. I just shivered thinking about it.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Or in this case, not every element needs a class on it... or a span around it... or a div around it.
    Fair enough.


    Quote Originally Posted by deathshadow60
    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...
    Attachment 59567


    And here is a larger snippet of my HTML... (Remember, DeathShadow, the H1 and H2 were approved by you after a week of vetting!!)
    Code HTML4Strict:
    <!-- 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>


    Quote Originally Posted by deathshadow60
    Something like:
    Code:
    <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...
    Code:
    			<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

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    	<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.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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...
    Attachment 59570

    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.


    Quote Originally Posted by deathshadow60
    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
    Code HTML4Strict:
    <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.


    Quote Originally Posted by deathshadow60
    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...

    Code HTML4Strict:
    	<!-- 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>


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


    Quote Originally Posted by deathshadow60
    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...


    Quote Originally Posted by deathshadow60
    #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:
    Code:
    	<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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •