Archief - xHTML/CSS: Div strekt uit buiten container

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

GenesisX

Legacy Member
Linkje - http://users.telenet.be/hydrofive/BROL/030 - prob.jpg

Zo ziet het eruit in ff en ie. En, zoals jullie wel kunnen verwachten, wil ik nu dat als die div opgevuld wordt en stretcht, de gehele lay-out mee stretch.

Ik heb hier al een tijdje gezocht -en zal er waarschijnlijk wel over gekeken hebben- maar ik vind niets dat mij kan helpen. Meestal gaat het over divs die de content niet tonen als hij opgevuld wordt of bg-images die mee moeten stretchen.

Sorry als het makkelijk te vinden is via google fzo, maar het is hier chaos alom en ik weet maar half op wat ik moet zoeken.

Hieronder mijn css:
Code:
/* CSS Document */
/* Padding and margin positioning order */
/* top right bottom left */

/* 	=== BROWSER MARKUP === */
body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	font-size: 11px;
	color: #343434;
	background-image: url(../Images/BG_DECORATED_343434.gif);
	background-repeat: repeat-x;
	background-color: #343434;
}
body, html { height: 100% }



/* 	=== GENERAL MARKUP === */
img { border: none; padding: 0 }
a { outline: none }
a:active{ outline: none }



/* 	=== PAGELAYOUT MARKUP === */
#container {
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	height: 99%;
}
#main {
	background-color: #ffffff;
	height: 100%;
	padding: 3px;
	margin: 0;
}
#header {
	width: 594px;
	margin: 0;
	z-index: 2;
	position: relative;
	text-decoration: none;
}



/* 	=== NAVIGATIONMENU MARKUP === */
#navigationmenu {
	width: auto;
	margin: 96px 0 0 12px;
	padding: 0;
	z-index: 8;
	position: absolute;
	font-weight: bold;
}
#navigationmenu ul {
    list-style: none;
	float: left;
	width: auto;
	margin: 0;
	padding: 0;
	
	font-variant: small-caps;
	font-size: 12px;
}
#navigationmenu li { display: inline; margin-right: 10px; }
#navigationmenu li a, a:active, a:visited { text-decoration: none; color: #FFFFFF }
#navigationmenu li a:hover { text-decoration: none; color: #afc81c }



/* 	=== LEFTBOX MARKUP === */
#lentry {
	width: 179px;
	text-align: left;
	float: left;
	position: relative;
	padding: 0 0 0 3px;
	margin: 3px auto;
	background-image: url(../Images/LENTRY_HEADER_WITH_ICON.gif);
	background-repeat: no-repeat;
	background-position: top;
	
	color: #343434;
	text-decoration: none;
}
#lentry h1 {
	font-weight: bold;
	font-size: 11px;
	padding-left: 28px;
	padding-top: 2px;
	margin: 0;
	line-height: normal;
	text-decoration: none;
}
#lentry p {
	font-size: 11px;
	margin: 0;
	line-height: 116%;
	white-space: normal;
	padding: 8px 5px 5px 5px;
	text-decoration: none;
}
#lentry a { text-decoration: none }



/* 	=== CONTENT MARKUP === */
#content {
	width: 410px;
	float: left;
	text-align: left;
	position: relative;
	margin: 4px 0 0 1px;
	padding: 0;
	height: 1px;
}
#contenttop {
	background-image: url(../Images/CONTENT_TOP_ROUNDED.gif);
	background-repeat: no-repeat;
	background-position: top;
	height: 5px;
	margin: 0;
	padding: 0;
}
#contentmiddle {
	background-color: #343434;
	margin: 0 1px 0 1px;
	padding: 0 6px 1px 6px;
}
#contentmiddle h1 {
	font-size: 13px;
	color: #ffffff;
	padding: 0 0 0 20px;
	margin: 0;
}
#contentmiddle h2 {
	font-size: 11px;
	color: #ffffff;
	padding: 0 0 0 20px;
	margin: 10px 0 -10px 0;
}
#contentmiddle p {
	padding: 0 0 0 20px;
	margin: 10px 0 4px 0;
	font-size: 12px;
	color: #a2a2a2;
	line-height: 100%;
}
#contentmiddle img { display: inline }
#contentmiddle .icon { float: left; display: inline }
#contentbottom {
	background-image: url(../Images/CONTENT_BOTTOM_ROUNDED.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 5px;
}



