Problem att få footern "klistrad" mot botten på sidan

14 svar · 1 010 visningar · startad av lillebror 16 mars 2005

lillebrorMedlem sedan apr. 20041 597 inlägg

Frågan16 mars 2005 23:33#1

Hej,

Jag har försökt använda mig av A list apart's tutorial "Exploring footers" för att få samma effekt på min sida (www.flygfyren.nu).

Jag har följt och försökt applicera exemplet i denna tutorial men jag får inte till det. Det fattas en halv centimeter till botten där jag vill ha nederkanten på footern. Eftersom footern måste ner en bit måste "content"-delen växa med samma längd.

Nu har jag gått bet på vad som kan vara fel eftersom jag inte är en fullfjädrad CSS-expert.

Bifogar koden så kanske någon har några kloka tankar om vad som kan vara fel.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Flygfyren.nu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="flygfyren.css" type="text/css">
</head>
<body>

<div id="main">
<img name="myimage" src="imagetext.php" alt="Logo" /> 

<div id="login">
		<form action="login.php" method="POST">
		<font color="#FFFFFF">Användarnamn:</font> <input type="text" name="username" class="texta" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';"/>
		<font color="#FFFFFF">Lösenord:</font> <input type="password" name="password" class="texta" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';"/>
		&nbsp;&nbsp;<input type="submit" value="Logga in" class="buttons">
		</form>
		</div>

<div id="meny">
	<?php
	//show_menu($dbHost, $dbUser, $dbPassword, $dbName, $_SESSION["username"]);
	show_menu($_SESSION["username"]);
	?>
	</div>

<div id="content"> 
	  <!--<div id="content_inline_left">--> 
	    <p class="heading1">Rubrik</p>
		<p class="text">Test</p>
	</div>
</div>

<div id="footer"><p class="login">Copyright&nbsp;&copy;&nbsp;Flygfyren.nu, 2005&nbsp;</p>
	<p>
      <a href="http://validator.w3.org/check?uri=referer"><img border="0"
          src="http://www.w3.org/Icons/valid-html401"
          alt="Valid HTML 4.01!" height="31" width="88"></a>
    
	
 	<a href="http://jigsaw.w3.org/css-validator/">
  	<img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!">
 	</a>
	</p>
	</div>

</body>
</html>

CSS:

html, body{
  	margin-top: 0px;
	padding:0px;
   	/*background-color: #F9F9F9;*/
	/*background-color: #E8E0BF;*/
	background-color: #F5F3EB;
	/*background-image: url(bg.jpg);*/
	height: 100%;
}

#main {
position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
/*position: relative;*/
width:740px;
/*height:auto;*/
/*min-height: 100%;*/
border-left: solid 1px #0D4159;
border-right: solid 1px #0D4159;
/*border-bottom: solid 1px #0D4159;*/
margin-left:auto; margin-right:
auto; background-color:#ffffff;
overflow:hidden;
}

html>body #main {
    height: auto;
	}

#meny
{
	position: absolute;
	top: 73px;
	left: 20px;
	width: 600px;
	height: auto;
	padding: 0px 0px 0px 0px;  
}

#login
{
	position: relative;
	top: 25px;
	left: 0px;
	width: 740px;
	height: 15px;
	line-height: 12px;
	border-top: #3AA4D9 groove 2px;
	border-bottom: #3AA4D9 groove 2px;
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
  	color: #000000;
    /*background-color: #ECF1F5;*/
	/*background-color: #BFDDF4;*/
	background-color: #1E79A6;
	padding: 5px 0px 0px 21px;
}

#content
{
	position: relative;	
	/*min-height: 100%;*/
	top: 26px;
	left: 0px;
	width: 718px;
	height: 100%;
	/*border: #FF0000 solid 1px;*/
	background-color: #FFFFFF;
	/*background-color: #3ABDF9;*/
	padding: 20px 0px 20px 20px;
}

#footer
{
    position: relative;
 	/*top: 25px;*/
	/*position: absolute;*/
    bottom: 0px;
	left: 0px;
	width: 720px;
	height: 75px;
	border-top: #C8C8C8 groove 2px;
	border-left: solid 1px #0D4159;
	border-right: solid 1px #0D4159;
	border-bottom: #C8C8C8 groove 2px;
	background-color: #1E79A6;
	/*background-color: #BFDDF4;*/
	padding: 10px 10px 10px 10px;
	text-align: center;
	/*background-image: url(footer.jpg);*/
	margin-left:auto; 
	margin-right: auto;
	overflow:hidden;
}

