webForumDet fria alternativet
Logga in

Sidfots trubbel med DIV & CSS

12 svar · 702 visningar · startad av joel_sundkvist

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#1

Försöker göra en sida utan tabeller vilket inte visat sig vara det lättaste... ;)
Vill att sidfoten skall hamna längst ned på sidan (läs: skärmen) om innehållet är "lite". Om innehållet kräver scroll skall sidfoten hamna längst ned på sidan (efter att man scrollat genom innehållet).

Det jag hittills lyckats åstadkomma liknar nån slags "dålig-kvasi-frames lösning" där sidfoten täcker över lite av innehållet när man scrollat längst ned... inte snyggt... x(

Ett annat problem är ju som bekant IE 5 Mac. Har en särskild stilmall som jag så elegant importerat in m h a en bugg i den browsern:

<style type="text/css">
@import("style2_ie_mac.css");
</style>

"url" saknas som ni kanske ser... Kul lösning som verkar funka utan javascript och dyl. :)

Sidan kan ses på: http://hem.bredband.net/joesun/ws/valkommen2.html

Här kommer lite css...

IE 5 Mac:

html, body {

	background-image:url(gfx/bg.gif);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #666;
	}

#content {
	padding:0;
	margin-left: 0;
	}

#header {
	color: #006;
	border-bottom: 1px solid #006;
	margin-bottom: 0px;
	}
	
#footer {
	position:fixed;
	bottom:0;
	background-color: #363636;
	border-top: 1px solid #666;
	font-family: Verdana, Arial,Helvetica, Sans-Serif;
    font-size:11px;
    line-height:15px;
	text-align: right;
	padding: 2px 10px 5px 0;
	clear: both;
	color:#bbb;
	}

och "vanliga" stilmallen:

html, body {
	height:100%;
	width:100%;
	background-image:url(gfx/bg.gif);
	background-repeat:repeat-x;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #666;
	}

#content {
	padding:0;
	margin-left: 0;
	}

#header {
	color: #666;
	margin-bottom: 0px;
	}
	
#footer {
	position:fixed; 
	bottom:0;
	width:100%;
	background-color: #363636;
	border-top: 1px solid #666;
	font-family: Verdana, Arial,Helvetica, Sans-Serif;
    font-size:11px;
    line-height:15px;
    text-align: right;
	padding: 2px 10px 5px 0;
	clear: both;
	color:#bbb;
	}

Som jag har förstått det så kräver IE mac position:fixed; för detta resultat. Det jag alltså är ute efter är att sidfoten skall anpassa sig efter innehållet.

Lite innehåll = sidfoten längt ned på skärmen.

Mycket innehåll = sidfoten längst ned på sidan efter allt innehåll scrollats igenom.

Nån som vet?

Edit: Verkar funka på IE 6 för Windows. Sitter själv på mac så det är svårt att kolla liksom. Någon som har en aning?

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#2

Ingen som vet?

PepeJeriaMedlem sedan feb. 2003774 inlägg
#3

Antingen det ena eller det andra skulle jag säga.
Vad du skulle kunna göra är att lösa det med javascript, fast det känns väl ändå som en rätt onödig lösning?

typ att du kolla sidan höjd med javascript och beroende på hur mycket innehåll det finns välja olika css-klasser på din footer-div

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#4

PepeJeria skrev:

Antingen det ena eller det andra skulle jag säga.
Vad du skulle kunna göra är att lösa det med javascript, fast det känns väl ändå som en rätt onödig lösning?

Precis!!

Det blir väl att gå tillbaka till tabellerna ett tag till då *suck* ...
Synd att det inte funkar. :l

PepeJeriaMedlem sedan feb. 2003774 inlägg
#5

Varför ska du gå tillbaka till tabeller? Hur skulle du lösa det då? Jag menar, du får väl samma problem då.

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#6

jag har löst det med tabeller... :)

kolla: http://hem.bredband.net/joesun/sh/

PepeJeriaMedlem sedan feb. 2003774 inlägg
#7

Ja, vad ska man säga... kommer inte på hur man kan göra detta utan tabeller och utan js... :p

Om någon har en lösning så vore det välidgt interessant att veta...

p.s skön design, enkel o snygg

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#8

PepeJeria skrev:

Ja, vad ska man säga... kommer inte på hur man kan göra detta utan tabeller och utan js... :p

Om någon har en lösning så vore det välidgt interessant att veta...

p.s skön design, enkel o snygg

Inte jag heller... och detta kanske är ett bevis på att webbläsarna inte är redo för en tabellfri miljö än :P

Kanske Jarvklo har nån smart lösning på detta problem?

jarvkloMedlem sedan juli 20013 378 inlägg
#9

Hmm...
Vet inte om den är heltäckande - men denna variant verkar funka i MSIE6/Win och Mozilla/Win.

Funkar dessutom "skapligt" i MSIE5.x/Win såvitt jag kan se (men får där skönhetsfel i överlappningen mellan "omslag" och "sidfot" som jag inte enkelt lyckats klura bort på rak arm...)

<!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" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html,body {margin:0;padding:0;height:100%;text-align:center;background-color:gray}
#omslag {
  text-align:left;
  margin:0 auto 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width:300px;
  min-height:100%;
  background-color:#eeeeee;
}
#bakomfoten {
  height:20px;  /* #fotens height */
}
#foten {
  margin:-21px auto 0 auto; /* height + border-top */
  height:20px;
  width: 300px;
  border-top:1px solid black;
  margin-bottom:0;
  background-color: #cc99ee;
}
-->
</style>

<!--[if IE]>
<style type="text/css">
#omslag {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="omslag">

  <div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Maecenas quam arcu, consectetuer a, venenatis eget, pharetra quis, tortor. 
      Nulla nec tortor. Ut hendrerit congue risus. 
      Vivamus lobortis mauris ut ligula. 
      Proin sed eros vel felis tristique imperdiet. 
  </div>

<!-- tom div "bakom" sidfoten så att kanterna på #omslag "går ända ner" -->
  <div class="bakomfoten">&nbsp;</div>
</div>

<div id="foten">Sidfoten</div>

</body>
</html>

Jag testade att bygga på principen "Positionera ingenting, men utnyttja att man ka ha negativa värden på margin på sidfoten"

I MSIE testade jag sedan med en <div> som fick 100%höjd, och lade sidfoten efter med negativ margin-top... Och det funkade!

I Mozilla måste man ju köra med min-height:100% istället för height:100% (annars tappar man bakgrunden och kantlinjerna om texten scrollar i vissa fall...)

Så - för att slippa dubbla stilmallar satte jag Mozillas värden i stilmallen, och modifierade sedan height för MSIE med en villkorlig kommentar (som ju bara fukar i MSIE) innehållande en stilmall till...

Testa på: http://member.webforum.nu/2241/sidfotsflyt.html

Verkar funka i "nyare läsare i Windows" - även om man verkar vara tvungen att "reloada" i Opera om man ändrar storleken på fönstret ;)

Hur är det i andra läsare på andra plattformar?

PepeJeriaMedlem sedan feb. 2003774 inlägg
#10

Skön lösning Jarvklo! Synd bara att det ska vara så trixigt att få till något som man så lätt kan göra med tables.

jarvkloMedlem sedan juli 20013 378 inlägg
#11

When all else fails - use tables!
gammalt djungelordspråk ;)

CSS lösningar med icke-statiska koordinater ("flytande layouter") är oftast ett h**e att få till och i en del fall går det ju som bekant från ett gäng trådar här i forumet överhuvudtaget inte att få till *alla* detaljer med enbart CSS...

Men det är ganska skoj att pilla med CSS-layouter - när man råkar ha tålamod och tid för det samtidigt ;)

Och ibland råkar man lyckas också :e

joel_sundkvistMedlem sedan feb. 2003240 inlägg
#12

Mycket snygg lösning!!!
Håller med PepeJeria :)

PepeJeriaMedlem sedan feb. 2003774 inlägg
#13

Lustigt, man kan nästa tro att någon på List Apart läste detta inlägg och skrev en artikel om detta! ;)

Kom in idag:
http://www.alistapart.com/articles/footers/

134 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)