---

Hej!

Jeg er lige stødt ind i et lille problem.

Jeg har lavet en tabel med et billede til venstre og noget tekst til
højre - jeg har lavet det i en tabel, da teksten skal være
vertical-align:middle altid, og det kunne jeg ikke rigtig få til at
virke med ul listen, som også kan ses i dokumentet.

Så derfor har jeg blevet nød til at importerer Dean Edwards IE7 for at
få IE til virke med td:hover

Så nu er spørgsmålet bare, hvordan får man linket til at skifte til hvid
når baggrunden ændres til den blå baggrund.

<http://aarhof.eu/newsgroup/html/verticalalign/>

Hvis der findes en anden løsning end den tabel eller ul liste jeg har
lavet, så er alt tilladt :)

---

Martin <maaNO@SPAMscandesigns.dk> skrev :

>Så nu er spørgsmålet bare, hvordan får man linket til at skifte til hvid
>når baggrunden ændres til den blå baggrund.

Du mener linktekst, det gør den jo, men kun på selve teksten.

Skal den gøre, når man rammer den blå baggrund, så skal linket
laves om til et block-element og der skal angives en width.

Med inline style ser det sådan ud, men det bør self. flyttes op i
den øvrige css.
<a style="display: block; width: 100%" href="#">Jobannoncer
(7)</a>
--
Kerim

---

Kerim Ellentoft wrote:
> Martin <maaNO@SPAMscandesigns.dk> skrev :
>
>> Så nu er spørgsmålet bare, hvordan får man linket til at skifte til hvid
>> når baggrunden ændres til den blå baggrund.
>
> Du mener linktekst, det gør den jo, men kun på selve teksten.
>
> Skal den gøre, når man rammer den blå baggrund, så skal linket
> laves om til et block-element og der skal angives en width.
>
> Med inline style ser det sådan ud, men det bør self. flyttes op i
> den øvrige css.
> <a style="display: block; width: 100%" href="#">Jobannoncer
> (7)</a>

Det hjalp en lille smule (se tabel 2), men desværre ikke nok - nu er det
kun bredden der fylder det hele blå areal, men ikke i højden, ses
tydeligt i jobannoncer (7)

højden er testet med
uden angivelse, auto og 100% - her der ingen forskel
ved 48px så rykker teksten op i toppen af tabellen, så den dutter heller
ikke.

---

"Martin" <maaNO@SPAMscandesigns.dk> skrev i meddelelsen
news:48e4f263$0$90269$14726298@news.sunsite.dk...

> Det hjalp en lille smule (se tabel 2), men desværre ikke nok - nu er det
> kun bredden der fylder det hele blå areal, men ikke i højden,

Lav denne ændring i CSS:

table.annonces2 a {
text-decoration:none;
color:black;
width:100%;
display:block;
padding:12px 0 12px 0;
}

table.annonces2 a:hover {
color:white;
padding:12px 0 12px 0;
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk

---

Erik Ginnerskov wrote:
> "Martin" <maaNO@SPAMscandesigns.dk> skrev i meddelelsen
> news:48e4f263$0$90269$14726298@news.sunsite.dk...
>
>> Det hjalp en lille smule (se tabel 2), men desværre ikke nok - nu er
>> det kun bredden der fylder det hele blå areal, men ikke i højden,
>
> Lav denne ændring i CSS:
>
> table.annonces2 a {
> text-decoration:none;
> color:black;
> width:100%;
> display:block;
> padding:12px 0 12px 0;
> }
>
> table.annonces2 a:hover {
> color:white;
> padding:12px 0 12px 0;
> }
>

Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
linjer boksen ikke vertical aligned.

---

Martin wrote:

> Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
> linjer boksen ikke vertical aligned.

Så giv den boks en anden class og ret padding-definitionerne til det passer.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk

---

Erik Ginnerskov wrote:
> Martin wrote:
>
>> Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
>> linjer boksen ikke vertical aligned.
>
> Så giv den boks en anden class og ret padding-definitionerne til det passer.

Er det den eneste mulighed som du ser, det er jo ikke til at se om hvor
meget tekst der er i en boks, og ej heller størrelsen på kundens tekst i
browseren, så det er jo ikke til at vide om det skal være den ene eller
den anden klasse (eller 3. for den sags skyld).

---

Martin skrev:
> Erik Ginnerskov wrote:
>> Martin wrote:
>>
>>> Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
>>> linjer boksen ikke vertical aligned.
>>
>> Så giv den boks en anden class og ret padding-definitionerne til det
>> passer.
>
> Er det den eneste mulighed som du ser, det er jo ikke til at se om hvor
> meget tekst der er i en boks, og ej heller størrelsen på kundens tekst i
> browseren, så det er jo ikke til at vide om det skal være den ene eller
> den anden klasse (eller 3. for den sags skyld).

Jeg har lidt svært ved at se, hvor det
er du vil hen, men måske kan denne side
være en inspiration:
http://webdesign101.dk/showcase/rollover/rollover_2.php

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

Jørgen Farum Jensen wrote:
> Martin skrev:
>> Erik Ginnerskov wrote:
>>> Martin wrote:
>>>
>>>> Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
>>>> linjer boksen ikke vertical aligned.
>>>
>>> Så giv den boks en anden class og ret padding-definitionerne til det
>>> passer.
>>
>> Er det den eneste mulighed som du ser, det er jo ikke til at se om
>> hvor meget tekst der er i en boks, og ej heller størrelsen på kundens
>> tekst i browseren, så det er jo ikke til at vide om det skal være den
>> ene eller den anden klasse (eller 3. for den sags skyld).
>
> Jeg har lidt svært ved at se, hvor det
> er du vil hen, men måske kan denne side
> være en inspiration:
> http://webdesign101.dk/showcase/rollover/rollover_2.php
>

Se, her er det meget nemt at se hvad jeg egentlig godt ville høre om var
muligt.

http://webdesign101.dk/showcase/rollover/rollover.html
Prøv at fjerne <br> fra erhversuddannelser i den grønne boks, som du så
kan se så er den hvide tekst ikke vertikalt centereret mere, og det er
præcis det som jeg ønsker at vide om egentlig er muligt på en eller
anden måde.

---

Martin skrev:
> Jørgen Farum Jensen wrote:
>> Martin skrev:
>>> Erik Ginnerskov wrote:
>>>> Martin wrote:
>>>>
>>>>> Det hjalp på det element hvor teksten kun fylder 1 linje, men nu er 2
>>>>> linjer boksen ikke vertical aligned.
>>>>
>>>> Så giv den boks en anden class og ret padding-definitionerne til det
>>>> passer.
>>>
>>> Er det den eneste mulighed som du ser, det er jo ikke til at se om
>>> hvor meget tekst der er i en boks, og ej heller størrelsen på kundens
>>> tekst i browseren, så det er jo ikke til at vide om det skal være den
>>> ene eller den anden klasse (eller 3. for den sags skyld).
>>
>> Jeg har lidt svært ved at se, hvor det
>> er du vil hen, men måske kan denne side
>> være en inspiration:
>> http://webdesign101.dk/showcase/rollover/rollover_2.php
>>
>
> Se, her er det meget nemt at se hvad jeg egentlig godt ville høre om var
> muligt.
>
> http://webdesign101.dk/showcase/rollover/rollover.html
> Prøv at fjerne <br> fra erhversuddannelser i den grønne boks, som du så
> kan se så er den hvide tekst ikke vertikalt centereret mere, og det er
> præcis det som jeg ønsker at vide om egentlig er muligt på en eller
> anden måde.

For at gøre det kort: Du kan kun bruge vertikal-align
på et inline element.
I det eksempel, du refererer til, kunne man for eksempel
sætte display-værdien for li-elementet til table-cell og
derved anvende vertical-align. Det er imidlertid en
blindgyde, for IE kan ikke tolke den display-værdi.

Derfor en den lodrette midtstilling i eksemplet foretaget
ved at give menuelementernes indhold af linktekster en
beregnet padding-top, mens br-elementet alene er indsat
for at sikre en for denne menu hensigtsmæssg orddeling.

Glem vertical-align - den er i praksis ikke noget værd
til layoutformål.


--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

Jørgen Farum Jensen skrev:

>> http://webdesign101.dk/showcase/rollover/rollover.html

Hov, det ser da sjovt ud i IE7 - billederne ligger ikke på
linje, det gør de i IE6 og alle andre steder.

--
Allan Vebel
http://html-faq.dk
http://vebel.dk

---

Allan Vebel skrev:
> Jørgen Farum Jensen skrev:
>
>>> http://webdesign101.dk/showcase/rollover/rollover.html
>
> Hov, det ser da sjovt ud i IE7 - billederne ligger ikke på
> linje, det gør de i IE6 og alle andre steder.
>
Tak fordi du gjorde mig opmærksom på det.
"Fejlen" skyldes at display-værdien for
li-elementet var sat til block i stedet
for inline.

--
Med venlig hilsen

Jørgen Farum Jensen
http://webdesign101.dk

---

On 3 Okt., 12:01, Martin <ma...@SPAMscandesigns.dk> wrote:

> Se, her er det meget nemt at se hvad jeg egentlig godt ville høre om var
> muligt.
>
> http://webdesign101.dk/showcase/rollover/rollover.html
> Prøv at fjerne <br> fra erhversuddannelser i den grønne boks, som du så
> kan se så er den hvide tekst ikke vertikalt centereret mere, og det er
> præcis det som jeg ønsker at vide om egentlig er muligt på en eller
> anden måde.

Bare et skud... Hvis jeg nu har forstået opgaven korrekt

display: table-cell; vertical-align: middle

....?

Den vil under alle omstændigheder ikke virke i alle browsere, men de
nyeste bør forstå den display-egenskab.

En mindre robust metode kunne være position: relative; top: 50%;

Ej testet, kun idéoplæg.

Ellers så prøv her:
http://www.student.oulu.fi/~laurirai/www/css/middle/

Eller generel Google-søgning:
http://www.google.dk/search?hl=da&q=vertical+align+css&btnG=Google-s%C3%B8gning&meta=

MVH
Rune Jensen

---

On 3 Okt., 23:30, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:

> Glem vertical-align - den er i praksis ikke noget værd
> til layoutformål.

Lyder fair nok.

Jeg har aldrig selv interesseret mig så meget for det, da jeg mener,
den naturlige "orden" er så tæt på toppen med indholdet som muligt.
Har aldrig været glad for det der designs, hvor man skal scrolle forbi
"luft" for at komme til det egentlige.

MVH
Rune Jensen