Archief - CSS: Probleempje met lay-out

Pixie360 · 30 okt 2007

Ik zit met het probleem dat ik 3 containers naast elkaar wil. Ik heb ze wel alle drie naast elkaar gekregen maar ik wil instellen dat er een minimum hoogte is en dat wanneer het nodig is verder uitrekt.

Maar ik zou gewoon de volgende screenshots bekijken want dat zal duidelijker zijn.
1ste screenshot is hoe het allemaal zou moeten zijn.
2de is hoever ik nu zit.
http://img75.imageshack.us/img75/1379/weblayout04bh6.jpg
http://img233.imageshack.us/img233/4088/screenshotwe7.jpg

code pagina:

HTML:

<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="mainstylesheet.css"/>
</head>

<body>
	<div id="topheader">
		<div id="menuwrap">
    		<div id="menuleft">Hallo, DeXoN | <a href="#">Log uit</a> | <a href="#">Controle Paneel</a> | <a href="#">Ledenlijst</a></div>
        	<div id="menuright">
                <ul id="nav">
                <li id="home"><a href="index.php"></a></li>
                <li id="portfolio"><a href="about.php"></a></li>
                <li id="profiel"><a href="archive.php"></a></li>
                <li id="contact"><a href="contact.php"></a></li>
                </ul>
       		</div>
		</div>
	</div>
    <div id="header">
    	<div id="header_image"></div>
    </div>
    <div id="contentwrap">
        <div id="content">
       	  <div id="content_top"></div>
            <div id="content_middle_left">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus feugiat, diam quis venenatis suscipit, leo urna dignissim nisl, id elementum libero mauris non nibh. Phasellus tempor. Morbi eget erat nec dolor hendrerit vestibulum. Integer pretium. Proin laoreet, turpis eget gravida consectetuer, nunc lectus congue erat, in nonummy pede nisi at nunc. Integer gravida consectetuer magna. Donec id urna imperdiet nulla ullamcorper suscipit. Sed placerat, metus ut fringilla porttitor, magna odio placerat nisl, quis eleifend ipsum quam quis elit. Vestibulum ac elit. Vestibulum neque. Nulla vulputate, erat et rutrum egestas, est nulla hendrerit arcu, eu laoreet leo orci sit amet eros. Cras faucibus tempor urna. Vestibulum ac libero. Ut ullamcorper imperdiet lectus. Duis porttitor, nulla id lacinia bibendum, pede mi condimentum risus, et porttitor leo pede adipiscing orci. Nulla sit amet orci. Maecenas a metus eu nunc viverra condimentum. Vestibulum bibendum orci ullamcorper lectus.</div>
          <div id="content_middle_middle">d</div>
            <div id="content_middle_right">d</div>
		  <div id="content_bottum"></div>
        </div>
    </div>
</body>
</html>

code CSS:

Code:

/* Copyright 2007, Dexonia. Alle rechten voorbehouden */

/* MAIN STYLESHEET */
/* ----------------------------------------------------------- */

/* Global */
/* ----------------------------------------------------------- */
html,
body {
	background-color: #34454f;
	color: #adadad;
	font-family: Verdana;
	font-size: 9px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

/* Links */
/* ----------------------------------------------------------- */

a:link,
a:visited {
	text-decoration: none;
	color: #85b0cb;
}

a:hover {
	border-bottom: 1px dotted #85b0cb;
	color: #85b0cb;
}

/* Menu */
/* ----------------------------------------------------------- */

#topheader {
	background-color: #1e2a32;
	height: 40px;
	padding: 0 0 0 0;
	width: 100%;
}

#menuwrap {
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: 800px;
}

#menuleft {
	height: 10px;
	float: left;
	padding: 15px 0 15px 15px;
	width: 485px;
}

#menuright {
	height: 40px;
	float: right;
	text-align: right;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 300px;
}

ul#nav {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 300px;
	height: 40px;
	}
