Archief - Collapsing margins op parent element duwt footer naar beneden

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.
w

weak lynx gamer

Legacy Member
Hallo allemaal,

alvast bedankt voor jullie tijd.
Ik ben bezig aan een website die ik voorzien heb van een Stylesheet.
Alles gaat perfect, enkel heb ik een klein probleem dat ik maar niet opgelost krijg.

CSS code:
Code: 
body {
	margin: 0px;
	padding: 0px;
	background:url(images/bg.png) repeat;
    }
	
#main {
	margin:0 auto;
	padding-bottom:0px;
	width:810px;
	/*height:100%;*/
	background:url(images/lay_05.jpg) repeat-y;
	}

#header {
	margin:0 auto;
	width:810px;
	height:204px;
	background-color:#000;
	}
	
#header_left {
	float:left;
	width:288px;
	height:204px;
	background:url(images/lay_01.jpg) no-repeat;
	}
	
#header_right_top {
	float:right;
	width:522px;
	height:91px;
	background:url(images/lay_02.jpg) no-repeat;
	}
	
#taal {
	padding-left:25px;
	padding-top:4px;
	width:60px;
	height:22px;
	background:url(images/bg_taal.png) no-repeat;
	background-position:bottom;
	}
	
#header_right_menu {
	float:right;
	width:522px;
	height:39px;
	background:url(images/lay_03.jpg);
	}
	
#header_right_bottom {
	float:right;
	width:522px;
	height:74px;
	background:url(images/lay_04.jpg);
	}
	
#menu {
	margin:10px 10px 0px 10px;
	padding:0px;
	font-family:Book Antiqua;
	font-size:14px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	
	}
	
#content {
	margin:0 auto;
	padding:0px;
	width:810px;
	height:100%;
	background:url(images/lay_05.jpg) repeat-y;
	}
	
.text {
	margin:0px 40px 0px 40px;
	padding:0px;
	width:730px;
	height:auto;
	text-align:left;
    }
	
h1 {
	font-size:18px;
	font-style:italic;
	}
	
p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:black;
	font-weight:normal;
	}
	
/*tekst links*/	
a {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:black;
	font-weight:normal;
	font-style:italic;
	}
	
a:hover {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#F30;
	font-weight:normal;
	font-style:italic;
	}
	
	
#image {
	padding-bottom:0px;
	margin-top:30px;
	text-align:center;
	}

#footer {
	position:absolute;
	clear:both;
	margin:0;
	padding:0;
	width:810px;
	height:107px;
	background-image:url(images/footer.png);
	background-position:center;
	}

Als ik in het gebied waar de content komt te ver naar beneden ga verschijnt er een open ruimte boven mijn footer.

Image voorbeeld:
http://img41.imageshack.us/img41/868/vhpro.jpg

De ruimte van de content waar de tekst enz komt te staan die achtergrond repeat zich mooi naar onder maar toch sluit deze niet aan op de footer.
(wel als ik de content ruimte bv op 400px hoogte houd)

Iemand een idee? Nogmaals alvast bedankt voor jullie tijd.
-

-BVR-

Legacy Member
Kan je een testcase online zetten? Veel makkelijker om te debuggen.
s

scipicore

Legacy Member
De pagina waarvan je de link geeft heeft volgens mij dat probleem niet.

op Van Hoof BVBA waar er bij je afbeelding een lege ruimte staat, staat er bij mij blijkbaar iets over Flash.

div#image is het dat er staat.
w

weak lynx gamer

Legacy Member
Ik heb eens in .text de height op 100% gezet ipv auto; maar nog steeds het zelfde probleem :(

.text {
margin:0px 40px 0px 40px;
padding:0px;
width:730px;
height:100%;
text-align:left;
}
Klik om te vergroten...
-

-BVR-

Legacy Member
Uw code is ook niet echt kosjer hé:
In #image heb je een h2 met daarin een afbeelding en daaronder een lege p-tag. Die lege p-tag geeft al een top en bottom margin, zonder functie. Verwijder die p-tag. Dan hebt ge nog de margin-bottom van de h2. Ofwel doe je dit: #image h2 {margin-bottom: 0;}, maar aangezien ik niet begrijp waarom je hier in godsnaam h2-tags gebruikt, raad ik je aan om die gewoon te verwijderen en de afbeelding die je daar gebruikt via css toe te voegen. Dan krijg je dit een lege <div id="image"> met de volgende CSS:

HTML: 
#image {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-image: url(images/aboutusicon.png) no-repeat;
}

(Heb het niet gecontroleerd, maar zou moeten werken)

Merk op: ge werkt op nog andere plaatsen met lege p-tags. Get rid of 'em.
Z

Zero Grav

Legacy Member
Dit is waarom een css reset dus gebruikt wordt. Uw tags gaan allemaal standaard een margin gaan hebben die soms zelfs overgaat buiten hun containing element en daardoor dus andere objecten gaat wegduwen. Wanneer is die soms? Als een parent element geen padding (en/of border geloof ik) heeft. Als ge uw #content div dus een padding van 1 pixels gaat geven dan verdwijnt die spatie.

Ge ziet dat ook duidelijk in uw code trouwens, als ge al uw content wist dan is die space er niet, omdat er geen margin van child elementen is die uw parent kan beïnvloeden.

Anyway, er is wel wat meer mis met die code dan alleen dat, maar die padding zou dat probleem alvast moeten oplossen.
G

GregoryCo

Legacy Member
Vergeet geen css-reset op AL uw elementen zoals Zero Grav zei, dit zou uw probleem moeten oplossen
Code: 
*{
 margin:0;
 padding:0;
}
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