Lijn naar onder na float left?
Wanneer ik volgende code gebruik:
Code (php)
1
2
2
<div class=\"titlemidblspace\">Titel</div>
<div class=\"lucidaspace\">Tekst hieronder</div>
<div class=\"lucidaspace\">Tekst hieronder</div>
en
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.titlemidblspace
{
FONT-SIZE: 18px; COLOR: #3a3a3a; FONT-FAMILY: Arial; FLOAT: LEFT; PADDING-TOP: 30px; PADDING-BOTTOM: 16px;
}
.lucidaspace
{
LINE-HEIGHT: 20px; FLOAT: LEFT;
}
{
FONT-SIZE: 18px; COLOR: #3a3a3a; FONT-FAMILY: Arial; FLOAT: LEFT; PADDING-TOP: 30px; PADDING-BOTTOM: 16px;
}
.lucidaspace
{
LINE-HEIGHT: 20px; FLOAT: LEFT;
}
Krijg ik in Mozilla en Chrome hetgeen wat ik wil, dus :
Titel
Tekst hieronder
Maar wanneer ik Internet explorer gebruik, krijg ik het volgende:
TitelTekst hieronder
Hij zet dus de tekst er gewoon achter, weet iemand hoe ik dit kan oplossen?
Verder: schrijf je css niet met hoofdletters maar met kleine letters en onder elkaar. Gebruik de verkorte schrijfwijze voor je padding:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.titlemidblspace {
font-size:18px;
color:#3a3a3a;
font-family:Arial;
padding:30px 0 16px;
}
.lucidaspace {
line-height: 20px;
}
font-size:18px;
color:#3a3a3a;
font-family:Arial;
padding:30px 0 16px;
}
.lucidaspace {
line-height: 20px;
}
In plaats van een aparte class voor je titel en je tekst te gebruiken is het beter om symantische opmaak te gebruiken met een header element als titel en het paragraph element voor je tekst.
Code (php)
1
2
3
4
2
3
4
<h1>Titel</h1>
<p>
Hier komt je tekst.
</p>
<p>
Hier komt je tekst.
</p>
Je css moet je dan ook aanpassen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
h1 {
font-size:18px;
color:#3a3a3a;
font-family:Arial;
padding:30px 0 16px;
}
p {
line-height: 20px;
}
font-size:18px;
color:#3a3a3a;
font-family:Arial;
padding:30px 0 16px;
}
p {
line-height: 20px;
}
The Force op 13/07/2011 20:34:06:
Heb je al geprobeerd "display: inline;" en/of "position: relative;" toe te voegen? IE gaat raar om met floats.
Die floats moeten daar helemaal niet staan. Hij wil dat de titel en de tekst onder elkaar komen te staan.
Gewijzigd op 13/07/2011 20:37:52 door Ozzie PHP
Toevoeging op 13/07/2011 20:57:22:
Mm, wat als ik binnen die H1 code bijvoorbeeld 1 woord in een ander kleur wil zetten? Moet ik dan een aparte div voor dit woord zetten of hoe pak ik dit het best aan?
Code (php)
1
2
3
2
3
h1 span {
color:red;
}
color:red;
}
