/ 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
Fundet elegant vertical text align løsning~
Fra : Poul Freeman


Dato : 18-08-04 18:05

Når man læser på nettet om hvordan man laver vertikalt text alignment,
så bliver folk henvist til

http://www.wpdfd.com/editorial/thebox/deadcentre1.html
http://www.wpdfd.com/editorial/thebox/deadcentre3.html

som er den del af
http://www.wpdfd.com/editorial/wpd0103.htm
(spændende læsning om HTML4/CSS)

Jeg tror, jeg har fundet en mere elegant måde(?):

HTML4:

<div class="footer"></div>
<div class="footertext">din tekst her</div>


CSS:

..footer{
background: URL(images/lines.png);
position: absolute;
left: 0px;
top: 50%; /* vertical center */
height: 30px;
margin-top: -15px; /* adjust vertical center with half of height */
width: 100%;
text-align: center;
}

..footertext{
position: relative;
top: 50%; /* vertical center */
margin-top: 6px; /* adjust vertical center with half of font-size=12 */
text-align: center;
}


I .footer gør jeg lige som ham, men i .footertext laver jeg "margin-top:
6px;" tricket, som giver mig verical alignment med fontet.





 
 
Anders Thorsen Holm (18-08-2004)
Kommentar
Fra : Anders Thorsen Holm


Dato : 18-08-04 18:25

Poul Freeman <spam@spam.spam> wrote:

> I .footer gør jeg lige som ham, men i .footertext laver jeg
> "margin-top: 6px;" tricket, som giver mig verical alignment med
> fontet.

Og hvis man forstørrer teksten eller den fylder mere end to linier,
falder det fra hinanden, da der er sat 'height: 30px' på .footer

--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/

Poul Freeman (18-08-2004)
Kommentar
Fra : Poul Freeman


Dato : 18-08-04 19:30

> Og hvis man forstørrer teksten eller den fylder mere end to linier,
> falder det fra hinanden, da der er sat 'height: 30px' på .footer

Ja, det er sådan lidt om man vil skydes eller hænges=)

Men i mit tilfælde er grafik billedet altid højere end antallet af
tekst linier. Det vil det f.eks. også være, hvis man har med
grafik-knapper at gøre. Så her er mit nemt af bruge.

I hans eks. synes jeg, man skal kende formange værdier (højde og bredde
af den usynlige kasse), hvor bredden er afhængig tekstens længde. Det er
en dårlig løsning, synes jeg.

Hvis man i hans eks. indsætter flere linier, så bliver de ikke vertikalt
centreret.

I mit eks. Hvis antallet af linier overgår højden af grafikbilledet, så
sker der vilkårlige ubehageligheder=) Men jeg tror aldrig, man
kommer i sådan en situation, hvor det kan være anvendeligt...? Altså at
grafik og tekst skal være vertikalt centreret, og grafik-billdets
højde er mindre end antallet af linier.






Tommy Ipsen (18-08-2004)
Kommentar
Fra : Tommy Ipsen


Dato : 18-08-04 20:34

Poul Freeman wrote:

> Når man læser på nettet om hvordan man laver vertikalt text alignment,
> så bliver folk henvist til
>
> http://www.wpdfd.com/editorial/thebox/deadcentre1.html
> http://www.wpdfd.com/editorial/thebox/deadcentre3.html
>
> som er den del af
> http://www.wpdfd.com/editorial/wpd0103.htm

Et alternativ kunne være:

http://css-discuss.incutio.com/?page=CenteringBlockElement

Der er også mange løsninger kombineret med respektive fordele og ulemper.

Mvh Tommy

Poul Freeman (20-08-2004)
Kommentar
Fra : Poul Freeman


Dato : 20-08-04 21:34

> Mvh Tommy

Det er faktisk en meget god side!

Jeg har fundet nogle flere muligheder:

http://www.student.oulu.fi/~laurirai/www/css/middle/
http://vmalek.murphy.cz/
http://www.hicksdesign.co.uk/journal/30/vertical-centering-with-css
http://www.w3.org/Style/Examples/007/center.html

Men den her er og blive den bedste!! =) Her er der ikke noget med at
trække lidt fra og korrigere for underlige tilfælde. Det virker bare!

http://www.w3.org/Style/Examples/007/center-example.html


Jens Gyldenkærne Cla~ (20-08-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-08-04 22:09

Poul Freeman skrev:

> Det virker bare!
>
> http://www.w3.org/Style/Examples/007/center-example.html

- ikke i IE.

Kan man leve med det, er det en fin løsning. Men de fleste vil nok
alligevel foretrække en løsning der også virker i IE.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Poul Freeman (21-08-2004)
Kommentar
Fra : Poul Freeman


Dato : 21-08-04 08:06

> Kan man leve med det, er det en fin løsning. Men de fleste vil nok
> alligevel foretrække en løsning der også virker i IE.

Ja, du har nok ret. Måske er nogle af de andre så "bedre".

Personligt er jeg lige glad med IE brugere, men det er selvfølgelig
svært, hvis man skal lave en side til primært IE brugere.



Jens Gyldenkærne Cla~ (21-08-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 21-08-04 09:13

Poul Freeman skrev:

> Personligt er jeg lige glad med IE brugere, men det er
> selvfølgelig svært, hvis man skal lave en side til primært IE
> brugere.

Jeg har ikke råd til at være ligeglad med IE-brugerne - det nytter
ikke noget at jeg fortæller min arbejdsgiver at grunden til at det
ser forkert ud i IE er at IE ikke forstår nok css, når 80-90 % af
brugerne benytter IE.

Jeg kunne formentlig langt lettere slippe af sted med at være
ligeglad med andet end IE-brugere (det er der jo desværre en del
der gør) - men det vælger jeg så ikke at være.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Poul Freeman (21-08-2004)
Kommentar
Fra : Poul Freeman


Dato : 21-08-04 09:31

> Jeg har ikke råd til at være ligeglad med IE-brugerne - det nytter
> ikke noget at jeg fortæller min arbejdsgiver at grunden til at det
> ser forkert ud i IE er at IE ikke forstår nok css, når 80-90 % af
> brugerne benytter IE.

Virksomheder er at gode grunde ikke lige glade=)

> Jeg kunne formentlig langt lettere slippe af sted med at være
> ligeglad med andet end IE-brugere (det er der jo desværre en del
> der gør) - men det vælger jeg så ikke at være.

Jeg tror der kommer til at vende om 2-3år. Der bliver MS nødt til at gå
med på Open Source, w3c og standarder generalt. IBM og Novell smider så
mange penge efter Linux, så det fatter man slet ikke.

IBM har f.eks. lige købt Mærsk Data til 2,5G kr =)



Jens Gyldenkærne Cla~ (22-08-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 22-08-04 21:39

Poul Freeman skrev:

> Jeg tror der kommer til at vende om 2-3år. Der bliver MS nødt
> til at gå med på Open Source, w3c og standarder generalt.

Jeg ved ikke om MS også vil hoppe med på Open Source-vognen, men
noget tyder på at de er ved at tage webstandarderne mere seriøst.

Dels kan seneste udgave af Frontpage lave såvel valid som
handikapgodkendt (508) kode - og hvis reklamemeldingerne om den
kommende version 2 af .NET er korrekte, skulle de samme muligheder
også komme til .NET-platformen med den kommende udgave (man kan
såmænd udmærket lave valid kode med .NET i dag, men mange
servercontroller laver langt fra valid kode "out of the box" - og
det skulle der blive rettet gevaldigt op på).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste