Hvordan plassere en div i bunnen av en div?

Pilot_ · 20. november 2007

Heisann,

Jeg har en "footer" som jeg har lyst til å ha i bunnen av en "container", uavhengig av hvor langt innholdet er. Er det noen fornuftig måte å løse dette på?

øl_i_tastaturet · 20. november 2007

<div id="container">
Innhold bla bla bla
<div id="footer"></div>
</div>

?

Pilot_ · 20. november 2007

Men nå vil vel innholdet spille en rolle hvor langt nede footeren er?

Endret 20. november 2007 av Lofnes

Stian Jacobsen · 20. november 2007

<div id="hoved">
<p>bla bla bla bla</p>
<div id="bunn">
<p>bunn...</p>
</div>
</div>

div#hoved {
 position: relative;
}
div#bunn {
 position: absolute;
 bottom: 0;
}

Steinmann · 20. november 2007

And the grand price goes to Stian.

Godt å se at det finnes folk som forstår litt css her ute hvertfall.

Viktig å passe på at hoved-div'n ikke kollapser av float også.

Pilot_ · 20. november 2007

Takk for svar

Tror jeg fikk noe problemer med float jeg. Har laget noen illustrasjoner for å vise hvordan det ser ut nå, og hvordan jeg vil det skal se ut.

Slik ser det ut

Slik skal det se ut

Steinmann · 20. november 2007

Screenshot/kode ville jo vært litt enklere å jobbe med da..

Pilot_ · 20. november 2007

Ja, det er kanskje litt enklere. Slenger ved kode og print screen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//NO"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

@import url(stil.css);

</style>

</head>

<body>

</div>

</div>

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>

Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah <br>

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>

Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>

Blah Blah Blah Blah Blah Blah Blah BBlah Blah Blah Blah Blah Blah <br></p>

</div>

</div>

</body>

</html>

CSS

#container {

width: 802px;

border: 0px solid #000000;

}

#header {

width: 800px;

height: 260px;

}

#left {

width: 321px;

height: 340px;

float: left;

}

#maincontent {

padding-top: 20px;

padding-left: 20px;

float: right;

position: relative;

}

#footer {

position: absolute;

bottom: 0;

}

html {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

Hvis dere ser den svarte lille delen på bildet til venstre, så skal diven passe til den, altså, helt på bunnen av diven. Det som skjer nå er at footeren plasserer seg helt nede på skjermen, mao så går den under resten av innholdet hvis jeg skrur opp oppløsningen på skjermen.

Steinmann · 20. november 2007

typiske feil du sikkert har:

* Satt høyden til 100%. du må ha min-height til 100%

* ikke satt height: 100% på html

* ikke resatt margin/padding med en css-reset fil

For å få den til høyre setter du bare

left: antallpx du trenger;

Endret 20. november 2007 av Steinmann

Pilot_ · 20. november 2007

Oki, det hjalp litt. Slik ser det ut nå:

#container {

width: 802px;

border: 0px solid #000000;

}

#header {

width: 800px;

height: 260px;

}

#left {

width: 321px;

height: 340px;

float: left;

}

#maincontent {

padding-top: 20px;

padding-left: 20px;

float: right;

position: relative;

}

#footer {

position: absolute;

bottom: 0;

left: 329px;

}

html {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

min-height: 100%;

Men hva mener du med "ikke resatt margin/padding med en css-reset fil"? Aldri vært borti det før. :hmm:

qualbeen · 20. november 2007

øverst i stilark:

*{ padding:0; margin:o; }

Pilot_ · 20. november 2007

øverst i stilark:
*{ padding:0; margin:o; }

Det skjedde ingen forandring på siden når jeg limte inn den snutten.

semafor · 20. november 2007

margin: o?

O for Oslo?

Lofnes: De fleste browsere setter som standard diverse stiler på forskjellige elementer, som f. eks. 8px padding på body etc.

* { margin: 0; padding: 0; } fjerner alt dette.

Pilot_ · 20. november 2007

Oh, big mistake!

Vel, nå bytta jeg 'o' med '0', men det eneste som skjedde var at footeren flytta seg 8px mer til høyre (som jeg stilte tilbake manuelt). Greia er at slik det er nå, plasserer footeren seg helt på bunnen av skjermen. Jeg vil at footeren skal plassere seg helt nede i en container-div som har en fast høyde.

Steinmann · 21. november 2007

Da dropper du min-height: 100%

Pilot_ · 21. november 2007

Nå fjerna jeg min-height: 100%; fra html, men fortsatt ingen endring.

funkyboy · 22. november 2007

Dette er et av de mest typiske vanskelige problemene å støte borti når man tenker layout. Har enda ikke sett en god løsning på akkurat dette.

* Setter du 100% høyde, vil dette fungere ulikt i forskjellige nettlesere (Les IE vs. logisk nettleser).

* Setter du innholdsbolk til minimum høyde, vil dette se forskjellig ut med forskjellig skjermoppløsning

* Benytter du absolute positioning, vil du få en slags "frame- effekt", som ofte vil være ugunstig i forhold til måten du har pålanlagt designet.

* Bruker du margin/ padding for å forsikre deg om at det alltid er en scroll der, og at bunnen er under nettleservinduets slutt, er forsåvidt det lettere å få det til. Dette vil igjen ofte føre til en konflikt, dersom layouten du har sett for deg skal være uten scrollere. Men i et slikt tilfelle, er f.eks absolute positioning ofte ok. Ulempen med absolute positioning, er jo i forhold til midstilt layout.

Ville egentlig rådet deg til å legge om designet noe, da dette er svært vanskelig å få til hundre prosent. Men er det veldig viktig å få det til, får du alltids til det med litt triksing og miksing. (Det jeg egentlig mener her, er at det sannsynligvis tar vel lang tid å få til, i forhold til funksjonaliteten).

Pilot_ · 22. november 2007

Takk for bra svar.

Ja, skjønner at denne layouten er litt vanskelig å få til, og har vært engstelig for det siden jeg så den fra første stund. Jeg har ikke designet den, men har som oppgave å kode den.

Hvis det er så umulig og vanskelig å få til, så tror jeg kanskje jeg må prøve å få overbevise designeren til å re-designe hele greia, i hvert fall finne en annen løsning på footeren.

FrodeNilsen · 22. november 2007

Oh, big mistake!

Vel, nå bytta jeg 'o' med '0', men det eneste som skjedde var at footeren flytta seg 8px mer til høyre (som jeg stilte tilbake manuelt). Greia er at slik det er nå, plasserer footeren seg helt på bunnen av skjermen. Jeg vil at footeren skal plassere seg helt nede i en container-div som har en fast høyde.

Dette er godt beskrevet i CSS2.1 definisjonen:

http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning

Du har plassert footer boksen akkurat der den er. Den er tatt ut av kontainer og plassert akkurat der du har definert: Nederst på siden. Den er dermed ikke relatert til "container" boksen lenger.

Det finnes flere måter å løse dette på. Det å definere en pixel høyde og bredde på boksene er ett ofte brukt triks.

Du kan skrive om koden slik:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//NO" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
	<title>bokser</title>
	<style type="text/css">
		@import url(stil.css);
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			Header
		</div>
		<div id="left">
			Left container
		</div>
		<div id="content">
			<div id="maincontent">
				<p>
					Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah h Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
Blah Blah Blah Blah Blah Blah Blah BBlah Blah Blah Blah Blah Blah
					<br>
				</p>
			</div>
			<div id="footer">
				footer
			</div>
		</div>
	</div>
</body>
</html>

Du kan da endre CSS til noe sånt som dette:

#container {
width: 800px;
height: 600px;
border: 1px dotted #777700;
}

#header {
margin: 0px;
width: 798px;
height: 248px;
border: 1px solid #008888;

}

#left {
float: left;
margin: 0px;
width: 198px;
height: 348px;
border: 1px solid #ff0000;
}

#content {
margin: 0px;
float: left;
border: 1px dotted #00ffff;
width: 598px;
height: 348px;
}
#maincontent {
margin: 0px;
border: 1px solid #00ff00;
width: 596px;
height: 298px;
}

#footer {
margin: 0px;
width: 596px;
height: 46px;
border: 1px solid #ffff00;
}

html {
border: 1px solid #00ff00;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

Dette kan også gjøres ved å bruke absolutt positioning. Problemet med fast størrelse på boksene er at teksten kan flyte utover boksene hvis de har fast størrelse, slik at du må ha overflow i tankene.

min-height og min-width er ment å løse den problematikken du har, men disse er fremdeles svakt støttet i mange nettlesere. Du kan enten benytte fast størrelse på boksene, lage hacks for manglende css-støtte, eller simpelthen tillate avvikende formatering i for eks. IE6 eller tidligere.

edit: fixed to feil i css koden.

Endret 22. november 2007 av FrodeNilsen

Pilot_ · 22. november 2007

Mange takk for et svært utfyllende og forklarende svar. Skal se om jeg ikke klarer å få sammen siden, hvis ikke, eller det blir for mye tull, får jeg prøve å få til footeren på en annen måte, under hele siden.

Hvordan plassere en div i bunnen av en div?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer