|
|
Posted by Jonathan N. Little on 09/07/06 14:20
dorayme wrote:
> I added a captioned version to the playing about on gallery
> layouts at
>
> http://tinyurl.com/nnkn2
>
> Was round at a friend and said clearly and distinctly (like the
> way Eliza Doolittle (Wendy Hiller) spoke after her training in
> Pygmalion) that I could not see how to do captions in the list
> format properly. The friend mumbled something hardly distinct,
> flashed a bit of css on a screen on which my eyes saw stuff
> displayed as block, something to do with the list floated. I
> mumbled something about "Oh yeah!" and had a go today on my
> machine. Tried this and that and it seems there is a combo that
> works to get captions into this...
>
> Sorry if this is all old hat to some of you...
>
> The list idea seems to me closer to the ideal of having a natural
> meaning in the html. I trust the floated div idea, but I am
> warming to the list one now that captions appear.... Anyone have
> any preferences in all this re these layouts or alternative
> strategies?
>
I an not sure what you are fretting about but looking at you markup I
would make a suggestion:
<div id="smallLandscape">
<div><a href="htmlBor/1.html"><img src="thumbs/1.jpg" width="150"
height="113" alt="thumbnail link"></a><br>Caption</div>
^^^^
Remove this BR element here and you can have more flexibility in for
styling. You do not need it, because you can easily replicate what you
have with your CSS and great an 'Anonymous Block'
<http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level>
All you have to do is in your CSS
..smallLandscape DIV { /the styling of each thumbnail/ }
..smallLandscape DIV A {
display: block;
/* this will make your thumbnail link a block which you can
independently style as you wish borders, padding, margin etc, and it
makes an anonymous block of your following text 'your caption' */
}
This advantage is if you wish not to have your captions underneath you
thumbnails you can do so without changing you markup but only changing
your CSS. Dumping the 'display: block' on your A can put the caption
beside your thumbs. You can vertical align caption with images making
the div
..smallLandscape DIV { display: table-cell; }
..smallLandscape DIV IMG { vertical-align: middle; } /*
top|bottom|baseline... */
even more styling flexibility with no markup changes...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|