Sent by Adam Kuehn on 11 September 2004 22:10
For brevity, I have snipped prior posts entirely. For those
following along, please check the archives.
So you want the pictures, with glyphs and text beneath, to appear
side-by-side, followed by the horizontal rule, is that right? I ask
because I tried your page on Netscape 7.1 (Mozilla 1.4 equivalent),
Safari 1.2, and Mac IE 5.2.3 and they all stacked the photo/glyphs
vertically. Assuming want the groups side-by-side, I would entirely
rework your page.
Here's a basic outline of what I would try to do:
HTML:
<div class="row">
<div class="photogroup">
<img class="photo" />
<div class="glyphgroup">
<img class="glyph" /><img class="glyph" /><img class="glyph" />
</div>
<p class="caption">text</p>
</div>
<div class="photogroup">
<img class="photo" />
<div class="glyphgroup">
<img class="glyph" /><img class="glyph" /><img class="glyph" />
</div>
<p class="caption">text</p>
</div>
<p class="comment">row text</p>
</div>
<hr />
<div class="row">
[etc.]
CSS:
..row { width: /*whatever*/; }
..photogroup { float: left; width: /*whatever*/; }
..photo { float: left; }
..glyphgroup { float: left; clear: left; }
..glyph { float: left; }
..caption { clear: left; }
..comment { clear: left; }
I haven't tested this extensively, but I know it works. Note that it
is greatly different from what you have done. Take some time to
study it, and make sure you can figure out why it works.
In particular, see how I have grouped the photo image, associated
glyph images, and caption into a separate div. I used div, not span,
because a div is a block element by default. Because you want each
photo group to appear side-by-side, I have floated the entire group
but have not set it to clear anything. (The default is no clearing.)
Note that within the each photo group, I have also added an interior
div in order to group the line of glyphs.
Inside each floating photo group, I have floated first the photo,
then the glyph group. However, the glyph group needs to appear on a
new line, so I set it to clear the prior float to its left. Within
the glyph group, each glyph is floated, but since you want those to
appear side-by-side, I did *not* clear those. Now they appear on a
new line, but side-by-side. Then the caption appears in the normal
flow, but again, you wanted a new line, so I set it to clear the
prior left floats.
After both photo groups, but still within the primary row div, I
placed the overall row comment. Again, it appears in the normal
flow, but because it needs a new line, it is set to clear the left
floats. Then the row div closes. The rows themselves need virtually
no styling, unless you want to specify a width. I have placed the
horizontal rules between the rows, so that they will extend the width
of the page regardless of any width assigned to the row.
Note that I have used classes that 1) are completely independent of
each other and 2) describe the role that their respective elements
play on the page. There is no inheritance from one class to another
to worry about, and each class can be altered entirely independently
of the others. Note that while I could, for example, have chained
some selectors with identical rules (e.g. .caption and .comment), I
have resisted the temptation to do so in order to keep the roles for
each class clear and independent. If you need to optimize your css,
you put these together later, just prior to upload. *Don't* do it
during development!
If you have any questions about why I have done it this way, just
ask. I hope this sample helps you complete your design.
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
