/ 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
Få to tekster til at flugte med hinanden..~
Fra : Kim Madsen


Dato : 25-11-09 14:51

Hej gruppe,

Der er to ting, som jeg ikke forstår ved det design, jeg har lavet på
følgende side: http://madsens.eu/test10/index10.htm - og håber at nogen kan
være behjælpelige med at gøre mig klogere.

Jeg har som en forhåbentlig hjælp indsat nogle kanter så elementerne kan
skelnes fra hinanden.

Koden er valideret via W3C.

1. Jeg forstår ikke, hvorfor teksten "FORRETNINGSKONCEPT" til venstre ikke
flugter med teksten "QUAL'TATIVE." til højre. Jeg vil gerne have toppen af
de to tekster til at flugte med hinanden. Jeg opererer med samme padding-top
på 45px for begge elementer (ul.navbar til venstre og .content til højre).
Er der et eller andet jeg overser - eller ikke forstår? Jeg kan godt få de
to tekster til at flugte med hinanden, hvis jeg bruger samme skriftstørrelse
(angivet i pixels) i de to bokse (ul.navbar og .content), men altså ikke når
teksterne har forskellig skriftstørrelse. Jeg har forsøgt mig med
vertical-alignment for at placere teksterne top eller bottom, men også uden
held.

2. Jeg forstår ikke, hvorfor boksen .content (markeret med sort kant til
højre) går ud over kanten nederst på boksen .box (den grønne boks), idet
både .box og .content har height = 300px. Igen - er der et eller andet jeg
overser eller ikke forstår? Boksen .nav-container til venstre har jeg også
sat til højden 300px og den holder sig da pænt inden for den grønne boks
(.box), som jo også har højden 300px.

Situationen er den samme uanset om jeg ser på siden i Firefox eller IE.

Kim


 
 
Jørgen Farum Jensen (25-11-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 25-11-09 17:38

Kim Madsen skrev:

> Koden er valideret via W3C.

Godt så. Det er den første forudsætning
for at man kan forholde sig konstruktivt
til problemet.

At siden validerer er imidlertid ikke
ensbetydende at CSS-koden er logisk
korrekt, se nedenstående.

> 1. Jeg forstår ikke, hvorfor teksten "FORRETNINGSKONCEPT" til venstre
> ikke flugter med teksten "QUAL'TATIVE." til højre. Jeg vil gerne have
> toppen af de to tekster til at flugte med hinanden. Jeg opererer med
> samme padding-top på 45px for begge elementer (ul.navbar til venstre og
> .content til højre). Er der et eller andet jeg overser - eller ikke
> forstår? Jeg kan godt få de to tekster til at flugte med hinanden, hvis

Det har nok noget at gøre med marginerne på henholdsvis
ul'en, dens indhold af li'er eller h1-overskriften, subsidiært
line-height.
Prøv med ul, ul.navbar li, .content h1 {
margin-top:0;padding-top:0; line-height: 100%;
}
Så vil du antagelig konstatere at de to elementer flugter
med overkanten af de to kasser. Så kan du indsætte den
fornødne luft i de to kasser ved at give dem en
padding-top.
> 2. Jeg forstår ikke, hvorfor boksen .content (markeret med sort kant til
> højre) går ud over kanten nederst på boksen .box (den grønne boks), idet
> både .box og .content har height = 300px. Igen - er der et eller andet
> jeg overser eller ikke forstår? Boksen .nav-container til venstre har
> jeg også sat til højden 300px og den holder sig da pænt inden for den
> grønne boks (.box), som jo også har højden 300px.

Jeg synes du overformaterer dine kasser. At sætte
højde på såvel en ydre kasse og på kassens indhold
er en ekstremt dårlig idé. Når du yderligere positionerer
nogle af kasserne absolut skal det næsten gå galt.

En CSS-kasse bør have den højde, indholdet betinger.
Har du to kasser ved siden af hinanden kan de per
definition aldrig blive lige højde. DU kan gøre noget
for at få dem til at /se ud/ som om de er lige høje,
se herom:
http://webdesign101.dk/www/layout/eks/eksempel_2.html

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

Kim Madsen (25-11-2009)
Kommentar
Fra : Kim Madsen


Dato : 25-11-09 18:12

Hej Jørgen,

Tak for dig svar.

Ift. pkt. 1: Jeg har i forvejen formateret de omtalte blokke med "margin:0"
og "padding:0", så det ændrer ikke noget at sætte "margin-top:0" og
"padding-top:0". Til gengæld ændrede det noget at sætte "line-height:100%" i
..content h1, så rykkede teksten til højre nogle pixels opad. Men jeg skal
åbenbart ikke bruge "line-height:100%" i ul og ul.navbar li, fordi så rykker
teksten i venstre side bare endnu højere op og så flugter de to tekster ikke
med hinanden. Lige nu ser det ud som om at de to tekster flugter med
hinanden. Det var rart - så tak.

Næste udfordring er så, at jeg faktisk gerne vil have første linje til
venstre til at være vertikalt centreret på linje med første linje til højre
Men første trin hér var at forstå, hvorfor de to tekster ikke kunne
flugte med hinanden. Ikke at jeg egentlig helt forstår, hvorfor de gør det
nu, men det gør de. Tror jeg skal have dykket lidt mere ned i det for rent
faktisk at forstå det. Er utilfredsstillende ikke at forstå, hvorfor der
sker det, der gør...

Ift. pkt. 2: Det kigger jeg videre på. Tak for linket.

Kim

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i meddelelsen
news:4b0d5d69$0$36564$edfadb0f@dtext01.news.tele.dk...
> Kim Madsen skrev:
>
>> Koden er valideret via W3C.
>
> Godt så. Det er den første forudsætning
> for at man kan forholde sig konstruktivt
> til problemet.
>
> At siden validerer er imidlertid ikke
> ensbetydende at CSS-koden er logisk
> korrekt, se nedenstående.
>
>> 1. Jeg forstår ikke, hvorfor teksten "FORRETNINGSKONCEPT" til venstre
>> ikke flugter med teksten "QUAL'TATIVE." til højre. Jeg vil gerne have
>> toppen af de to tekster til at flugte med hinanden. Jeg opererer med
>> samme padding-top på 45px for begge elementer (ul.navbar til venstre og
>> .content til højre). Er der et eller andet jeg overser - eller ikke
>> forstår? Jeg kan godt få de to tekster til at flugte med hinanden, hvis
>
> Det har nok noget at gøre med marginerne på henholdsvis
> ul'en, dens indhold af li'er eller h1-overskriften, subsidiært
> line-height.
> Prøv med ul, ul.navbar li, .content h1 {
> margin-top:0;padding-top:0; line-height: 100%;
> }
> Så vil du antagelig konstatere at de to elementer flugter
> med overkanten af de to kasser. Så kan du indsætte den
> fornødne luft i de to kasser ved at give dem en
> padding-top.
>> 2. Jeg forstår ikke, hvorfor boksen .content (markeret med sort kant til
>> højre) går ud over kanten nederst på boksen .box (den grønne boks), idet
>> både .box og .content har height = 300px. Igen - er der et eller andet
>> jeg overser eller ikke forstår? Boksen .nav-container til venstre har jeg
>> også sat til højden 300px og den holder sig da pænt inden for den grønne
>> boks (.box), som jo også har højden 300px.
>
> Jeg synes du overformaterer dine kasser. At sætte
> højde på såvel en ydre kasse og på kassens indhold
> er en ekstremt dårlig idé. Når du yderligere positionerer
> nogle af kasserne absolut skal det næsten gå galt.
>
> En CSS-kasse bør have den højde, indholdet betinger.
> Har du to kasser ved siden af hinanden kan de per
> definition aldrig blive lige højde. DU kan gøre noget
> for at få dem til at /se ud/ som om de er lige høje,
> se herom:
> http://webdesign101.dk/www/layout/eks/eksempel_2.html
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk
> .


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

Månedens bedste
Årets bedste
Sidste års bedste