SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout without tables

    Hi,

    Here's the effect I can create with a a table:

    Code:
    <table style="font:10pt Arial">
    <tr> 
    <td style="vertical-align:middle"><img src="comment-icon.gif"></td> 
    <td style="width:100%">
    <div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
    </td>
    </tr>
    </table>
    I wonder how I can use <div> instead of <table> tag to get the same result. Ideally I'd like to use the image as a background image because the icon is used many times per page so calling it from a background image reduces the number of http requests.

    Many thanks in advance!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Interesting challenge!

    I'm no CSS expert, but here's one way to do it (that will work on IE8+ and the other browsers):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    body {font: 10pt arial, sans-serif;}
    .bio {display: table; width: 100%;}
    .img {vertical-align: middle; display: table-cell; width: 105px; height: 100px; background: url(comment-icon.gif) no-repeat;}
    .para {display: table-cell; vertical-align: middle;}
    p {padding:5px; border-top:1px solid #DEDEDE; background: #ccc; vertical-align: middle;}
    .no {float: right;}
    .name {font-weight:bold;padding-right:10px}
    .date {color:#808080}
    </style>
    	
    </head>
    
    <body>
    
    <div class="bio">
    	<div class="img"></div>
    	<div class="para">
    		<p><span class="no">No. 1</span><span class="name">John Doe</span><span class="date">11/14/2010 3:23:44</span></p>
    	</div>
    </div>
    
    </body>
    </html>
    The only thing you need to change is the dimensions of the .img div (to match the dimensions of the background image), plus an extra 5px in width to create a space on the right.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The only thing you need to change is the dimensions of the .img div (to match the dimensions of the background image), plus an extra 5px in width to create a space on the right.
    Thanks for the answer! I used a 16x16 px icon and changed 105px to 21px, but couldn't get the desired result.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, right, I didn't anticipate a tiny image. It would work if you made a tiny modification to this rule (see in red):

    Code:
    .img {
      vertical-align: middle; 
      display: table-cell; 
      width: 21px; 
      height: 16px; 
      background: url(comment-icon.gif) no-repeat 0 50%;
    }
    I'm sure there are better ways to construct this whole thing, but this is about all I can think to offer right now.

    See if someone else comes up with something better.

    EDIT:

    It might also be worth adding this too:

    Code:
    p {
      padding:5px; 
      border-top:1px solid #DEDEDE; 
      background: #ccc; 
      vertical-align: middle; 
      margin: 0;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast rainner's Avatar
    Join Date
    Apr 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how about this..

    Code:
    <div style="padding:0 0 0 40px; background:url(comment-icon.gif) left center no-repeat;">
    
        <div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
    
    </div>
    just left-pad the main wrapper div on with the size of the icon image, i chose 40px for this example.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ah, right, I didn't anticipate a tiny image. It would work if you made a tiny modification to this rule (see in red):

    Code:
    .img {
      vertical-align: middle; 
      display: table-cell; 
      width: 21px; 
      height: 16px; 
      background: url(comment-icon.gif) no-repeat 0 50%;
    }
    Now it works.

    See if someone else comes up with something better.
    To be honest, I like rainner's approach better. Thanks for your time anyway!

  7. #7
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by rainner View Post
    how about this..

    Code:
    <div style="padding:0 0 0 40px; background:url(comment-icon.gif) left center no-repeat;">
    
        <div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
    
    </div>
    just left-pad the main wrapper div on with the size of the icon image, i chose 40px for this example.
    Simple and neat! Thanks!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yes, much better! I actually didn't notice that you wanted a background image until the last minute, and just replaced the image element with a background image when I re-read your first post. I should have started from scratch and seen that the solution was much simpler with a background image. Thanks rainner.

    Ideally, though, if you are going to use this setup multiple times, it's better to pull out the inline CSS and just apply the styles via a class. I'm sure the inline styles were just for demo purposes.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast rainner's Avatar
    Join Date
    Apr 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad i could help.

    it's a good idea to target your HTML using class names or IDs and style them from a .css file like it was shown above instead of applying the styles directly on the tags.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sure the inline styles were just for demo purposes.
    Quote Originally Posted by rainner View Post
    glad i could help.

    it's a good idea to target your HTML using class names or IDs and style them from a .css file like it was shown above instead of applying the styles directly on the tags.
    Definitely!
    I wonder how I can calculate the padding-left:40px dynamically so that any icon I choose the padding-left value changes according to the image width. Since it's a JavaScript matter I open a new thread.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    If you are using different icons, it might be better to place the images in the HTML anyway. In your original post, it sounded like it was the same image being used over and over. It would probably be easier to make calculations with JS if the image is in the HTML.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, no offense guys, but I REALLY have to laugh at the responses so far... Now, I'm just guessing, but shouldn't this be a HEADING tag as it looks like something that goes BEFORE some content? (or is it a single list item without the content?)

    Either way, DIV is the wrong tag for the job as is table.

    I'm thinking:
    Code:
    <h2>
    	<span>
    		<span>
    			John Doe
    			<span>11/14/2010 3:23:44</span>
    		</span>
    		No. 1
    	</span>
    </h2>
    Or whatever the appropriate SEMANTIC outer tag would be (H3? H4? LI?) -- I mean, these look like content and/or headings.

    Code:
    h2 {
    	min-height:32px; /* image height */
    	padding-left:32px; /* image width + any extra desired padding */
    	font:normal 10pt/12pt arial,helvetica,sans-serif;
    	background:url(comment-icon.gif) center left no-repeat;
    }
    
    h2 span {
    	display:inline-block;
    	width:100%;
    	text-align:right;
    	vertical-align:middle;
    	background:#CCC;
    	border-top:1px solid #DEDEDE;
    }
    
    h2 span span {
    	width:auto;
    	text-align:left;
    	font-weight:bold;
    }
    
    h2 span span span {
    	margin-left:1em;
    	font-weight:normal;
    	color:#808080;
    }
    Or something to that effect -- in any case EVEN for testing don't get in the habit of inlining CSS with the style attribute.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I REALLY have to laugh at the responses so far...
    O well, you should thank us then. Laughter is healthy.

    Hmm, your code doesn't quite sit as the OP requested (everything sitting right for me). But anyhow, the OP has started another thread asking for the left padding to be dynamically set, depending on the width of the image. For me, that means it would be better to have the image in the HTML. What do you think? Do you know enough JS to show how to do that?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you are using different icons, it might be better to place the images in the HTML anyway.
    Dear Ralph,

    Actually I'm developing a commenting widget in which the user can customize the comment icon. Since the comment icon might be wider/narrower than the fixed padding-left I use in the embed code, the padding-left value needs to be flexible and change dynamically based on the image width.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sure, that makes sense. What I meant, though, is that it will probably be harder to detect the width of a background image than an on-page image with JavaScript.

    On any particular page or site, will the icon always be the same size? In that case, the ideal would be to give the user a way to set the padding, but I'm not exactly sure how this will be used.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Ok, no offense guys, but I REALLY have to laugh at the responses so far... Now, I'm just guessing, but shouldn't this be a HEADING tag as it looks like something that goes BEFORE some content? (or is it a single list item without the content?)

    Either way, DIV is the wrong tag for the job as is table.

    IMHO rainner's method makes perfect sense.
    Thanks for the answer all the same!
    Keep laughing!

  17. #17
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by ralph.m View Post
    the ideal would be to give the user a way to set the padding
    Good idea! I can easily add it as another customizable option in the widget user preferences.


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
  •