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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS2: Vertical align
Fra : Jesper Stocholm


Dato : 27-07-03 22:33

Som I måske nok har opdaget, så sidder jeg og fedter med at lave en bjælke
af nogle absolut placerede DIVs. Jeg forsøger pt. at lave indholdet af mine
DIVs til at stå i midten vertikalt - men jeg er løbet ind i en blindgyde.

Jeg har lavet et eksempel, der illustrerer mit problem på [1].
Mit problem er ganske enkelt, at vertical-align:middle ikke ser ud til at
virke overhovedet. Jeg har kigget bla. på [2], og som jeg forstår

[...]Align the vertical midpoint of the box with the baseline of the parent
box plus half the x-height of the parent[...]

så vil det placere _selve_ DIV-elementet vertikalt i midten af parent-
elementet - og ikke selve _indholdet_ at DIV-elementet. Men hvordan
centrerer jeg så _indholdet_ af min DIV vertikalt? Det kan vel ikke være
meningen at jeg skal putte min DIV ind i en parent-DIV for at få det til at
virke - eller?

Jeg kan næsten regne ud, at der er noget jeg har misforstået ... men hvad?

[1] http://www.stocholm.dk/test/css/vertical.html
[2] http://www.w3.org/TR/CSS2/visudet.html#line-height

--
Jesper Stocholm - www.stocholm.dk

.... der gerne vil gøre usenet til et trygt sted at være.

 
 
benny larsen (28-07-2003)
Kommentar
Fra : benny larsen


Dato : 28-07-03 11:09

Jesper Stocholm wrote in dk.edb.internet.webdesign.html:
> Som I måske nok har opdaget, så sidder jeg og fedter med at lave en bjælke
> af nogle absolut placerede DIVs. Jeg forsøger pt. at lave indholdet af mine
> DIVs til at stå i midten vertikalt - men jeg er løbet ind i en blindgyde.
>
> Jeg har lavet et eksempel, der illustrerer mit problem på [1].
> Mit problem er ganske enkelt, at vertical-align:middle ikke ser ud til at
> virke overhovedet. Jeg har kigget bla. på [2], og som jeg forstår
>
> [...]Align the vertical midpoint of the box with the baseline of the parent
> box plus half the x-height of the parent[...]
>
> så vil det placere _selve_ DIV-elementet vertikalt i midten af parent-
> elementet - og ikke selve _indholdet_ at DIV-elementet. Men hvordan
> centrerer jeg så _indholdet_ af min DIV vertikalt? Det kan vel ikke være
> meningen at jeg skal putte min DIV ind i en parent-DIV for at få det til at
> virke - eller?
>
> Jeg kan næsten regne ud, at der er noget jeg har misforstået ... men hvad?
>
> [1] http://www.stocholm.dk/test/css/vertical.html
> [2] http://www.w3.org/TR/CSS2/visudet.html#line-height
>
> --
> Jesper Stocholm - www.stocholm.dk
>
> .... der gerne vil gøre usenet til et trygt sted at være.

det har jeg også forsøgt på, klaret det med tabel

opskrift: <table><tr><td valign="middle">.....

der kommer vel en CSS3 der løser dette problem..

/benny

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jesper Stocholm (29-07-2003)
Kommentar
Fra : Jesper Stocholm


Dato : 29-07-03 12:23

benny larsen <6c@vittinge.dk> wrote in message news:<bg2soa$gtj$1@sunsite.dk>...
> Jesper Stocholm wrote in dk.edb.internet.webdesign.html:
> > Som I måske nok har opdaget, så sidder jeg og fedter med at lave en bjælke
> > af nogle absolut placerede DIVs. Jeg forsøger pt. at lave indholdet af mine
> > DIVs til at stå i midten vertikalt - men jeg er løbet ind i en blindgyde.
> >
> > Jeg har lavet et eksempel, der illustrerer mit problem på [1].
> > Mit problem er ganske enkelt, at vertical-align:middle ikke ser ud til at
> > virke overhovedet. Jeg har kigget bla. på [2], og som jeg forstår
> >
> > [...]Align the vertical midpoint of the box with the baseline of the parent
> > box plus half the x-height of the parent[...]
> >
> > så vil det placere _selve_ DIV-elementet vertikalt i midten af parent-
> > elementet - og ikke selve _indholdet_ at DIV-elementet. Men hvordan
> > centrerer jeg så _indholdet_ af min DIV vertikalt? Det kan vel ikke være
> > meningen at jeg skal putte min DIV ind i en parent-DIV for at få det til at
> > virke - eller?
> >
> > Jeg kan næsten regne ud, at der er noget jeg har misforstået ... men hvad?
> >
> > [1] http://www.stocholm.dk/test/css/vertical.html
> > [2] http://www.w3.org/TR/CSS2/visudet.html#line-height
> >
> > --
> > Jesper Stocholm - www.stocholm.dk
> >
> > .... der gerne vil gøre usenet til et trygt sted at være.
>
> det har jeg også forsøgt på, klaret det med tabel
>
> opskrift: <table><tr><td valign="middle">.....

Hele øvelsen gik jo ud på at kunne lave det uden tabeller - men jeg
kan ikke hitte ud af hvordan. Jeg har lavet et endnu simplere eksempel
http://www.stocholm.dk/test/css/vertical-align-simple.html, hvor
jeg har lavet koden

..outer {
position:absolute;
top:300px;left:300px;height:100px;width:100px;
background:#ff0000;
text-align:center;
vertical-align:middle;
}
..inner {
background:#ffff00;
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
}

<div class="outer">
<div class="inner">Hej</div>
</div>

Men heller ikke her sker det ønskede. I spec står der bla.

[...]This property affects the vertical positioning inside a line box
of the boxes generated by an inline-level element.[...]

Nu er DIV jo ikke et inline element, men hvis jeg laver fx det ydre
element om til et inline element som span, så giver det heller ikke
noget resultat.

På siden kan også ses at jeg har bidt i det sure æble og lavet en
tabelbjælke i stedet i den lilla farve. Jeg synes ikke rigtigt at jeg
har tid til at rode med dette mere.



--
Jesper Stocholm
http://stocholm.dk

Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408941
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste