/ 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
DIV drillerier
Fra : Stefan Kristensen


Dato : 05-07-04 18:16

Hej NG.

Jeg har kastet mig ud i den forunderlige CSS verden

På en side har jeg 5 DIV'er: div1 - div5. Div 3 og 4 ligger i div 2.
Alle div'erne har class="divtest"
I mit stylesheet har jeg defineret div3 og 4 som float: left;
Mellem div 2 og 5 vil jeg gerne have to knapper.

Siden kan ses på www.jems.dk/divs.html og stylesheet'et ligger på
www.jems.dk/css/stytes.css

Hvorfor ligger knapperne hvor de gør?
Hvis jeg indsætter et tomt div (med class="divtest") mellem div 2 og
knapperne, kommer de ned på plads, men margener bliver lidt underlige.
Kan jeg få knapperne på plads ved at justere det eksisterende stylesheet?

mvh
Stefan



 
 
Bertel Lund Hansen (05-07-2004)
Kommentar
Fra : Bertel Lund Hansen


Dato : 05-07-04 18:33

Stefan Kristensen skrev:

>På en side har jeg 5 DIV'er: div1 - div5. Div 3 og 4 ligger i div 2.
>Alle div'erne har class="divtest"

Det er en forvirrende måde at gøre det på. Brug i stedet det her
skema:

..divtest1, .divtest2, .divtest3 ... {
   alt det fælles;
}

..divtest1 {
   det særlige ved 1'eren;
}

.... osv.

>Hvorfor ligger knapperne hvor de gør?

Fordi de må pænt følge efter de floatede elementer, in casu div3
og div4.

>Hvis jeg indsætter et tomt div (med class="divtest") mellem div 2 og
>knapperne, kommer de ned på plads

Ja, for den indeholder en clear:both-kommando der tvinger alt det
følgende ned under de to 'tekster'.

>Kan jeg få knapperne på plads ved at justere det eksisterende stylesheet?

Lav det om. Det er forvirrende at give samme klasse til elementer
der skal opføre sig forskelligt. Med min opskrift kan du også
nøjes med en specifikation i koden:

<div class='divtest1'>
   blablablabla
</div>

Hvis knapperne skal cleare de øverste indhold, så lave en klasse
til dem med clear:both;, og så sæt marginerne også så du får de
rigtige værdier. Det er ikke sikkert at alle browseres
standardværdier er de samme.

PS. Jeg bruger konsekvent klasser til alting i CSS. Id bruger jeg
kun i koden til punkter som man skal kunne linke til.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

Stefan Kristensen (05-07-2004)
Kommentar
Fra : Stefan Kristensen


Dato : 05-07-04 19:27

> Det er en forvirrende måde at gøre det på.
Der er en dybere mening med det. Div'erne skal bruges til at gruppere nogle
elementer på siden. Da alle de overordnede div'er skal have de samme
egenskaber, er det vel naturligt at give dem den samme klasse?
Div 2 skal så indeholde to grupper ved siden af hinanden Om de to grupper så
skal have en seperat klasse eller bare formateres efter id er måske en
smagssag?

> Brug i stedet det her skema:
> .divtest1, .divtest2, .divtest3 ... {
> alt det fælles;
> }
Når nu div1, 2 og 5 skal have de samme egenskaber, er det vel naturligt at
de har den samme klasse?

> .divtest1 {
> det særlige ved 1'eren;
> }
Igen: Er det ikke en smagssag om man bruge klasse eller id?

> Fordi de må pænt følge efter de floatede elementer, in casu div3
> og div4.
Jamen div3 og div4 ligger jo i div2, der har clear: both;?

> Hvis knapperne skal cleare de øverste indhold, så lave en klasse
> til dem med clear:both;, og så sæt marginerne også så du får de
> rigtige værdier. Det er ikke sikkert at alle browseres
> standardværdier er de samme.
Det bliver løsningen

> PS. Jeg bruger konsekvent klasser til alting i CSS. Id bruger jeg
> kun i koden til punkter som man skal kunne linke til.
Det forstår jeg. Id i div 1, 2 og 5 er også bare for at tydeliggøre mit
eksempel.

mvh
Stefan



Bertel Lund Hansen (05-07-2004)
Kommentar
Fra : Bertel Lund Hansen


Dato : 05-07-04 21:53

Stefan Kristensen skrev:

>elementer på siden. Da alle de overordnede div'er skal have de samme
>egenskaber, er det vel naturligt at give dem den samme klasse?

Hvis de skal have præcis samme egenskaber, skal de også have
samme navn. Hvis de skal have forskellige egenskaber, skal de
have forskellige navne.

Det er nok din brug af # og id der har ført dig på vildspor, for
id skal være unik. Det skal en klasse ikke.

>Div 2 skal så indeholde to grupper ved siden af hinanden Om de to grupper så
>skal have en seperat klasse eller bare formateres efter id er måske en
>smagssag?

[1]
Det kommer an på hvad du kalder smagssag. Meget kan bringes til
at virke og validere, men hvis du vil gøre det sp nemt som muligt
at overskue koden, samler du ens elementer i en klasse.

>Når nu div1, 2 og 5 skal have de samme egenskaber, er det vel naturligt at
>de har den samme klasse?

.... men unaturligt at de hedder noget forskelligt.

>
>> .divtest1 {
>> det særlige ved 1'eren;
>> }

>Igen: Er det ikke en smagssag om man bruge klasse eller id?

Nej - [1].

>> Fordi de må pænt følge efter de floatede elementer, in casu div3
>> og div4.
>Jamen div3 og div4 ligger jo i div2, der har clear: both;?

Ja, og derfor clearer 2'eren også alt hvad der kommer før den -
men ikke det der kommer efter.

Væn dig til at lave mellemrum før {. Det er af hensyn til IE.

Her er CSS og HTML som jeg ville lave det. Så er det nemmere at
se hvilke elementer der får den samme opsætning på skærmen:

body {
background-color: #0000ff;
}

..divtest {
margin-bottom: 10px;
background-color: #ff0000;
clear: both;
}

..div34 {
float: left;
clear: none;
margin: 0 10px 0 0;
background-color: #00ff00;
}


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>DIV-drillerier</title>
<link href="css\styles.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
>
</head>

<body>
<div class="divtest">
Tekst i DIV 1
</div>

<div class="div34">
Tekst i DIV 3
</div>
<div class="div34">
Tekst i DIV4
</div>

<input type="button" value="Knap 1">
<input type="button" value="Knap 2">

<div class="divtest">
Tekst i DIV 5
</div>

</body>
</html>








--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

Stefan Kristensen (06-07-2004)
Kommentar
Fra : Stefan Kristensen


Dato : 06-07-04 09:53

Ok. Jeg forstår dine argumenter, og er egentlig også enig med dig.

> Væn dig til at lave mellemrum før {. Det er af hensyn til IE.
Et lille trick, dér. Takker

> Her er CSS og HTML som jeg ville lave det. Så er det nemmere at
> se hvilke elementer der får den samme opsætning på skærmen:
Det giver helt sikkert mening.
Tak for din tid.

mvh
Stefan



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

Månedens bedste
Årets bedste
Sidste års bedste