Layout without tables

Printable View

Apr 15, 2011, 20:00
Rain Lover

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!
Apr 16, 2011, 00:02
ralph.m

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.
Apr 16, 2011, 07:12
Rain Lover

Quote:

Originally Posted by ralph.m

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.
Apr 16, 2011, 07:19
ralph.m

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; }
Apr 16, 2011, 07:46
rainner

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.
Apr 16, 2011, 07:53
Rain Lover

Quote:

Originally Posted by ralph.m

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.

Quote:

See if someone else comes up with something better.

To be honest, I like rainner's approach better. Thanks for your time anyway! :)
Apr 16, 2011, 07:54
Rain Lover

Quote:

Originally Posted by rainner

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!
Apr 16, 2011, 08:10
ralph.m

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.
Apr 16, 2011, 14:12
rainner

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.
Apr 16, 2011, 19:49
Rain Lover

Quote:

I'm sure the inline styles were just for demo purposes.

Quote:

Originally Posted by rainner

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.
Apr 16, 2011, 21:02
ralph.m

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.
Apr 17, 2011, 17:44
deathshadow60

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.
Apr 17, 2011, 18:29
ralph.m

Quote:

Originally Posted by deathshadow60

I REALLY have to laugh at the responses so far...

O well, you should thank us then. Laughter is healthy. :p

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?
Apr 18, 2011, 07:18
Rain Lover

Quote:

Originally Posted by ralph.m

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.
Apr 18, 2011, 07:30
ralph.m

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.
Apr 18, 2011, 07:39
Rain Lover

Quote:

Originally Posted by deathshadow60

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! :)
Apr 18, 2011, 07:44
Rain Lover

Quote:

Originally Posted by ralph.m

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.