CSS Lege divs
http://dev.themadman.nl/index.php?template=Karima
Internet Explorer maakt een blauw vak met aan beide kanten een klein groen vak, ongeveer zoals het moet. Firefox laat de linkerkant echter weg, omdat dat een lege div is:
Code (php)
1
2
3
4
5
2
3
4
5
<div class="content">
<div class="content_left"></div>
<div class="content_center">Lorum<br />Ipsum<br />dolar<br />sit</div>
<div class="content_right">a</div>
</div>
<div class="content_left"></div>
<div class="content_center">Lorum<br />Ipsum<br />dolar<br />sit</div>
<div class="content_right">a</div>
</div>
Met de volgende stylesheet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content_left {
background-color: green;
float: left;
width: 7px;
}
.content_center {
background-color: blue;
float: left;
margin-left: 7px;
text-align: center;
width: 1086px;
}
.content_right {
background-color: green;
float: left;
width: 7px;
}
background-color: green;
float: left;
width: 7px;
}
.content_center {
background-color: blue;
float: left;
margin-left: 7px;
text-align: center;
width: 1086px;
}
.content_right {
background-color: green;
float: left;
width: 7px;
}
Hoe krijg ik die lege div zichtbaar in Firefox? Het gaat een border-background over de hoogte bevatten. Daarnaast is de hoogte altijd zo klein mogelijk, tot waar de tekst ophoud. Hoe kan ik de div's een minimale hoogte geven? Het resultaat moet schematisch ongeveer zo worden: http://dev.themadman.nl/layout.jpg
Gewijzigd op 01/01/1970 01:00:00 door Marco
Met min-height kan je minimale hoogte opgeven.
Gewijzigd op 01/01/1970 01:00:00 door Leen M
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
content {
display:block;
width: 490px /* 500px met 5 px aan beide kanten voor borden */
height:300px;
background:blue;
border-color:green;
border-left:5px solid;
border-right: 5px solid;
}
display:block;
width: 490px /* 500px met 5 px aan beide kanten voor borden */
height:300px;
background:blue;
border-color:green;
border-left:5px solid;
border-right: 5px solid;
}
Gewijzigd op 01/01/1970 01:00:00 door Michael Voeten
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.content {
display: block;
float: left;
width: 1086px;
min-height : 100px;
background-color: #222222;
}
.content_left, .content_right {
background-color: #000000;
height: 100%;
width: 7px;
}
.content_left {
background-image: url('../images/content_left.png');
float: left;
}
.content_center {
float: left;
}
.content_right {
background-image: url('../images/content_right.png');
float: right;
}
display: block;
float: left;
width: 1086px;
min-height : 100px;
background-color: #222222;
}
.content_left, .content_right {
background-color: #000000;
height: 100%;
width: 7px;
}
.content_left {
background-image: url('../images/content_left.png');
float: left;
}
.content_center {
float: left;
}
.content_right {
background-image: url('../images/content_right.png');
float: right;
}
Wat resulteerd in dit:
http://dev.themadman.nl/index.php?template=Karima
Dit is bijna wat ik zoek, maar de randen worden nog niet over de hele hoogte gestretched, hoe krijg je dat voor elkaar?
Zorg dat de div de goede hoogte heeft en laat het achtergrondplaatje doorlopen naar beneden.
evt. met behulp van background-repeat:
Code (php)
1
2
3
4
5
2
3
4
5
.content_right {
background-image: url('../images/content_right.png');
background-repeat: repeat-y;
float: right;
}
background-image: url('../images/content_right.png');
background-repeat: repeat-y;
float: right;
}
Code (php)
1
2
2
body, html { height:100%; width:100%; }
.content { height:100%; }
.content { height:100%; }
moet die 2 pixels van de zijkant komen van de div ?
http://dev.themadman.nl/index.php?template=Karima
Je ziet de afbeelding niet heel goed, maar het is geen simpele zwarte rand, er zitten lijntjes tussen, maar die komen pas in de uiteindelijke versie tot uiting.
Nu heb ik de heights fixed staan, maar dat moet dus gaan stretchen. De middelste kolom moet een min-height krijgen, wegens een achtergrond afbeelding. Als ik echter een min-height toevoeg, stretched te rand niet meer en blijft die 1 tekstregel hoog.
Edit: Andere aanpak, ik heb een table versie gemaakt;
http://dev.themadman.nl/test.html
Tevens moet de hoogte een minimale waarde krijgen.
Dus hoe maak ik hier een css versie van?
Gewijzigd op 01/01/1970 01:00:00 door Marco