/* === CONTACTFORM MARKUP === */
	/*
	fieldset {
		margin: 10px 0 0 20px;
		padding: 0;
		height: auto;
		width: auto;
		display: block;
		
		border: 1px solid #afc81c;
	}
	legend {
		margin: 0 0 0 15px;
		padding: 2px 4px 2px 4px;
		width: auto;
		height: 14px;
		
		background-color: #afc81c;
		font-weight: bold;
	}
	*/ 
form#contact {
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 0;
}
div.row {
	clear:both;
	width:350px;
	height:25px;
	padding:0;
}
span.label {
	padding: 0;
	width: 62px;
	float: left;
	text-align: right;
	display: block;
	font-weight: bold;
	margin-top: 4px;
}
span.label { color: #afc81c }
span.inputfield {
	width: 160px;
	float: left;
	margin-left: 5px;
	text-align: left;
}
form#contact .textfield {
	margin: 0;
	padding: 2px;
	border: 3px solid #fff;
	background-color: #afc81c;
	width: 100%;
	font-size: 10px;
}
form#contact textarea {
	font-family: "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	font-size: 10px;
}
form#contact .submit {
	font-size: 10px;
	text-align: center;
	background-color: #343434;
}



/* 	=== FOOTER MARKUP === */
#footer {
	position: relative;
	margin-top: -17px;
	margin-left: auto;
	margin-right: auto;
	background-color: #343434;
	width: 600px;
	height: 15px;
	clear: both;
	
	padding: 1px 2px 1px 2px;

	font-size: 10px;
	color: #ffffff;
	text-align: left;
}
#footer a, a:active, a:visited { text-decoration: none; color: #ffffff }
#footer a:hover { text-decoration: none; color: #afc81c }

Bedankt!

GenesisX

Legacy Member
in IE is het nu wel goed en in ff plaats hij ze erbuiten =(

Code:
/* CSS Document */
/* Padding and margin positioning order */
/* top right bottom left */

/* 	=== BROWSER MARKUP === */
body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	font-size: 11px;
	color: #343434;
	background-image: url(../Images/BG_DECORATED_343434.gif);
	background-repeat: repeat-x;
	background-color: #343434;
}
body, html { height: 100% }



/* 	=== GENERAL MARKUP === */
img { border: none; padding: 0 }
a { outline: none }
a:active{ outline: none }



/* 	=== PAGELAYOUT MARKUP === */
#container {
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	height: 99%;
	position: relative;
}
#main {
	background-color: #ffffff;
	height: 100%;
	padding: 3px;
	margin: 0;
	position: relative;
}
#header {
	width: 594px;
	margin: 0;
	z-index: 2;
	position: relative;
	text-decoration: none;
}



/* 	=== NAVIGATIONMENU MARKUP === */
#navigationmenu {
	width: auto;
	margin: 96px 0 0 12px;
	padding: 0;
	z-index: 8;
	position: absolute;
	font-weight: bold;
}
#navigationmenu ul {
    list-style: none;
	float: left;
	width: auto;
	margin: 0;
	padding: 0;
	
	font-variant: small-caps;
	font-size: 12px;
}
#navigationmenu li { display: inline; margin-right: 10px; }
#navigationmenu li a, a:active, a:visited { text-decoration: none; color: #FFFFFF }
#navigationmenu li a:hover { text-decoration: none; color: #afc81c }



/* 	=== LEFTBOX MARKUP === */
#lentry {
	width: 179px;
	text-align: left;
	float: left;
	position: relative;
	padding: 0 0 0 3px;
	margin: 3px auto;
	background-image: url(../Images/LENTRY_HEADER_WITH_ICON.gif);
	background-repeat: no-repeat;
	background-position: top;
	
	color: #343434;
	text-decoration: none;
}
#lentry h1 {
	font-weight: bold;
	font-size: 11px;
	padding-left: 28px;
	padding-top: 2px;
	margin: 0;
	line-height: normal;
	text-decoration: none;
}
#lentry p {
	font-size: 11px;
	margin: 0;
	line-height: 116%;
	white-space: normal;
	padding: 8px 5px 5px 5px;
	text-decoration: none;
}
#lentry a { text-decoration: none }



/* 	=== CONTENT MARKUP === */
#content {
	width: 410px;
	float: left;
	text-align: left;
	position: relative;
	margin: 4px 0 0 1px;
	padding: 0;
	height: 1px;
}
#contenttop {
	background-image: url(../Images/CONTENT_TOP_ROUNDED.gif);
	background-repeat: no-repeat;
	background-position: top;
	height: 5px;
	margin: 0;
	padding: 0;
	position: relative;
}
#contentmiddle {
	background-color: #343434;
	margin: 0 1px 0 1px;
	padding: 0 6px 1px 6px;
	position: relative;
}
#contentmiddle h1 {
	font-size: 13px;
	color: #ffffff;
	padding: 0 0 0 20px;
	margin: 0;
	position: relative;
}
#contentmiddle h2 {
	font-size: 11px;
	color: #ffffff;
	padding: 0 0 0 20px;
	margin: 10px 0 -10px 0;
}
#contentmiddle p {
	padding: 0 0 0 20px;
	margin: 10px 0 4px 0;
	font-size: 12px;
	color: #a2a2a2;
	line-height: 100%;
}
#contentmiddle img { display: inline }
#contentmiddle .icon { float: left; display: inline }
#contentbottom {
	background-image: url(../Images/CONTENT_BOTTOM_ROUNDED.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	height: 5px;
	position: relative;
}



/* === CONTACTFORM MARKUP === */
	/*
	fieldset {
		margin: 10px 0 0 20px;
		padding: 0;
		height: auto;
		width: auto;
		display: block;
		
		border: 1px solid #afc81c;
	}
	legend {
		margin: 0 0 0 15px;
		padding: 2px 4px 2px 4px;
		width: auto;
		height: 14px;
		
		background-color: #afc81c;
		font-weight: bold;
	}
	*/ 
form#contact {
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 0;
}
div.row {
	clear:both;
	width:350px;
	height:25px;
	padding:0;
}
span.label {
	padding: 0;
	width: 62px;
	float: left;
	text-align: right;
	display: block;
	font-weight: bold;
	margin-top: 4px;
}
span.label { color: #afc81c }
span.inputfield {
	width: 160px;
	float: left;
	margin-left: 5px;
	text-align: left;
}
form#contact .textfield {
	margin: 0;
	padding: 2px;
	border: 3px solid #fff;
	background-color: #afc81c;
	width: 100%;
	font-size: 10px;
}
form#contact textarea {
	font-family: "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	font-size: 10px;
}
form#contact .submit {
	font-size: 10px;
	text-align: center;
	background-color: #343434;
}



/* 	=== FOOTER MARKUP === */
#footer {
	position: relative;
	margin-top: -17px;
	margin-left: auto;
	margin-right: auto;
	background-color: #343434;
	width: 600px;
	height: 15px;
	clear: both;
	
	padding: 1px 2px 1px 2px;

	font-size: 10px;
	color: #ffffff;
	text-align: left;
}
#footer a, a:active, a:visited { text-decoration: none; color: #ffffff }
#footer a:hover { text-decoration: none; color: #afc81c }
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan