vertical-align på bilder i div [LØST med tables]

[anderlin]

Nå har jeg strevd og søkt mye, men har ikke funnet noen løsning på problemet mitt: Hvordan får jeg bildet på GAMMEL LINK til å få bunnen like langt ned som den nederste rød-stiplete linjen?

 

OBS! Løst ved hjelp av tables. Linken er ikke lenger relevant annet enn som en mulig løsning. Se heller skissen under:

 

Hvis kildekoden min er for rotete, her er en prinsippskisse:

 

------------------------------div-------------------------------------
-                   ---------------------------------------------------  -
-  -----------    -                           div                              -  -
-  -   bilde -    -                                                             -  -
-  -           -    -                                                             -  -
-  -----1-----    -                                                             -  -
-                    ------------------------2-------------------------  -
-                                                                                     -
----------------------------------------------------------------------

Hvordan få "1" like langt ned som "2", og begge i bunnen av div'en?

 

Takker for all hjelp!

Endret 23. februar 2005 av anderlin

[haugsand]

Vertical-align brukes til å styre den vertikale posisjonen til inline-element i forhold til hverandre på én og samme linje.

 

I dette tilfellet blir det enkleste å styre bildet lenger ned ved å legge til margin-top.

[anderlin]

Takk for svar!

Vertical-align brukes til å styre den vertikale posisjonen til inline-element i forhold til hverandre på én og samme linje.

Jeg vet det, jeg bare brukte vertical-align fordi det enklest forklarte hva jeg mente. Problemet er at jeg ikke vet høyden på bildet. Men hvis jeg ikke får det til, så får jeg bare kutte bildet.

Endret 9. januar 2005 av anderlin

[haugsand]

Ja, ulik høyde på bildene kan bli et problem. Vertical-align midtstiller også elementene i en tabell-celle vertikalt, men å legge til en div rundt bildet med display: table-cell, og tilpasse den, tror jeg er enda mer arbeid. Dessuten funker det ikke i IE heller.

Endret 9. januar 2005 av satyrium

[anderlin]

Det finnes ikke noe tilsvarende "strut" i Java; et element som fyller opp all tilgjengelig plass?

 

Jeg kan jo prøve med tables...

Endret 9. januar 2005 av anderlin

[anderlin]

Tables var løsningen!

 

Takk til satyrium for ideen.

 

Jeg satte en tabell rundt de innerste DIVene. og satte vertical-align: bottom; på <td>, og VIPS! så fungerte det i IE, FF og Opera (selv om Opera gjør litt andre ting rart med siden min).

[Steinmann]

han sa ikke at du skulle bruke table,

men du kan bruke display attributten til å gjøre

så en div får egenskaper ifra en table.

display: table;

det å bruke table blir helt feil mener jeg.

[Haraldson]

orsus: Han sa også at display:table-cell; ikke fungerer i IE, noe som er sant.

 

Er enig i at det ikke er en gunstig løsning, men det vil heller ikke «din» løsning være, siden en så stor andel av besøkende trolig benytter IE til å surfe...

Endret 9. januar 2005 av Mr.Berg

[anderlin]

han sa ikke at du skulle bruke table,

men du kan bruke display attributten til å gjøre

så en div får egenskaper ifra en table.

display: table;

det å bruke table blir helt feil mener jeg.

Takk for oppklaringen!

 

Den eneste forskjellen blir jo navnet på taggene, men jeg er enig i at det er bedre semantisk sett. Men siden det ikke fungerer i IE må jeg holde meg til table.

Endret 9. januar 2005 av anderlin

[Steinmann]

fungerer ikke display: table i ie? :o

sikker på at css og html er validert?

[Haraldson]

display: table-cell;

 

Og nei, IE støtter ikke det, uansett hvor mange ganger du validerer koden din.

Endret 9. januar 2005 av Mr.Berg

[Steinmann]

bah, liker ikke ie....

hvordan får man det til mot ie da?

tolker ikke den vertical-align: bottom; feil men på en måte som gjør at man oppnår det resultatet som er ønsket her?

[anderlin]

hvordan får man det til mot ie da?

Det lurer jeg også på!

 

Men er det ikke litt rart at CSS ikke støtter vertical-align på alle elementer? Er det en grunn til det?

Endret 9. januar 2005 av anderlin