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

drie divjes!

Door Simon Blok op 12-10-2006 20:35
351 views
Ik zit even met een probleempje. Ik krijg het volgende niet voor mekaar:
Naast elkaar staan 3 divjes waar drie afbeeldingen instaan. De middelste div is de belangrijkste, deze moet in het midden staan, de breedte is afhankelijk van de afbeelding die erin staat, links en rechts van deze div staan dan weer de andere divs met hun afbeeldingen, deze mogen buiten het scherm vallen. Ik kom hier echt niet uit. Ik heb het volgende:
HTML:

<div id="container">
	<span id="links">
		links
	</span>
	<span id="midden">
		<img src="fotos/image2.jpg" />
	</span>
	<span id="rechts">
		rechts
	</span>
</div>


CSS:

#links
{
	border:1px solid;
	float:left;
	margin-left:-6px;
	height:100%;
	overflow:hidden;
}

#midden
{
	border:1px solid;
	height:100%;
	overflow:hidden;
	margin:auto;

}

#rechts
{
	border:1px solid;
	height:100%;	
	overflow:hidden;	
	float:right;
}
A
ArendJan
12-10-2006 20:41
Waarschijnlijk gaan de divs niet lekker staan. Dat komt doordat je links en rechts wel een position meegeeft. Maar het midden niet. Dat kan trouwens dan ook niet.... Of heb ik het mis?
S
Simon Blok
12-10-2006 20:47
id midden wil ik in het midden zetten, dit probeerde ik met: margin:auto; maar dat werkt dus niet echt lekker, en die float:right; werkt ook niet
Joren de Wit
12-10-2006 21:27
Ik weet het niet zeker, maar werkt het wel met <span>? In onderstaand voorbeeld heb ik divs gebruikt:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#links
{
    border:1px solid;
    float:left;
    height:100%;
	width:100px;
    overflow:hidden;
}

#midden
{
	border:1px solid;
	width: 500px;
	margin: 0px auto;
}

#rechts
{
    border:1px solid;
    height:100%;    
    overflow:hidden;
	width:100px;    
    float:right;
}
</style>
</head>

<body>
<div id="container">
    <div id="links">
        links
    </div>
	<div id="rechts">
        rechts
    </div>
    <div id="midden">
        midden
    </div>
</div>
</body>
</html>
S
Simon Blok
12-10-2006 21:43
Yep, dat is em! Volgende vraag ;-) Hoe lijn je de inhoud van de middelste div in het midden uit?
A
Arjan Schuurman
12-10-2006 21:45
Owjah, je kunt het beste div.container een hoogte meegeven en de andere divs ook dus bijv:
div.container hoogte = 100
div.links hoogte = 98
div.midden hoogte = 98
div.rechts hoogte = 98

Dan zou het werken en gebruik anders ff een table, is nog makkelijker, zet border wel op 0.
Jan Koehoorn
12-10-2006 21:45
simon schreef op 12.10.2006 21:43
Yep, dat is em! Volgende vraag ;-) Hoe lijn je de inhoud van de middelste div in het midden uit?


#middelste_div {
    text-align: center;
}
Joren de Wit
12-10-2006 21:49
Arjan Schuurman schreef op 12.10.2006 21:43
ik zou een table gebruiken...
Gebruik liever geen table voor je lay-out, daar zijn ze niet voor bedoeld!

Reageren

Inloggen om te reageren