Hey
Heb een snel probleempje waar ik niet zo snel raad mee wist.
Ik heb boven twee boxen gemaakt met float: left; en float: right; alleen nu kan ik niks meer normaal eronder zetten.
Wanneer er een stuk code nodig is ze het even.
Hier is een screenshot, waar de onderste Titel staat zou dat groene moeten komen, en dan zelfs nog links ..
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i53.tinypic.com).Bron openen ↗
Alvast bedankt,
Tijs
//EDIT:
Had ook wel iets aardiger gekunt Allemaalte -.-
Ben helemaal niet bang dat iemand iets steelt, in ieder geval niet kwa broncode. layout is van iemand anders.
HTML:CSS:
Heb een snel probleempje waar ik niet zo snel raad mee wist.
Ik heb boven twee boxen gemaakt met float: left; en float: right; alleen nu kan ik niks meer normaal eronder zetten.
Wanneer er een stuk code nodig is ze het even.
Hier is een screenshot, waar de onderste Titel staat zou dat groene moeten komen, en dan zelfs nog links ..
Afbeelding niet beschikbaarDe bron kon niet worden geladen (i53.tinypic.com).Bron openen ↗Alvast bedankt,
Tijs
//EDIT:
Had ook wel iets aardiger gekunt Allemaalte -.-
Ben helemaal niet bang dat iemand iets steelt, in ieder geval niet kwa broncode. layout is van iemand anders.
HTML:
Spoiler tonen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Naamloos 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgcolor="#164768">
<div class="banner"></div>
<div class="menubar"><div class="menumid"></div></div>
<div class="container">
<div class="left"><img src="images/lefttop.png" />
<div class="leftmid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac laoreet turpis. Nam lobortis consectetur justo, a sodales urna mattis sed. Maecenas tincidunt orci sed eros congue ut ultrices diam feugiat. Aenean ipsum tortor, vulputate a ullamcorper eu, ultrices ac ipsum. Curabitur in odio sodales metus dictum lobortis quis a dolor. Nulla facilisi. Donec pretium tortor ut augue semper imperdiet. Sed euismod enim quis ipsum rhoncus imperdiet. Vivamus magna neque, pulvinar id auctor sit amet, fermentum blandit nisi. Nunc interdum auctor mattis. Nam in ligula nec eros molestie pretium in id velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac laoreet turpis. Nam lobortis consectetur justo, a sodales urna mattis sed. Maecenas tincidunt orci sed eros congue ut ultrices diam feugiat. Aenean ipsum tortor, vulputate a ullamcorper eu, ultrices ac ipsum. Curabitur in odio sodales metus dictum lobortis quis a dolor. Nulla facilisi. Donec pretium tortor ut augue semper imperdiet. Sed euismod enim quis ipsum rhoncus imperdiet. Vivamus magna neque, pulvinar id auctor sit amet, fermentum blandit nisi. Nunc interdum auctor mattis. Nam in ligula nec eros molestie pretium in id velit.</div>
<div class="leftbot"></div>
</div>
<div class="right">
<div name="righttop">
<div class="right-left">
<div class="boxblue">Titel</div>
<div style="background: #E9F0F6; border: 1px #D8E9F3 solid; font-family: Verdana; font-size: 10pt; color: #000000; width: 334px;"><div style="background: #FFFFFF; border-bottom: 1px #D8E9F3 solid; height: 32px;">
<strong>Tekst kopje</strong></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac laoreet turpis. Nam lobortis consectetur justo, a sodales urna mattis sed. Maecenas tincidunt orci sed eros congue ut ultrices diam feugiat.</div>
</div>
<div class="right-right">
<div class="boxblue">Titel</div>
<div style="background: #E9F0F6; border: 1px #D8E9F3 solid; font-family: Verdana; font-size: 10pt; color: #000000; width: 334px;">
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac laoreet turpis. Nam lobortis consectetur justo, a sodales urna mattis sed. Maecenas tincidunt orci sed eros congue ut ultrices diam feugiat.</div>
</div>
</div>
<div name="rightmid">
<div class="boxgreenbig">Titel</div>
</div>
</div>
</div>
</body>
</html>Spoiler tonen
/* CSS-indeling */
div.banner {
background: #FFFFFF;
width: 100%;
height: 152px;
position: absolute;
left: 0px;
top: 0px;
}
div.menubar {
background: url(images/menubg.png);
width: 100%;
height: 34px;
position: absolute;
left: 0px;
top: 152px;
}
div.menumid {
background: url(images/menumid.png);
margin: 0 auto;
width: 937px;
height: 34px;
}
div.container {
width: 937px;
margin: 185px auto;
}
div.left {
width: 247px;
float: left;
}
div.leftmid {
background: #57820E;
width: 214px;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
margin-left: 3px;
color: #FFFFFF;
font-family: Verdana;
font-size: 11pt;
padding: 13px;
}
div.leftbot {
background: url(images/leftbottom.png);
width: 240px;
height: 6px;
margin-left: 4px;
}
div.right {
width: 690px;
float: right;
}
div.right-left {
width: 336px;
float: left;
margin: 8px;
}
div.right-right {
width: 336px;
float: right;
margin-top: 8px;
}
div.boxblue {
width: 326px;
height: 27px;
padding-left: 10px;
padding-top: 6px;
background: url(images/boxheaderblauw.png);
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana;
}
div.boxgreenbig {
width: 675px;
height: 27px;
padding-left: 10px;
padding-top: 6px;
background: url(images/boxheadergroengroot.png);
color: #FFFFFF;
font-size: 11pt;
font-family: Verdana;
margin-left: 8px;
}
