Tvinge div til å ligge på bunnen av siden

lefsaker · 14. mars 2007

Hvis jeg har:

<div id="1">Toppen</div>

<div id="2">Midteb</div>

<div id="3">Bunnen</div>

Hvordan får jeg div 3 til å alltid ligge på bunnen av siden?

Jeg får den bare til å ligge på bunnen i en annen div.

Svinat · 14. mars 2007

position: absolute;

bottom: 0;

Endret 14. mars 2007 av Svinat

**Runar** · 14. mars 2007

Kodesnutten Svinat postet kan vel ikke kalles en kode, og jeg har mine tvil om den hjelper trådstarter, så jeg "videreutvikler" den litt:

HTML:

<div id="wrapper">
<div id="topp">Toppen</div>
<div id="innhold">Innhold</div>
<div id="bunn">Bunnen</div>
</div>

CSS:

div#wrapper { height: 100px; position: relative; }
div#bunn { position: absolute; bottom: 0; }

Denne skal fungere Husk at du må forandre på height i div#wrapper til den størrelsen du vil den skal ha på siden din.

Svinat · 14. mars 2007

Kanskje litt dårlig forklarte av meg, men dersom du legger til kodesnutten min på #bunn i csset, og legger diven utenfor wrapperen, skal den legge seg helt på bunn.

lefsaker · 14. mars 2007

Ingen av forslagene virket

**Runar** · 14. mars 2007

Hvis du poster hele koden du bruker, så er det lettere for oss å hjelpe deg

lefsaker · 14. mars 2007

HTML:

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style/style.css" type="text/css" />
<title>Future</title>
</head>

<body>
<div id="topbg"><div id="position">
<div id="header">			
		 </div>
<div id="wrap">

	<div  id="menu">
		<ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
</ul>
	</div>

<div id="content-wrap">
<div id="main">
<?php

switch ($_GET[id]) {

default: 

include "lipsum.php"; 

break;

case 'link':

include 'lipsum.php';

break;

}
?>
</div></div><div id="clearer"></div></div>
<div id="footer">© 2007 <strong>Future</strong></div></div></div>
</body>
</html>

CSS:

Klikk for å se/fjerne innholdet nedenfor

* {
 margin: 0; padding: 0;
}

body {
 background: #0e5f9f url(img/bg.jpg) repeat-y center;
 font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
 color: #454545; 
 text-align: center;
 position: relative;
}

#topbg {
 background: #0e5f9f url(img/bg.gif) repeat-x;
 height: 250px;
}

a, a:visited {
 text-decoration: none;
 color: #FFF; 
 background: inherit;
}
a:hover {
 color: #FFF;
 background: inherit;
}

h1 {
 font-size: 120%;
 font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
 font-weight: Bold;  
}
h2 {
 font-size: 110%;
 text-transform: uppercase;
 color: #FFF;
 font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
 font-weight: Bold; 
}
h3 {
 font-size: 110%;
 color: #FFF; 
 font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
 font-weight: Bold; 
}

h1, h2, h3, p {
 padding: 10px;  
 margin: 0;
}
ul, ol {
 margin: 5px 20px;
 padding: 0 20px;
 color: #FFF;	
}
ul span, ol span {
 color: #FFF;
}

input {
 padding:0px;
 border:1px solid #454545;
 font: normal 1em Verdana, sans-serif;
 color:#454545;
}
textarea {
 width:400px;
 padding:2px;
 font: normal 1em Verdana, sans-serif;
 border:1px solid #eee;
 height:100px;
 display:block;
 color:#777;
}

#wrap {
 width: 709px;
 background: url(img/content.gif) repeat-y center top;
 margin: 0 auto;
 position: relative;
 text-align: left;
}

#content-wrap {
 width: 550px;
 padding-left: 5px;
}

#header {
 width: 709px;

 margin: 0 auto;
 position: relative;
 height: 150px;
 background: url(img/header.gif) repeat center top;
 padding: 0;
 font-size: 14px;
 color: #FFF;
}

#menu {
 clear: both;	
 margin: 0; 
 position: relative;

 padding: 0px 0px 0 50px;
 background: url(img/menu.gif) repeat-y center top;	
 font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
 height: 29px;
}
#menu ul {
 left;
 list-style: none;
 margin:0; padding: 0;
}

#menu ul li a {
 display: block;
 float: left;
 padding: 0px 10px;
 color: #FFF;	
 text-decoration: none;
}
#menu ul li a:hover {
 background: url(img/menu_hover.gif) center top repeat-x;
 color: #FFF;	
}

#main {
 width: 95%;
 padding-left: 20px;
 float: left;
}

#main h1 {
 margin-top: 10px;
 font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
 color: #454545;	
 border-bottom: 1px solid #FFF;
 position: relative;
}

#sidebar {
 float: right;
 width: 26%;
 height: 100%;
 padding: 5px 7px 5px 10px; 
 margin: 0;	
}	
#sidebar h1 {
 margin-top: 10px;
 font: bold 12px Verdana, 'Trebuchet MS', Sans-serif;
 padding: 5px 0 5px 10px; 
 color: #FFF;
 background: url(img/sidebartop.gif) no-repeat left bottom;	

}

#sidebar h2 {
 background: url(img/sidebarbottom.gif) no-repeat top;
 border: none;
}

#footer {
 color: #454545;
 text-align: center;
 font-size: 92%;
 bottom: 0;
 margin: 0 auto;
}

#clearer {
 clear: both;
}

a, a:visited {
 text-decoration: none;
 color: #454545; 
 background: inherit;
}

a:hover {
 color: #454545;
 background: inherit;
}

img {
border: 4px;
border-color: #bfbfbf;
border-style: double;
}

.float-right {
 float: right;
 margin: 5px;
}

.noborder {
 border: none;
}

#position {
 height: 100%px;
 position: relative;
}

**Runar** · 14. mars 2007

Har du fjernet koden jeg postet fra koden du nettopp postet?

Endret 14. mars 2007 av Runar

Svinat · 14. mars 2007

Du har jo ikke position: absolute; på #footer.

**Runar** · 14. mars 2007

Du har jo ikke position: absolute; på #footer.

8154007[/snapback]

Det var det jeg la merke til også. Men han sa det ikke virket, så jeg tenkte på om han kanskje hadde fjernet kodesnutten han fikk fra meg før han postet hele koden her.

lefsaker · 14. mars 2007

Hvis jeg legger til position: absolute; på #footer så flytter den seg bare helt til venstre, og ikke noe nedover...

Endret 14. mars 2007 av lefsaker

Svinat · 14. mars 2007

Du må ta

margin: 0 auto; på den, husk også at den ikke må ligge inni noen andre divs dersom den skal ligge helt på bunn.

lefsaker · 14. mars 2007

Bah... gjorde om footeren istedenfor.

Endret 14. mars 2007 av lefsaker

Logg inn

Tvinge div til å ligge på bunnen av siden

Anbefalte innlegg

lefsaker

Videoannonse

Svinat

Runar

Svinat

lefsaker

Runar

lefsaker

Runar

Svinat

Runar

lefsaker

Svinat

lefsaker

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer