Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

div/div moet verder naar boven

Nrzonline - 24/05/2006 11:40 (laatste wijziging 24/05/2006 11:53)
PHP ver gevorderde		Hey SiMa leden, Ik heb een probleempje met mijn layout. Het probleem is dat ik naast 2 div's onder elkaar, nog een div wil plaatsen: Voorbeeld bedoeling: php code - Bekijk de code zonder highlighting - Klap code in _______________________________ \|_____________\| \| \|_____________\|_________________\| _______________________________ \|_____________\| \| \|_____________\|_________________\| Voorbeeld uitkomst: http://www.3d-gamers.nl/divproblem.gif Gebruikte code: http://plaatscode.be/369/ div css-file: http://plaatscode.be/370/ Alvast bedankt voor jullie hulp!

4 antwoorden

Gesponsorde links

NCube - 24/05/2006 12:18
HTML beginner		Verwijder de <br /> op regel 24

Nrzonline - 24/05/2006 12:25 (laatste wijziging 24/05/2006 12:26)
PHP ver gevorderde		dan gaat hij alleen maar harder op zijn bek Hij zet de title en descript div nu naast elkaar, terwijl die onder elkaar horten te staan.. In plaats van dat hij nu de hoge div ernaast gooit, zet hij hem er onder =( php code - Bekijk de code zonder highlighting - Klap code in _________________________________ \|_____TITLE_____\|_____DESCIPT_____\| \|____________DETAILS______________\| _________________________________ \|_____TITLE_____\|_____DESCIPT_____\| \|____________DETAILS______________\|

Thomas - 24/05/2006 12:54 (laatste wijziging 24/05/2006 13:02)

Moderator

Maak een container voor je pagina, met hierin
een floatende div voor het linker gedeelte
een floatende div voor het rechter gedeelte

zet in je linker floatende div
een top-div
een bottom-div

Aldus:

php code - Bekijk de code zonder highlighting - Klap code in

                container
  left
    left_top
    left_bottom
  right
            
container
  left
    left_top
    left_bottom
  right
 

code:

php code - Bekijk de code zonder highlighting - Klap code in

                <!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#container
{
	height: 100%;
	width: 100%;
}

#left
{
	float: left;
	width: 50%;
	height: 100%;
}

#left_top
{
	width: 100%;
	height: 50%;
	background-color: #ffcc00;
}

#left_bottom
{
	width: 100%;
	height: 50%;
	background-color: #00ff00;
}

#right
{
	float: left;
	width: 50%;
	height: 100%;
	background-color: #ff0000;
}
</style>
</head>

<body>
<div id="container">
	<div id="left">
		<div id="left_top">left top</div>
		<div id="left_bottom">left bottom</div>
	</div>
	<div id="right">
	right
	</div>
</div>
</body>
</html>
            
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
 
#container
{
	height: 100%;
	width: 100%;
}
 
#left
{
	float: left;
	width: 50%;
	height: 100%;
}
 
#left_top
{
	width: 100%;
	height: 50%;
	background-color: #ffcc00;
}
 
#left_bottom
{
	width: 100%;
	height: 50%;
	background-color: #00ff00;
}
 
#right
{
	float: left;
	width: 50%;
	height: 100%;
	background-color: #ff0000;
}
</style>
</head>
 
<body>
<div id="container">
	<div id="left">
		<div id="left_top">left top</div>
		<div id="left_bottom">left bottom</div>
	</div>
	<div id="right">
	right
	</div>
</div>
</body>
</html>
 

Nrzonline - 24/05/2006 13:19
PHP ver gevorderde		Yeey, thanks alot =) Btw, ik ben zojuist met Template Power begonnen, dus ik ga het allemaal een beetje opnieuw maken.. Maar eerst nog even alle kneepjes van template power beetje doorlezen en oefenen. Thanks again!

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten