Gelé-layout model 3

Den første udgave af dette eksempel var behæftet med to fejl, som jeg hurtigt fik rapport om fra interesserede læsere.

Fejl nr 1 var knyttet til de links, du se lige herunder, og som ikke fungerede helt efter hensigten i nogle browsere.

Årsagen til fejlen var noget regulært sjusk fra min side, en class der var knyttet til de to normalt skjulte tekstelementer i hhv. venstre og højre spalte. Fejlen er nu rettet, således at de tre links viser noget ekstra tekst i en af de tre spalter ved det første klik, og skjuler denne tekst igen ved det andet klik.

Fejl nr. 2 er nok så alvorlig og knytter sig til den ønskede effekt af de tre links, jeg netop har nævnt: Meningen er jo, at ekstra tekst i én af kolonnerne skal skubbe underkanten af alle tre kolonner nedad, så der skabes en illusion af lige høje kolonner, uanset hvilken kolonne, der har mest indhold.

Det princip, der ligger bag, er nøjagtigt det samme som er anvendt i artiklen om dét emne: 3 lige høje spalter med CSS, især denne artikels eksempel 3. Og troligt nok fejler dette eksempel også, hvis en af følgende ældre browsere anvendes: Netscape 7, Firefox 1.0.7, Mozilla 1.0.

Det er en ringe trøst, at dette også gælder for forlægget, The Jello Mold Piefecta.

Sagen er meget enkel: De tre nævnte browsere, og muligvis også andre browsere, som jeg ikke har mulighed for at teste i, udvider ikke en omsluttende boks med et float'et element i henhold til det float'ede elements indhold..

Hvad kan jeg sige? Jeg er ked af, at jeg ikke har teste dette igennem før jeg offentliggjorde artiklen, og i det mindste gjorde opmærksom på problemet.

Teksten i denne kolonne er indsat først i kildekoden.

Vis/skjul tekst i venstre kolonne.
Vis/skjul tekst i midterste kolonne.
Vis/skjul tekst i højre kolonne.


Dette layout er en 3-spaltet udførelse af de principper, jeg har redegjort for i artiklerne Gelé-layout og Gelé-layout model 1.

Browserkompabilitet

Dette layout er testet i følgende browsere: Internet Explorer 5, Internet Explorer 5, Firefox 1.0.7*, Firefox 1.5, Mozilla 1*, Mozilla 1.7, Opera 7.5, Opera 8.0, Netscape 7* og Netscape 4.75.

De browsere, der er mærket med *, øger ikke websidens højde, hvis indholdet i venstre eller højre spalte overstiger højden af indholdet i den midterste spalte.Netscape 4 viser websidens tekst i den orden, teksten forekommer i kildekoden.

Elasticiteten

Begge de to sidekolonner har en fikseret bredde på 200 pixel. Det kan du ændre på i styleesheet'et for layoutet. Idéen med gelé-layoutet ses nu på bredden af den midterste spalte – den er 340 pixel bred hvis browservinduet er 800 pixel bredt, men "kun" 540 pixel bred, hvis browservinduet er 1280 pixel bredt.

Ens kolonnehøjde

Ved at bruge linksene herover kan du let konstatere, at websidens højde ændres, således at det altid er den kolonne, der har det meste indhold, der bestemmer, hvor høj websiden skal være. Sidefoden skubbes ned, uanset hvilken kolonne, der har det meste indhold.

Dette aspekt af layoutet fremhæves af de grafiske baggrunde. En diskussion af de principper, der ligger bag dette, kan du finde i artiklen 3 lige høje spalter med CSS.

Orden i kildekoden

En del websidekonstruktører – heriblandt mig selv – går op i den orden, hvormed 2 eller flere spalter optræder i kildekoden. Dette layout er baseret på float-egenskaben, hvilket gør det muligt at variere vilkårligt på denne orden.

Her kommer artiklen i den midterste spalte først i kildekoden, dernæst venstre spalte og til sidst højre spalte.

Stylesheet

Denne side bygger i vidt omfang på Piefecta eksempelsiden The Jello Mold Piefecta. Det modificerede stylesheet til denne side finder du her: jello3col.css. Der er en del kommentarer i stylesheet'et.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.

Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et, sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem. Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede. Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper eros in justo. Nulla vel mauris.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Gelé layout

This column has a problem at some window widths when viewed in Gecko browsers, due to 1px rounding errors. Observe the links and heading closely while dragging the window width in Gecko, and you will see those items jiggling back and forth by 1px.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.