SitePoint Sponsor

User Tag List

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

    Need to Wrap Image?

    I am building an Articles Index which has a short summary paragraph of an Article, and to the left is a thumbnail image which help to illustrate what the Article is about. The Image is also hyperlinked, so clicking on it takes you to the Article as does clicking on the Article Summary Heading.

    So anyways...

    Is there a need to "wrap" an Image in tags (e.g. <p>, <div>) or can it just be free-standing?

    (I suppose technically my <img> needs to be wrapped in <a> tags, but beyond that...)

    Here is what I did in the past...
    HTML Code:
    	<p class="image">
    		<a href="<?php echo BASE_URL; ?>articles/postage-meters-can-save-you-money">
    					<img src="<?php echo BASE_URL; ?>images/PostageMeter_200x200.jpg" width="200"
    					alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons."
    					title="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
    		</a>
    	<p>
    Thanks,


    Debbie

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The IMG element has no content, is empty and inline thus it requires a container element typically a block-level element, so no it cannot be standalone.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    In my view, it's best to have an inline element wrapped in a block element. The only time you're strictly not allowed to have an inline element on its own is as a direct child of the <body> element. But generally it is asking for trouble to have an inline element like an image hard up against a block element like a <p>. It can cause buggy browser rendering.

  4. #4
    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 ralph.m View Post
    In my view, it's best to have an inline element wrapped in a block element. The only time you're strictly not allowed to have an inline element on its own is as a direct child of the <body> element. But generally it is asking for trouble to have an inline element like an image hard up against a block element like a <p>. It can cause buggy browser rendering.
    The <a> element is also inline, right?

    If so, then what should I use?

    An image is neither a "paragraph" nor an element of a paragraph if you ask me.

    Seems like using a <div> would be best?


    Debbie

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    The <a> element is also inline, right?
    Yes.

    then what should I use? An image is neither a "paragraph" nor an element of a paragraph if you ask me.
    Seems like using a <div> would be best?
    Others around here disagree with me on this, but I have a more generous concept of what a paragraph is than most. Not that this is especially relevant, but linguistically, a paragraph is anything that is drawn or written alongside other things, so to me, it's perfectly fine to have an image wrapped in <p> tags. However, <p>s often have their own styling which can get in the way when wrapping them around an image (thus perhaps necessitating special classes etc.) so now I'm inclined to wrap the image in a div.

    Mind you, it's not totally clear from your example above what the exact situation is, but it's fine to include an <img> in a <p> element that has text in it, just as you include <a> elements, so that's probably the best option is it suits your purposes.

  6. #6
    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 ralph.m View Post
    Yes.

    Others around here disagree with me on this, but I have a more generous concept of what a paragraph is than most. Not that this is especially relevant, but linguistically, a paragraph is anything that is drawn or written alongside other things, so to me, it's perfectly fine to have an image wrapped in <p> tags. However, <p>s often have their own styling which can get in the way when wrapping them around an image (thus perhaps necessitating special classes etc.) so now I'm inclined to wrap the image in a div.

    Mind you, it's not totally clear from your example above what the exact situation is, but it's fine to include an <img> in a <p> element that has text in it, just as you include <a> elements, so that's probably the best option is it suits your purposes.
    Okay, so let me describe in greater detail what I am building...

    This page will be an Articles Index page.

    For each Article, there will be an Thumbnail/Image on the left, and immediately to the right will be an Article Heading with an Article Summary (paragraph) below the Heading.

    For each Article, will be this set up.

    I am looking at something similar to what http://arstechnica.com/ does.

    Follow me?

    I actually had help building this about a year ago, but I am looking to clean up my code - which wasn't so hot - and figured it would be easiest to start from scratch.

    Thanks,


    Debbie

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I would just use two divs, one floated left (for the image) and one floated right, for the the content. But there are many ways to do this. You could even argue that this is a list of entries and enclose those divs in a <li>, but it's up to you.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    I actually had help building this about a year ago, but I am looking to clean up my code - which wasn't so hot - and figured it would be easiest to start from scratch.
    I remember helping you with that back then. It was a four page thread that had some good input from several people in it.

    If you remember, my final version used a div to wrap the image and byline (which was a span) as they were inline elements. Then the article text itself was in a <p> tag.

  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 Rayzur View Post
    I remember helping you with that back then. It was a four page thread that had some good input from several people in it.

    If you remember, my final version used a div to wrap the image and byline (which was a span) as they were inline elements. Then the article text itself was in a <p> tag.
    Rayzur?! You are alive!!!!!!

    (Been avoiding me?!)

    Yes, I remember the thread, but things just look different a year later...

    Here is what I came up with tonight...
    HTML Code:
    	<!-- Summary #2 -->
    	<div class="articleSummary">
    		<h3>Consider becoming an S-Corporation</h3>
    		<div class="image">
    			<a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">
    				<img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100"
    					alt="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons."
    					title="Picture: S-Corp.  Credit: John Doe, Wikimedia Commons." />
    			</a>
    		</div>
    		<p class="published">Published: December 31, 2011</p>
    		<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, 
    		and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your 
    		small-business to consider making the switch.</p>
    		<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not
    		be so obvious.  <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide
    		financial benefits and legal protection</a> that you need!</p>
    	</div>

    Code CSS:
    /* ARTICLE INDEX Styles */
    #boxArticleIndex{
    	margin: 20px 220px 50px 0px;
    	padding: 15px 50px 50px 50px;	/**/
    	min-width: 520px;						/* 0px + 20px + 520px + 20px + 200px = 760px Min-Width */
    	max-width: 960px;						/* 0px + 20px + 960px + 20px + 200px = 1200px Max-Width */
    	clear: both;
    	text-align: justify;
    }
     
    #boxArticleIndex h2{
    	margin: -15px -50px 0 -50px;
    }
     
    .articleSummary{
    	padding: 30px 0px;
    }
     
    .articleSummary h2{
    	font-size: 1.2em;
    }
     
    .image{
    	float: left;
    	padding: 0 20px 0 0;
    }
     
    .published{
    	margin: 0 0 -1em 0;
    	font-size: 0.8em;
    	font-weight: bold;
    }


    I just feel like this code could be stream-lined some more?! (I have been trying *really hard* to use minimalistic HTML and CSS to get the same effects that used to take me pages of code...)

    I am wondering, for instance, if I really need the...
    HTML Code:
    		<div class="articleSummary">

    Glad to see you back around, Rayzur. Oh, and Happy New Year!!

    Sincerely,


    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Happy New year

    Rays example is more flexible if you have articles without images and the text can collapse more easily to the side. Your example will mean that text will eventually wrap under the image rather than stay aligned nicely to the right (which may or may not be an issue but often looks messy if the last line only wraps underneath).

    There are many ways to do this but if you are always going to have an image showing and the structure is always the same then you can lose the extra image div and just put the image in the first p element and drag it left. Pad out all the p elements and they will stay clear.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    /* ARTICLE INDEX Styles */
    .articleSummary { padding: 30px 0px; }
    .articleSummary h2 { font-size: 1.2em; }
    .published a {
    	float: left;
    	margin:0 0 0 -120px;
    	position:relateive;/* IE fix - just in case*/
    }
    .articleSummary p {
    	margin:0 0 1em;
    	padding:0 0 0 120px;
    }
    p.published {
    	margin:0;
    	font-size: 0.8em;
    	font-weight: bold;
    }
    img {
    	display:block;
    	background:red;
    	height:100px
    }/* for demo only */
    </style>
    </head>
    
    <body>
    <!-- Summary #2 -->
    <div class="articleSummary">
    		<h3>Consider becoming an S-Corporation</h3>
    		<p class="published"><a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation"> <img src="<?php echo BASE_URL; ?>images/S-Corp.png" width="100" alt="Alternative text here" 	title="S-Corp.  Credit: John Doe, Wikimedia Commons." /> </a>Published: December 31, 2011</p>
    		<p>When most people think of "corporations" they think of mega-companies like Wal-mart, Microsoft, General Motors, Citibank, 
    				and so.  However the reality is that all it takes is one person to become a "corporation", and now might be the right time for your 
    				small-business to consider making the switch.</p>
    		<p>Incorporating your small-business isn't nearly as difficult or as expensive as you might think, and it offers benefits that may not
    				be so obvious. <a href="<?php echo BASE_URL; ?>articles/consider-becoming-an-s-corporation">Learn how S-Corporations provide
    				financial benefits and legal protection</a> that you need!</p>
    </div>
    </body>
    </html>
    It all depends on how flexible you want it to be as to which approach you take.

    Don't use the same alt and title text in the image as that will annoy screen readers greatly as they read out the same information twice. Also do not include the word picture or imafe in the alt text because screenreaders announce that it is an image before the text is read out so users don;t want to hear "Image", "Image of .....".

    More info here.


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
  •