Hoppas någon har koll på det här :)

PepeJeriaMedlem sedan feb. 2003774 inlägg

17 mars 2005 12:03#2

Du har väl redan ställt denna fråga?

lillebrorMedlem sedan apr. 20041 597 inlägg

17 mars 2005 14:51#3

det kan man ju kanske tycka att jag har...

frågeställningen i den tidigare tråden var ju:

Footern vill jag ska ta vid där content-diven slutar.

Att få footern placerad efter DIVEN har jag löst! Och det är inte samma sak som jag frågar i denna tråd där jag vill att footern skall vara "klistrad" mot botten av webbläsaren...right?

oskobMedlem sedan maj 20021 558 inlägg

17 mars 2005 14:58#4

dinfooterdiv {
width:100%;
p\osition:absolute;
bottom:0;
left:0;
height:50px;
}

lillebrorMedlem sedan apr. 20041 597 inlägg

17 mars 2005 16:38#5

Det fungerar inte! :OO Någon som har lyckats med "konststycket" att uppnå denna effekt tidigare?

jarvkloMedlem sedan juli 20013 378 inlägg

17 mars 2005 18:52#6

Yep.

Kolla koden på
http://member.webforum.nu/2241/okkidos_bilskola.html

Viktigt:

Notera att #belowthebottom ligger inuti #container, och #bottom utanför.

Princip:

Genom att sätta containern till 100%, och sedan "dra upp" sidfoten ( #bottom ) med en negativ toppmarginal får man det att fungera oavsett om det är mer innehåll än utrymme på höjden i #container eller ej.

Trixet är att inse att man behöver "ta höjd" för utrymmet som kommer att hamna bakom #bottom (så att inge innehåll hamnar under #bottom) genom att ha det tomma utrymmet som garanteras av #belowthebottom längst ner inuti #container...

Hoppas du blev klok på det här, metoden funkar när du kör webbläsaren i "standards mode", så var noga med valet av <!DOCTYPE. :birp

lillebrorMedlem sedan apr. 20041 597 inlägg

17 mars 2005 20:02#7

YEEEEEEEES! Thank you so much!!! :birp

Det var ju mycket enklare än vad någonsin hade kunnat tro :) Nu sitter footern "fastklistrad" där jag vill ha den! Tack för en mycket enkel och tydlig beskrivning av tillvägagångssättet. Ikväll kommer jag somna gott!

Nu börjar jag förstå varför det är så viktigt att använda sig av rätt DOCTYPE. Är det helt enkelt så att vissa saker klarar inte webbläsaren av att visa rätt om man har fel DOCTYPE? Är det en uppsättning regler (som ett bibliotek) som finns lagrade där?

Kika gärna på resultatet. Jag blev nöjd. En annan sak jag upptäckte var att du inte använde dig av "position: relative" eller motsvarande. Jag trodde att man alltid var tvungen att precisera hur de olika sidelementen skall förhålla sig till varandra. Men det gick ju bra ändå. Du kanske har en bra föklaring på det? :)

Än en gång...tack så mycket! :birp

lillebrorMedlem sedan apr. 20041 597 inlägg

17 mars 2005 20:20#8

En liten sak bara jag funderat på. Högst upp på sidan har jag en blå rand där jag har ett par inloggningsrutor i. Jag har grubblat på hur jag ska få bort det överflödiga utrymmet under formuläret. Jag har försökt med height: 12px och margin: 0px motsvarande men det blå fältet blir lika högt oavsett vad jag gör? Vad kan jag ha missat?

echoSweMedlem sedan nov. 20041 189 inlägg

17 mars 2005 20:54#9

Tja... Utan att fundera över hur högt ditt formelement är eller varför det har 1em i margin-bottom så kan du skriva:

#login
{
	width: 720px;
	height: 18px;
	margin: 0px;
	border-top: #3AA4D9 groove 2px;
	border-bottom: #3AA4D9 groove 2px;
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
	background-color: #1E79A6;
	padding: 3px 0px 0px 21px;
}

för att få den så hög du vill. i och med boxmodellen så kommer den automatiskt att lägga sig under, eftersom den är ett block. (den lägger sig enbart bredvid om du använder floats, ngt som kan bli avhjälpt med clear för övrigt)

echoSweMedlem sedan nov. 20041 189 inlägg

17 mars 2005 20:59#10

Kommentar till första problemet.
Jag har tänkt likadant, men med en annan snurr: jag vill att #bottom alltid ska ligga i underkanten till viewport oavsett något annat. position:absolute funkar ju inte, men det gör å andra sidan position:fixed! Roligt att hålla på med just position:fixed faktiskt, man kan lägga alla möjliga roliga bilder längst ner och skapa en fade-out via semitransparenta png bilder.

och självklart funkar ju det inte i Internet Explorer, men vad hade man förväntat sig!

jarvkloMedlem sedan juli 20013 378 inlägg

17 mars 2005 21:01#11

lillebror skrev:

DOCTYPE?

http://www.webforum.nu/showthread.php?s=&threadid=77151
http://www.webforum.nu/showthread.php?s=&threadid=121571

lillebror skrev:

En annan sak jag upptäckte var att du inte använde dig av "position: relative" eller motsvarande. Jag trodde att man alltid var tvungen att precisera hur de olika sidelementen skall förhålla sig till varandra. Men det gick ju bra ändå. Du kanske har en bra föklaring på det? :)

I just det här exemplet är koden gjord så att de olika "blocken" ligger i rätt ordning i "flödet" (dvs de hamnar automatiskt under varandra i containern eftersom det är just så som "normala" <div>-taggar beter sig ;) )- och kan man utnyttja grundegenskaperna genom att koda "i rätt ordning" så behöver man oftast inte hålla på att positionera om dem - ja inte mer än att jag "drar upp" sidfoten lite med den där negativa marginalen då alltså, men det är den enda manipuleringen av "flödet" som behövs här eftersom layouten inte är flerspaltad någonstans.

När man väl vant sig vid att tänka på det sättet känns det ganska onödigt att ta till faktiska koordinatpositioneringar om man inte behöver ;)

Det där med formuläret har jag inte koll på på rak arm (speciellt inte i brist på länk till din kod ;) ) - men starta en ny tråd med det specifika problemet så lär du få hjälp ganska snart ändå - natten är ung! ;) :birp

echoSweMedlem sedan nov. 20041 189 inlägg

17 mars 2005 22:35#12

Håller med ovanstående... Och jag som trodde jag hade givit en fullgod förklaring och till och med hintat om marginalen på form elementet... *suck* ;)

zcorpanMedlem sedan dec. 20042 245 inlägg

17 mars 2005 22:53#13

echoSwe skrev:

Kommentar till första problemet.
Jag har tänkt likadant, men med en annan snurr: jag vill att #bottom alltid ska ligga i underkanten till viewport oavsett något annat. position:absolute funkar ju inte, men det gör å andra sidan position:fixed! Roligt att hålla på med just position:fixed faktiskt, man kan lägga alla möjliga roliga bilder längst ner och skapa en fade-out via semitransparenta png bilder.

och självklart funkar ju det inte i Internet Explorer, men vad hade man förväntat sig!

Det går att fixa med lite expressions. :)
http://annevankesteren.nl/test/examples/ie/position-fixed.html

Dock krävs det att IE är i Quirks mode och att JavaScript är aktiverat.. :OO

lillebrorMedlem sedan apr. 20041 597 inlägg

17 mars 2005 23:08#14

Helt plötsligt har en helt ny värd öppnat sig för mig :) Jag installerade Mozilla Firefox och vips så fick jag bukt med en del av mina tidigare problem i IE.

I IE kunde jag inte ange height-elementet för en div som sträckte sig över hela sidan. Den vägrade ändra på sig i höjdled utan var i ett fast läge hela tiden. När jag öppnade och gjorde samma sak i Firefox så såg man resultat direkt. Hur kommer det sig att Microsoft är så dåliga inom detta område? De måste ha en superdålig tolk inbyggd i programmet som inte kan språket...:e

echoSweMedlem sedan nov. 20041 189 inlägg

17 mars 2005 23:25#15

Jo, deras renderingsmotor är inte i bästa laget. Roligt att du har bytt!
MS brydde sig inte. De tänker släppa IE 7 nu dock, med tabbar och vad som verkar vara enbart delvis stöd för CSS2. Får väl se hur det blir framåt sommaren och låt oss hoppas att de uppdaterar webbläsarnas renderingskapacitet och inte bara deras säkerhetshål.