Få #container att fylla hela sidan

2011-10-08 20:46

Medlem ★

Registrerad: Apr 2004

●

Få #container att fylla hela sidan

Hej,
jag har googlat ett bra tag nu och provat massa exempel men inte fått mitt problem löst (försöker mig lära mig lite html). På min sida snuken.org så vill jag att hela den vita baren ska gå ner till bottnen av sidan. Så här ser mina html och css filer ut;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>	
		---Snuken---
	</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container"> 


<div id="header">Snuken.org</div> 

<div id="content">
<p> <audio controls src="http://snuken.org:8000/mpd.ogg"> </p>
<p>#sweden.bf3 @ Quakenet
<br />
Minecraft server: snuken.org
</p>
<br />
	<div id="contentbox">
	<center>
		<ul id="navlist">	
		<li><a href="http://www.chaotech.se">Chaotech</a></li>
		</ul>
	</center>
	</div>

</div>
</div>
</div>
<div class="clear"></div>

</body>
</link>
</html>

body
{
	margin:	0px;
	padding: 0px;
	background-color: silver;
	text-align: center;
	height:	100%;
}

html {
font-family:	Verdana, sans-serif;
font-size:	0.7em;
margin:	0px;
line-height:	1.5em;
text-align:	justify;
padding:	0px;
height:	100%;
}

#container {
	/*margin-top: 10px;
	margin-left: auto;
	margin-right: auto;*/
	margin:	10px auto;
	width: 800px;
	text-align:	center;
	position: relative;
	min-height: 100%;
}

#header {
background-color: #343434;
color: white;
}

#content {
color:	inherit;
padding:	15px;
margin:	0px;
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
min-height: 100%;
}

#contentbox {
color: inherit;
padding 15px;
margin: 0px;
border-top: 1px solid black;
text-align: left;


}

#navlist li {
display: inline;
list-style: none;
padding-right: 20px;
}

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Rapportera Redigera

Citera flera Citera

2011-10-08 22:10

Permalänk

viström

Medlem

Registrerad: Okt 2011

●

Hej. För att #container ska sträcka sig över hela fönstret så bör den i detta fall ha height: 100% istället för min-height: 100%.

Visa signatur

Jobbar som webbutvecklare. Behärskar Photoshop, HTML(5), CSS(3), JavaScript(jQuery), PHP och MySQL. Novis på C++, Java och C#.

Rapportera Redigera

Citera flera Citera

2011-10-08 22:16

Permalänk

Snuken

Medlem ★

Registrerad: Apr 2004

●

Skrivet av viström:

Hej. För att #container ska sträcka sig över hela fönstret så bör den i detta fall ha height: 100% istället för min-height: 100%.

Gå till inlägget

Provat det också men inga ändringar

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Rapportera Redigera

Citera flera Citera

2011-10-08 22:30

Permalänk

viström

Medlem

Registrerad: Okt 2011

●

Skrivet av Farner:

Provat det också men inga ändringar

Gå till inlägget

Såg nu att jag skrev fel div. Menar såklart #content.

Sen bör du även kika igenom din kod lite. Ser att du har avslutat en div för mycket. Sen har du även avslut(</link>) på länken till CSS-filen och det är inkorrekt.

Och istället för <center> taggen så kan du centrera text i CSS. I ditt fall, #navlist{ text-align: center; }

Visa signatur

Jobbar som webbutvecklare. Behärskar Photoshop, HTML(5), CSS(3), JavaScript(jQuery), PHP och MySQL. Novis på C++, Java och C#.

Rapportera Redigera

Citera flera Citera

2011-10-08 22:34

Permalänk

Snuken

Medlem ★

Registrerad: Apr 2004

●

Skrivet av viström:

Såg nu att jag skrev fel div. Menar såklart #content.

Sen bör du även kika igenom din kod lite. Ser att du har avslutat en div för mycket. Sen har du även avslut(</link>) på länken till CSS-filen och det är inkorrekt.

Och istället för <center> taggen så kan du centrera text i CSS. I ditt fall, #navlist{ text-align: center; }

Gå till inlägget

Tack, jag löste problemet

Visa signatur

Intel i7 3770k | 32GB Ram | Asus Strix 1080 | Sennheiser HD 650 | O2+ODAC

Rapportera Redigera

Citera flera Citera

2011-10-08 22:50

Permalänk

viström

Medlem