|
Posted by Els on May 16, 2005, 11:22 am
Please log in for more thread options
Rennie deGraaf wrote:
> Els wrote:
>> Rennie deGraaf wrote:
>>
>>
>>>I'm working on this page
>>>(http://pages.cpsc.ucalgary.ca/~degraaf/test/test.html). In the central
>>>(green-bordered) area, I want a bunch of (red-bordered) blocks each
>>>containing a thumbnail image and some text. The blocks must be of
>>>fixed, equal size. (Obviously, I'll have to limit the amount of text to
>>>fit this size.) The text must be positioned below the image. Within
>>>the central area, I want these blocks to flow like text; ie, for each
>>>one to be positioned to the right of the previous one until no more
>>>horizontal space is available, and then resuming below at the far left.
>>> I want this layout to adapt to the size of the browser window, so using
>>>absolute positioning is out.
>>>
>>>However, if I define these blocks as block elements, I can't get them to
>>>flow. If I define them as inline elements, the captions flow with the
>>>images rather than staying below.
>>>
>>>How can I define these blocks to get the layout that I described?
>>
>>
>> Set "float:left;" for each block.
>>
>> An example (using 2 celled tables, but it should work for divs as
>> well):
>> http://locusmeus.com/test/thumbswithcaptions.html
>>
>
> Thanks, that worked. Now, for my next question.
>
> I have a bunch of image thumbnail DIVs, as described above, flowing like
> text inside a fixed-size container DIV
> (http://pages.cpsc.ucalgary.ca/~degraaf/test/index2.html). I would like
> each line of these thumbnail DIVs to be centered within the container,
> like a center-aligned paragraph of text.
>
> I tried containing the thumbnail DIVs within another DIV with
> margin-right=margin-left=auto and text-align=center, but it didn't work
> unless I hard-coded the width. Since the width depends on the width of
> the browser window, I can't do this in general. I could calculate the
> width of the minimum bounding box at view-time with JavaScript, I
> suppose, but I'd rather not if there's any better way.
>
> How can I achieve this effect using HTML/CSS?
<http://locusmeus.com/test/thumbswithcaptionscentered.html>
Widths won't be preserved in Gecko browsers as you can see.
(unless the pics are all of equal width)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| 
XML Sitemap