6 svar · 283 visningar · startad av lillebror
Hej!
Har lite problem med footern. Fick hjälp med min CSS-kod för ett litet tag sedan (behövdes lite upprensning och optimering) och då försvann koden för att få footern "klistrad" mot botten av sidan om innehållet inte fyller ut helt och hållet.
Jag har använt mig av Jarvklo's exempel men det blir något fel. Footern lägger sig till vänster på sidan och sedan ligger den för långt ned.
Någon som har någon idé vad som är fel? :)
Glömde visst adressen: Footer
Problemet löst!
Du har inte lust att förklara hur du gjorde så flera kan hitta lösningen här?
Nu var jag snabb. Det såg väldigt bra ut så länge innehållet i CONTENT-delen var några rader bara. När jag utökade innehållet så att det tog upp mer än en webbsida så vill inte footern vara med utan den fastnar halvvägs på sidan samtidigt som innehållet bara fortsätter utanför DIVen. Helskumt!
Om någon skulle komma på vad det är...skriv gärna ett inlägg! :e
greyhound skrev:
Du har inte lust att förklara hur du gjorde så flera kan hitta lösningen här?
Det kan jag visst det när jag klurat ut felet :)
Footern åter på botten! Dock återstår det att få den vita bakgrunden i CONTENT-delen att täcka hela textmassan ner mot footern....
Nedan är ett exempel skapat av Jarvklo för att få en dynamisk sida där footern anpassar sitt läge med hänsyn till hur mycket information som finns i CONTENT-delen.
Länken dit är: http://member.webforum.nu/2241/okkidos_bilskola.html
Anledning till att footern inte placerades där den skulle berodde på hur divarna förhöll sig till varandra på min sida eftersom jag tidigare fått hjälp med CSS-koden som i sin tur var uppbyggd på ett något annorlunda sätt än tidigare.
I hopp om att lösa mysteriet med den försvunna och elementära diven #belowthebottom iklädde jag mig rollen som CSI-agent och gav mig ut på uppdrag! :e I den fantastiska CSS-världen ändrade jag helt enkelt färg på #belowthebottom till röd färg istället för ingen färg. Då uppenbarade sig problemet genast (Se bild för resultat före och efter). DIVen hade ju "rymt" haha :e och placerat sig en bra bit upp på sidan.
Problemet löstes med att sätta clear: left; på #belowthebottom-diven!
That's it!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div-test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body { /**/
color: #fff;
background-color:#ff6600;
margin:0;
padding:0;
height:100%; /**/
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #fff;
margin:0;
padding: 5px 10px 5px 10px;
}
#container {
width:740px;
min-height:100%; /**/
background-color:#666; /* samma som main */
}
#header{
width: 740px;
height: 140px;
background-color:#333;
margin:0;
}
#menu {
width:740px;
height: 23px;
background-color:#999;
margin:0;
}
#main {
width:740px;
background-color:#666;
margin:0;
}
#belowthebottom {
height:28px; /* samma som #bottom */
}
#bottom{
width:740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color:#999;
margin-top:-28px; /* samma som height */
}
</style>
<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>menu</p></div>
<div id="main"><p>main</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique
tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et,
orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel
purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra
risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat.
Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend,
arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat
dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum,
diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse
platea dictumst.</p>
<p>Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas
dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia
eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor
rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit
amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo
est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui
interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper
ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.</p></div>
<div id="belowthebottom"> </div>
</div>
<div id="bottom"><p>Bottom</p></div>
</body>
</html>
