CSS-problem: footer havner midt på siden

Tha_Zaynt · 6. desember 2004

topic'en beskriver vel problemet mitt ganske godt...

<!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">
<head>
<title>Nisselink</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="wrap">

<h1>Nisselink</h1>

<ul id="menu">

	<li><a href="?page=hovedsiden">Hovedsiden</a></li>
	<li><a href="?page=info">Info</a></li>
	<li><a href="?page=crew">Crew</a></li>
	<?php if (!isset($_SESSION["bruker"])){echo"<li><a href='?page=loginn'>Logg inn</a></li>";}?>
	<?php if (isset($_SESSION["bruker"])){echo"<li><a href='?page=minside'>Min Profil</a></li>";}?>
	<li><a href="?page=registrering">Registrering</a></li>
	<li><a href="?page=priser">Priser</a></li>
	<li><a href="?page=kontakt">Kontakt</a></li>
</ul>

 <div id="content">
<?php include ("inc.php"); ?>
 </div>

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

CSS

#footer{
   background: url(images/footer.png) repeat-y;
height: 20px;
clear: both;
}

har lagt ved et bilde som illustrerer problemet:

toss · 6. desember 2004

har du prøvd å legge inn margin-bottom:0; eller evt. en negativ verdi?

Tha_Zaynt · 6. desember 2004

skjer ikke noe hvis jeg bruker minverider nei. Alle elementene har forresten i utgangspunktet margin: 0; og padding: 0; fordi jeg har satt * til disse verdiene...

EDIT: Dette funka heller ikke:

#footer{
   background: url(images/footer.png) repeat-y;
height: 20px;
clear: both;
vertical-align: bottom;
}

Endret 6. desember 2004 av Tha_Zaynt

PoleCat · 7. desember 2004

Hva er det i koden som tilsier at den skal legge seg i bunn?

Tha_Zaynt · 7. desember 2004

trodde clear: both; gjorde det, men det gjor vel bare at float-elemnter ikke kommer over det aktuelle elementet..derfor satte jeg på vertical-align:bottom; men det funka heller ikke. Forslag til løsning?

PoleCat · 7. desember 2004

position: absolute;
bottom: 0;

ellers må du vel ty til høyder i prosent. (97%/3% feks)

Tha_Zaynt · 7. desember 2004

Det funka med :

body{
text-align: center;
}

#footer{
background: url(images/footer.png) repeat-y;
width: 703px;
position: absolute;
bottom: 0;
margin: 0 auto;
}

eneste problemet nå, er at jeg ikke får midtstilt den...har jeg oversett noe?

PoleCat · 7. desember 2004

Hehe, det blir kanskje litt vanskelig med oddetall, men du kan jo prøve:

#footer{
background: url(images/footer.png) repeat-y;
width: 703px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -351px; /* halvparten av bredden */
}

Endret 7. desember 2004 av PoleCat

Tha_Zaynt · 7. desember 2004

det funker med position:absolute og bottom: 0; men jeg har funnet ut at siden ser temmelig rar ut hvis jeg minimerer browservinduet...se vedlagt bilde

er det noen som kunne være så snill å hjelpe meg å rydde opp i koden?

url til side

http://nisselink.sjurvaage.com

url til css

http://nisselink.sjurvaage.com/style.css

Endret 7. desember 2004 av Tha_Zaynt

PoleCat · 7. desember 2004

#footer{
font-family:  "Trebuchet MS", Times, serif;
font-size: .7em;
color: #999;
background: url(images/background.png) repeat-y;
width: 704px;
text-align: center;
padding: 2px 0 2px 95px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -352px;
}

^^ Funker prima i Firefox iallefall (og ved resize).

Tha_Zaynt · 7. desember 2004

merkelig...hos meg ser det slik ut når jeg minimerer browservinduet:

kan du ta printscreen så jeg ser hvordan det ser ut hos deg?

Endret 7. desember 2004 av Tha_Zaynt

PoleCat · 7. desember 2004

Dersom jeg lager vinduet mindre enn dette, bugger den ja, men det er naturlig (en av ulempene) ved absolutt-posisjonering.

Tar ikke hensyn til andre elementer, rett og slett.

Tha_Zaynt · 7. desember 2004

hm...det må da være en bedre måte å gjøre det på. Det jeg tenkte å gjøre i utgangspunktet var litt for komplisert, men det eneste jeg vil oppnå nå, er å ha en sentrert footertekst i bunnen...eller lar ikke dette seg gjøre på noen annen måte?

Tha_Zaynt · 7. desember 2004

går det ikke an å få det til uten å bruke position absolute? evt. sette float på content og bruke clear: both på footer?

Logg inn

CSS-problem: footer havner midt på siden

Anbefalte innlegg

Tha_Zaynt

Lenke til kommentar

Videoannonse

toss

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

PoleCat

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer