[Tb] Re: Tb for Photos

From: David J Garbutt <d.garbutt__AT__intergga.ch>
Date: Wed Feb 25 2004 - 16:39:16 EST

> As an aside, to any CSS mavens out there: Is there a way to centre and
> object within a division? I'd like a neat grid of thumbnails, for
> example, but not all of them will be the same size (portrait vs
> landscape, for one thing). So I was wondering whether it is possible to
> centre the image vertically and horizontally within a container div.
> Can't seem to find a way.

There is a fairly simple way to this, and I have to say although I don't
call my self a CSS maven I did work it out for myself :-)

Put each picture in a div, or a link, or a list item, or a definition list..
And then set a minimum width (20em, 100px or whatever) and set that tag to
be display: block and also float: left this makes them line up nicely
across but also wrap round if the browser window isn't wide enough.
If you use definition lists you can get an effect like a section header with
a separator effect. To do this you make the def. Terms block and the items
inside inline, but with float left.

Using dls or a tag you don't use anywhere else on the page makes the markup
simpler because then you don't need any class or ids in the tags.

For an example see www.tabatabai.ch (text is in German, code comments are in
English) on the first page there is a list of subject areas for mediation
that uses this technique. The site was also built with TB.

Code on page:
<dl> <dt>Privatpersonen </dt>
<dd>Trennung</dd>

<dd>Scheidung </dd><dd> Beziehungen </dd>
<dd>Familie </dd><dd>Erbschaft </dd><dd>Miete </dd>

<dt> Organisationen </dt> <dd> Vereine </dd><dd> Wirtschaft </dd><dd>
   Verwaltung </dd><dd>
 Gesundheitsbereich

</dd> <dt> Einzelpersonen </dt>
<dd> Pers&ouml;nlicher Wandel </dd>
<dd> bessere Kommunikation
</dd></dl>

CSS: (here there are other def lists used in the menus so we need a two
level rule )

.contentText dt {
    display: block;
    background-color: rgb(230,230,250) ;
    clear: both ;
    min-width: 10em;
     }
    
.contentText dd {
    display: inline;
    min-width: 10em;
    float:left;
    background-color: #FFCCCC;
    
    }

-- 
Dave Garbutt
Ingelsteinweg 4d
CH 4143 Dornach
+41 79 326 8970  (Home: 061 692 6349)
http://www.mybasel.ch/verkehr_regioplan_karte.cfm?ID=Strassen,14139&ParaZoom
&Zoom=3000
The shortest way out of Manchester is notoriously a bottle of Gordon's gin.
William Bolitho (1890 - 1930)
British writer. Attrib.
Received on Wed Feb 25 16:39:16 2004

This archive was generated by hypermail 2.1.8 : Wed Dec 14 2005 - 10:45:20 EST