Forum Moderators: not2easy
I am trying to transition my site from table based layouts to div / css and am running into a bit of trouble trying to get the behavior I want with divs.
What I have are some articles with images and basically the images are defined right now as a table
<center>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center; padding-right: 42px">GROUP 1<br />
Some Decription for GRP1</td>
<td style="text-align: center">[IMG ROUP 2]<br /> Some Description for Image 2</td>
</tr>
</table>
</center>
In the past, I've been able to add 2, 3, 4 images, and the table layout handles this just fine. It will scale and move around to accomodate different sized images and the thing is it ALWAYS keeps the description below the image alinged nicely.
I'm trying to find a way to do this with divs and I'm just lost. The centering can easily be done via:
<div style="text-align: center" class="imgblockwrapper">
images would go here
</div>
But the problem is I just don't know how to format the blocks on the inside so that the image/description blocks layout nicely.
I've looked at a few div based column layout suggestions but most of them don't fit to the width on the contents, or they need to know the width of each of the blocks ahead of time.
Appreciate any pointers or suggestions.
First of all I *never* develop anything in IE. It only sets me on the wrong foot, confuses me and get's me upset. On top of that it slows me down.
I do use any standards compliant browser. But I prefer Firefox due to the add-ons that I really like: "web developer toolbar" and "firebug". But anything else like safari, chrome or opera would do equally well.
I start from a small blank document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
next I think about the structure a list of images, with descriptions.
I might go for a number of divs nested in another one, but that would be called "divititis" by some (overuse of divs). So, since I said list: I'm considering an <ul> or a <dl>. The <dl> might seem more logical but I'm afraid that the <dt> and <dd> not being nested is going to land me more trouble than it is going to be worth.
So I add the html for the list:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<ul class="image">
<li>
<img src="1s.jpg" alt="one" />
<p>description</p>
</li>
<li>
<img src="2s.jpg" alt="two" />
<p>longer description goes here</p>
</li>
</ul>
</body>
</html>
Not a div in sight, good. And it does still make sense when viewed without CSS (an accessibility issue less to worry about, and the search engines etc will "see" my code as this as well.)
The images I'm using make it so that the image is slightly smaller than the longer description and slightly longer than "description".
So now we need to start to format it.
A first thing that comes to mind is using nested floats: they shrink around one-another and would put it all on one line, but ... it's going to make it pretty hard to center the whole. So we abandon that tought.
What we do recall is the post form SuzyUK about inline-block now being usable (and even more so in the mean time).
[webmasterworld.com...]
Note I'm using a recent firefox, so it's going to be kinda hard to test it in old Firefox versions (I really ought to set up a test environment for it).
As such I'll ignore the FF<3 issues, but remember the link above: it'll tell you what those old versions of FF need (most Firefox users do upgrade, at least in among my visitors).
So let's start on the inside and work toward to the outside:
the <img> in there needs to be centered. To make it also not behave like an inline element (having space for a descender etc), we make it display as a block).
So that becomes:
.image img {
display: block;
margin: 0 auto;
}
The <p> is already a block element, but adding margin: 0 auto; wont center it's content. The reason is that the block is already as wide as out page, so the block is already centered. What we need to do is center the text within the paragraph:
.image p {
text-align: center;
background-color: teal;
}
The background color is just to visualize where what goes.
If we'd not have made the image a block element there would be a gap (big enough to accommodate the descenders of letters like ygj.
So now let's focus on the <li>: it needs to all go on one line, inline-block is ideal for that in this case:
.image li {
display: inline-block;
background-color: yellow;
}
Now that's fine: but the text of that <p> is making the <li> wider than the image. The issue here is not knowing how wide the image is, and there simply is no CSS to say make this as wide as some other element (that's the realm of scripting)
Still, since I've no idea what you wanted to happen when images were smaller than descriptions, I presume it's ok to assume it's not going to be a problem (a <br /> in the paragraph will solve it)
Cute but now we need to center it all. Since we already have two centering methods above: one for inline elements and on for block elements, which do we need here ?
Serious, think about it: an inline block is an inline element, so our <li>s are basically like words on a line of text, so we need the text-align for them.
.image {
text-align: center;
background-color: orange;
}
Done!
Well not so fast: let's test it in a few other standards compliant browsers first: test it in safari, opera, ... it all works the same.
So yes, now I consider it done for the standards compliant browsers and won;t change it anymore to accommodate the torment of all CSS development: IE
First let's start IE7.
Yep, a disaster.
But we have the post referenced above that said we need to trip the display:inline-block back to display: inline to do the needed magic incantation to make IE work. So let's try that:
<!--[if IE 7]>
<style type="text/css">
.image li {
display: inline;
}
</style>
<![endif]-->
It seems with the default font it's 4px high, so a conditional comment for IE7 would be:
<!--[if IE 7]>
<style type="text/css">
.image img, .image li {
display: inline;
}
.image img {
margin-bottom: -4px;
}
</style>
<![endif]-->
Let's next try IE6.
Hmm. the same problem as IE7, cold be handy. Let's see of IE6 likes the fixes we applied for IE7: yep it does.
So we can apply the IE fix to IE6 as well, leading us to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.image img {
display: block;
margin: 0 auto;
}
.image li {
display: inline-block;
background-color: yellow;
}
.image p {
text-align: center;
background-color: teal;
}
.image {
text-align: center;
background-color: orange;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.image img, .image li {
display: inline;
}
.image img {
margin-bottom: -4px;
}
</style>
<![endif]-->
</head>
<body>
<ul class="image">
<li>
<img src="1s.jpg" alt="one" />
<p>description</p>
</li>
<li>
<img src="2s.jpg" alt="two" />
<p>longer description goes here</p>
</li>
</ul>
</body>
</html>
note that I didn't waste time trying to understand the twisted ways of IE, I only care for the non-compliant browser to show it all somewhat properly, that's my only goal and the only time I waste on it. I've long since stopped wondering why it does something. If those selling it don't care to fix the errors, then why should I care to understand their errors.
There's one thing I'd do (but I don't have a copy of FF2 handy): try it in FF2 and apply the vendor-specific settings it potentially needs (see the referenced thread above for SuzyUK's work on the subject -in those days FF2 was predominant, not FF3 as it is nowadays)
Was this more or less what you were looking for ? Even if it wasn't directly, I hope the process of creating it was helpful n your future endeavors.
