/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Centreret billede
Fra : Jørgen Farum Jensen


Dato : 17-07-08 10:31

Jeg har en boks på 300 pixel x 300 pixel.
I denne boks indlæses nogle billeder af
forskellig størrelse (slideshow).

Billederne bliver aldrig større end de
kan rummes i boksen.

Jeg kan let centrere billederne vandret
i boksen med text-align:center. Til lodret
centrering bruger jeg

#boks {
   display:table-cell;
   vertical-align:middle;
   ...
}

Men så duer det jo ikke i Internet Explorer,
der ikke implementerer tabel display-egenskaber.

Jeg har tænkt lidt over at bruge et array
med de enkelte billeders dimensioner og så
billede for billede regne ud hvor det skal
placeres. Men det lyder som en lidt kluntet
fremgangsmåde.

Har nogen hørt/læst om en lile JS gimmick,
der kan implementere display:table-cell?

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

 
 
Martin (17-07-2008)
Kommentar
Fra : Martin


Dato : 17-07-08 11:07

Jørgen Farum Jensen wrote:
> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }
>
> Men så duer det jo ikke i Internet Explorer,
> der ikke implementerer tabel display-egenskaber.
>
> Jeg har tænkt lidt over at bruge et array
> med de enkelte billeders dimensioner og så
> billede for billede regne ud hvor det skal
> placeres. Men det lyder som en lidt kluntet
> fremgangsmåde.
>
> Har nogen hørt/læst om en lile JS gimmick,
> der kan implementere display:table-cell?
>

Måske du skulle prøve Dean Edwards IE7.js som den nu hedder
<http://code.google.com/p/ie7-js/>

Får IE5-7 til at efterligne CSS2 standarden
Her er ihvertfald hvad der er fixet
<http://ie7-js.googlecode.com/svn/test/index.html>

Martin (17-07-2008)
Kommentar
Fra : Martin


Dato : 17-07-08 11:09

Jørgen Farum Jensen wrote:
> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }

Får at få IE til at efterligne dette, har du så prøvet
#boks {
display:inline;
height:100%;
}

Dette skulle eftersigne give samme resultat som display:table-cell

>
> Men så duer det jo ikke i Internet Explorer,
> der ikke implementerer tabel display-egenskaber.
>
> Jeg har tænkt lidt over at bruge et array
> med de enkelte billeders dimensioner og så
> billede for billede regne ud hvor det skal
> placeres. Men det lyder som en lidt kluntet
> fremgangsmåde.
>
> Har nogen hørt/læst om en lile JS gimmick,
> der kan implementere display:table-cell?
>

Birger (17-07-2008)
Kommentar
Fra : Birger


Dato : 17-07-08 20:33

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:487f1148$0$90272$14726298@news.sunsite.dk...
> Jeg har en boks på 300 pixel x 300 pixel.
> I denne boks indlæses nogle billeder af
> forskellig størrelse (slideshow).
>
> Billederne bliver aldrig større end de
> kan rummes i boksen.
>
> Jeg kan let centrere billederne vandret
> i boksen med text-align:center. Til lodret
> centrering bruger jeg
>
> #boks {
> display:table-cell;
> vertical-align:middle;
> ...
> }
>
> Men så duer det jo ikke i Internet Explorer,
> der ikke implementerer tabel display-egenskaber.
>
> Jeg har tænkt lidt over at bruge et array
> med de enkelte billeders dimensioner og så
> billede for billede regne ud hvor det skal
> placeres. Men det lyder som en lidt kluntet
> fremgangsmåde.
>
> Har nogen hørt/læst om en lile JS gimmick,
> der kan implementere display:table-cell?
>
> --
>


Umiddelbart, skulle en onload, der sætter en top-margin som halvdelen af
(den til rådighed værende minus billedet), på img-elementet kunne klare det?

pic_elm = document.getElementById( 'img-elm');
onload=" pic_elm.style.marginTop = .5*(300-pic_elm.offsetHeight;)+'px';)"

Har ikke testet..

Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.



Søg
Reklame
Statistik
Spørgsmål : 177455
Tips : 31962
Nyheder : 719565
Indlæg : 6408144
Brugere : 218879

Månedens bedste
Årets bedste
Sidste års bedste