PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

CSS Lege divs

Door Marco op 17-11-2008 14:53
1.673 views
Gegeven is de volgende pagina:
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:

<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>

Met de volgende stylesheet:

.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;
}

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
L Leen M
17-11-2008 14:56
Als je &nbsp; in de lege div zet, laat firefox hem niet weg

Met min-height kan je minimale hoogte opgeven.
M Michael Voeten
17-11-2008 15:30
waarom doe je niet gewoon

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;
}
M Marco
17-11-2008 15:43
Ok, ik heb met een combinatie van jullie advies het volgende gemaakt:

.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;
}


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?
L Leen M
17-11-2008 15:50
Je bedoelt dat de balkjes moeten doorlopen naar beneden?
Zorg dat de div de goede hoogte heeft en laat het achtergrondplaatje doorlopen naar beneden.
evt. met behulp van background-repeat:

.content_right {
    background-image: url('../images/content_right.png');
    background-repeat: repeat-y;
    float: right;
}

M Marco
17-11-2008 15:53
Das het probleem, de backround repeat wel, maar de div loopt niet tot beneden. Dus hoe kan ik die tot onder krijgen?
M Michael Voeten
17-11-2008 16:35 

 body, html { height:100%; width:100%; }
 .content { height:100%; }
M Marco
17-11-2008 16:46
Nu heb ik met de height optie die MikeY voorstelde de bende een hoogte gegeven, die door de randen netjes gevolgd wordt. Maar als ik min-height gebruikt, wat nodig is, stretched de rand niet meer mee, waar ligt dat aan?
M Michael Voeten
17-11-2008 16:47
wat is dan precies de bedoeling met die rand ?
moet die 2 pixels van de zijkant komen van de div ?
M Marco
17-11-2008 16:54
De rand moet er zo uitzien:
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?

Reageren

Inloggen om te reageren