Voorbeeld Frame

Status
Niet open voor verdere reacties.
S

santano

Gebruiker
Lid geworden
15 jul 2013
Berichten
31
Wie heeft er voor mij een html frame als volgt opgebouwd:

rijen: 20% 60% 20%

kolommmen: 1e rij geen kolommen
2e rij 4 kolommen van 25 %
3e rij 2 kolommen van 50 %


Het mooiste zou zijn als er in elk blok ( totaal 7) het woord test kan worden gezet.

Alvast dank!
 
Even snel gemaakt met inline styling:

Code: 
<html>
<head>
<title>Testpagina</title>
<style>
* {
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%;">
	<div class="rij-boven" style="width: 100%;">
		<div class="kolom-1" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 100%;">Test</div>
	</div>

	<div class="rij-midden" style="width: 100%;">
		<div class="kolom-1" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 25%;">Test</div>
		<div class="kolom-2" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 25%;">Test</div>
		<div class="kolom-3" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 25%;">Test</div>
		<div class="kolom-4" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 25%;">Test</div>
	</div>

	<div class="rij-onder" style="width: 100%;">
		<div class="kolom-1" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 50%;">Test</div>
		<div class="kolom-2" style="float: left; box-shadow: 0px 0px 0px 1px #000 inset; height: 100px; width: 50%;">Test</div>
	</div>
</div>
</body>
</html>
 
Beide bedankt!

De output is


test


test test test



test



test




test



Wat gaat er fout want ik wil 4x test naast elkaar en daaronder 2x test naast elkaar (4 x 25% en 2x 50%)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan