Tråd: Wrapper DIV med bakgrunn strekkes ikke helt ned

Jeg har en wrapper DIV som jeg legger en bagrunn i for innhold/meny-del med skygger på sidene i en 1px høy .png

Problemet er når det blir mye tekst virker det som om DIVen stopper opp. Se vedlagt bilde.
Nederst ser du begynnelsen av footeren som er innstilt til å være klistret til bunnen.

Code:

#wrapper{
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background-repeat: repeat-y;
	background-image: url(images/body.png);
	margin: 0 auto 0 auto;
	width: 1100px;
	text-align: left;
}

#footer_wrap{
	z-index: 0;
	margin: 0 auto 0 auto;
	width: 1100px;
	text-align: left;

}

#footer{
	height: 20px;
	background-repeat: repeat-y;
	background-image: url(images/body.png);
	font-weight: bold;
	padding-bottom: 20px;
	padding-top: 40px;
	text-align: center;
	width: 1100px;
	float: left;
	clear: both;
}

Hei, OlaHaldor.

Vi kan ikke hjelpe deg uten HTML og CSS Kode her. Post dette så skal jeg hjelpe deg

Har googlet opp og ned for å finne ut av disse tingene så jeg har fått det til å fungere nogen lunde som jeg vil, med unntak av dette som skjer på bildet over.

Her er det essensielle som lager det som er på bildet over

Code:

* {
margin:0;
}

html, body {
height: 100%;
}

#wrapper{
	height: auto !important;
	height: 100%;
	min-height: 100%;
	background-repeat: repeat-y;
	background-image: url(images/body.png);
	margin: 0 auto 0 auto;
	width: 1100px;
	text-align: left;
}

#container{
	padding-bottom: 25px;
	width: 576px;
	padding-top: 25px;
	padding-right: 10px;
	padding-left: 10px;
	margin-right: 0px;
	margin-left: 129px;
	float: left;
}
.sidebar{
	display: inline;
	width: 244px;
	float: left;


#footer_wrap{
	margin: 0 auto 0 auto;
	width: 1100px;
	text-align: left;

}

#footer{
	height: 20px;
	background-repeat: repeat-y;
	background-image: url(images/body.png);
	font-weight: bold;
	padding-bottom: 20px;
	padding-top: 40px;
	text-align: center;
	width: 1100px;
	float: left;
	clear: both;
}

Code:

<div id="wrapper">
	
	<div id="container">
		container							
	</div>
		<div class="sidebar">
			sidebar		
			<ul>
				<li id="search">
					search
				</li>	
			</ul>
		</div>
	
	<div id="footer_wrap">
		<div id="footer">
			footer
		</div>
	</div>
</div>

Ser du har mye og lære, men ja. For å få dette til å funke kan du prøve dette.

* {
margin: 0px;
padding: 0px;
}

#wrapper{
margin-left: auto;
margin-right: auto;
width: 100%
}

#container{
text-align: left;
background-repeat: repeat-y;
background-image: url(images/body.png);
padding-bottom: 25px;
width: 576px;
padding-top: 25px;
padding-right: 10px;
padding-left: 10px;
margin-right: 0px;
margin-left: 129px;
float: left;
}
.sidebar{
clear:both
display: inline;
width: 244px;
float: left;
}


#footer_wrap{
margin: 0 auto 0 auto;
width: 1100px;
text-align: left;

}

#footer{
height: 20px;
background-repeat: repeat-y;
background-image: url(images/body.png);
font-weight: bold;
padding-bottom: 20px;
padding-top: 40px;
text-align: center;
width: 1100px;
float: left;
clear: both;
}

Mulig denne kan funke bedre ( har ikke prøvd den ). Ser du har mye unødvendig kode som kan skape mer krøll enn resultat. Syntes også at du har satt opp siden noe rart i forhold til designet. Anbefaler at du leser litt om enkle sider med html og css

Det er en sidebar og andre ting der også, men det er ikke relevant for koden som fucker opp.


Kan du utdype så jeg vet hva det er jeg gjør kokko gæærnt og som jeg har "mye å lære om" så jeg kan ta litt mer lærdom i det enn å bare få ferdig produsert (og utestet..) kode?

Vell, det finnes et hav av forklaringer. HTML er alltid kjedelig da man skal få alt til å passe i flere browsere. Men, har funnet noen artikler til deg som kan hjelpe deg godt på vei.

Artikel 1
Artikel 2

Håper dette kan gi deg noe grunnleggende forståelse på hvordan du bør kode i HTML og CSS.

Happy Coding

Takker for tiden din, men ikke for å være en bitch - du kunne ikke tatt min kode som eksempel og fortalt hva du mener er unødvendig og rotete, så har jeg noe jeg kjenner til å relatere det til så jeg kan få øynene opp for det bedre enn å lese en artikkel jeg ikke har noen relasjon til.


Koden du endra på fucka opp mer enn den hjalp dessverre..

ser ikke så mye rot her jeg hvertfall. Men du kan jo sette sammen litt flere elementer

HTML Code:

background: url(images/body.png) repeat-y;

istedet for:

HTML Code:

background-repeat: repeat-y;
  background-image: url(images/body.png);

og istedet for:

HTML Code:

padding-top: 25px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 0px;
    margin-left: 129px;

kan du skrive:

HTML Code:

padding: 25px 10px 0px 10px;
margin: 0px 0px 0px 129px;

etc etc etc

• padding:25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px
  
  
• padding:25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px
• padding:25px 50px;
  • top and bottom paddings are 25px
  • right and left paddings are 50px
  
  
• padding:25px;
  • all four paddings are 25px

Og et lite tips er å alltid sjekke at siden din validerer, både CSS og HTML... Validerer det, så fungerer det som oftest.

Opprydding i koden er ikke så viktig for min del, jeg bruker Coda som gjør det på den måten, og jeg finner frem i koden, så det er igrunn det viktigste.

Ender nok opp med å droppe skygger og andre ting i designet så jeg slipper dette tullet med en uforklarlig gap som dukker opp.

Skulle jeg dratt noe over hele siden ville jeg gjort det slik,

* {
padding: 0px;
margin: 0px;
}

.p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
}

html, body {
background-color: #343f45;
height: 100%;
}

#wrapper {
min-height: 100%;
width: 893px;
margin-left: auto;
margin-right: auto;
background-color: white;
}

Obs, er ikke sikker på om dette fungerer i IE6.

Siden du bruker så mye 100% burde du lese, http://www.webmasterworld.com/forum83/200.htm.