ul#nav li {
	padding: 0;
	margin: 0 0 0 0;
	float: left;
	text-indent: -9999px;	
	list-style-type: none;
	}
ul#nav li a {
	border: 0;
	display: block;
	text-decoration: none;
	background: transparent url(Images/menu.jpg) no-repeat;
	}
	
li#home a {
	width: 66px;
	height: 40px;
}
	 
li#portfolio a {
	width: 86px;
	height: 40px;
}
	 
li#profiel a {
	width: 71px;
	height: 40px;
}	 
	 
li#contact a {
	width: 77px;
	height: 40px;
}
 	 	 	 
li#home a:hover, li#home a:focus {
	background-position: 0px -40px;
}

li#portfolio a:link, li#portfolio a:visited {	
	background-position: -66px 0px;
}

li#portfolio a:hover, li#portfolio a:focus {	
	background-position: -66px -40px;
}
	
li#profiel a:link, li#profiel a:visited {	
	background-position: -152px 0px;
}
	
li#profiel a:hover, li#profiel a:focus {	
	background-position: -152px -40px;
}
	
li#contact a:link, li#contact a:visited {	
	background-position: -229px 0px;
}
	
li#contact a:hover, li#contact a:focus {	
	background-position: -229px -40px;
}

/* Header */
/* ----------------------------------------------------------- */

#header {
	height: 150px;
	width: 100%;
	background-color: #243037;
	padding: 0 0 0 0;
	border-bottom: 2px solid #3d5563;
	border-top: 2px solid #3d5563;
}

#header_image {
	height: 150px;
	padding: 0 0 0 0;
	margin-left: auto;
	margin-right: auto;
	background: transparent url(Images/header.jpg) no-repeat;
	width: 800px;
}

/* Content */
/* ----------------------------------------------------------- */

#contentwrap {
	width: 100%;
	height: 100%;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

#content {
	background: url(Images/content_back.jpg) repeat-y;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	width: 820px;
}

#content_top {
	background: url(Images/content_back_top.jpg) no-repeat;
	height: 25px;
	margin: 0 10px 0 10px;
	width: 800px;
}

#content_middle_left {
	float: left;
	margin: 0 0 0 25px;
	padding: 0 0 0 0;
	width: 455px;
}

#content_middle_middle {
	float: left;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 160px;
	border-left: 1px solid #dadee1;
}

#content_middle_right {
	float: left;
	margin: 0 0 0 10px;
	padding: 0 0 0 0;
	width: 160px;
	border-left: 1px solid #dadee1;
}

#content_bottum {
	background: url(Images/content_back_bottum.jpg) no-repeat;
	height: 45px;
	width: 820px;
}

Devastate · 30 okt 2007

min-height ?
min-height hack voor IE

Pixie360 · 30 okt 2007

Devastate zei:
min-height ?
min-height hack voor IE

ik heb het nog niet geprobeerd maar het rare is dat wanneer ik float: left; weg doe ik wel de min hoogte krijg. maar dan komen de 2 kolommen die ernaast stonden eronder

Chiwakka · 4 nov 2007

Devastate zei:
min-height ?
min-height hack voor IE

veel simpeler als die hack is:

iets{
cssvoorFF;
//cssvoorIE;
}

aangezien // als comment wordt gezien bij FF en bij IE niet.

kows · 6 nov 2007

onderaan in de container zet je:
<div class="dummy"> </div>
en in css:
.dummy {
clear: both;
height: 0px;
line-height: 0px;
}
zo zien wij dat toch (om laten aan te passen aan grootte van inhoud dus, vaste grootte om te starten weet ik niet)

Xcessive- · 10 nov 2007

Ofwel de container dit meegeven overflow: hidden (werkt niet altijd) of onderaan een div plaatsen <div class="clear"></div>

.clear {
clear: both;
}

Archief - CSS: Probleempje met lay-out

Pixie360

Legacy Member

Devastate

Legacy Member

Pixie360

Legacy Member

Chiwakka

Legacy Member

kows

Legacy Member

Xcessive-

Legacy Member