Fast footer

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
Mathias
Nørd
Nørd
Indlæg:145
Tilmeldt:5. apr 2012, 18:21
Kontakt:
Fast footer

Indlæg af Mathias » 6. okt 2012, 23:38

Hej jeg ville gerne have min footer bliver helt nede i siden af skærmen.

Min footer her :

Kode: Vælg alt

#footer {
	background:url(nav-bg.png);
	height:51px;
	margin:0px auto;
	padding:0;
}
html kode her :

Kode: Vælg alt

 <div id="footer">
 </div>

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Fast footer

Indlæg af scootergrisen » 7. okt 2012, 02:31

Kode: Vælg alt

#footer {
   background:url(nav-bg.png);
   height:51px;
   margin:0px auto;
   padding:0;

   position: absolute;
   bottom: 0;
}

Mathias
Nørd
Nørd
Indlæg:145
Tilmeldt:5. apr 2012, 18:21
Kontakt:

Re: Fast footer

Indlæg af Mathias » 7. okt 2012, 09:23

Kan ikke se den længere se hele koden her :

Kode: Vælg alt

 body {
 text-align:center;
 margin:0 auto;
 }
 h1 {
 font:Verdena 30%;
 }
 * { 	
	margin:0;
	padding:0;
 
 } 

 #holder { 	
	width:auto;
	height:auto;
 }

 #headerTop { 
	width:100%;
	height:122px;
	background:url(nav-top.png);
 }

 #navbar {
	background:url(nav-bg.png);
	height:51px;
	margin:0px auto;
	padding:0;
 }

 #wrap{ 
	margin:0 auto;
	width:700px; 
 }

 /* Styles for the entire LavaLamp menu */

 .nav {

	position: relative;
	height: 51px;
	margin:0 auto;
	width: 520px;
	padding:0;
	overflow: visible;

 }

 /* Force the list to flow horizontally */

 .nav li {

	float: left;
	list-style: none;

 }

 /* Represents the background of the highlighted menu-item. */

 .nav li.back {

 background:url(lava.png) no-repeat right -30px;
 width: 9px;
 height: 30px;
 z-index: 8;
 position: absolute;
 top:10px;

 }

 .nav li.back .left {
	background:url(lava.png) no-repeat top left;
	height: 30px;
	margin-right: 9px;
	width:100px;
 }

 /* Styles for each menu-item. */

 .nav li a { 

	position: relative;
	overflow: hidden;
	text-decoration: none;
	text-transform: uppercase;
	font: bold 14px arial;
	color: #ccc; outline: none;
	text-align: center;
	padding:18px 0px;
	z-index: 10;
	letter-spacing: 0;
	float: left;
	display: block;
	margin: auto 20px;

 }

 .nav li a:hover {

	color:#eee;
	text-shadow:1px 1px 2px #000;
 
 }
#indhold {
width:100%;
background:#ccc;
min-height:400px;
max-height:1200px;
margin:0 auto;
}

.indhold {
padding:4px 0 5px 0;
}

#footer {
   background:url(nav-bg.png);
   height:51px;
   margin:0px auto;
   padding:0;
   position: absolute;
   bottom: 0;
}

shukbob
Rutineret
Rutineret
Indlæg:60
Tilmeldt:1. mar 2012, 06:37

Re: Fast footer

Indlæg af shukbob » 7. okt 2012, 13:11

Du skal bare sætte denne kode ind

Kode: Vælg alt

position: absolute;
   bottom: 0;
Eller hvis man hele tiden skal kunne se den så:

Kode: Vælg alt

position: fixed;
   bottom: 0;

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: Fast footer

Indlæg af scootergrisen » 7. okt 2012, 20:07

Demo : http://scootergrisen.dk/htmlgrisen/ekse ... l0012.html

Prøv eventuelt også og sæt højde og bredde og se om det så virker.

Kode: Vælg alt

#footer {
   background:url(nav-bg.png);
   height:51px;
   margin:0px auto;
   padding:0;

   position: absolute;
   bottom: 0;

   height: 100px;
   width: 100%;
}

Besvar