geekyMedlem sedan mars 200815 inlägg Hej,
Håller på att göra en sida och jag har ett liknande problem som Trankan hade i denna tråd, men inte exakt lika så jag postar en ny tråd.
Jag vill göra en footer enligt denna modell . Det är som syns ingen perfekt modell men det ska alltså finnas fyra kolumner inuti en större div. Dessa fyra inre kolumner/divar ska vara "perfekt centrerade". De ska alltså ha samma avstånd mellan varandra och de två yttersta kolumnerna/divarna ska ha samma avstånd mot den yttre diven.
En av de största problemen är att bredden på hela contentområdet är satt till en max-width och en min-width: max-width: 85em och min-width: 65em. Det betyder att man också måste sätta varje inre div i footern till min och max width:er, eller hur? Men det blir också konstigt eftersom att innehållet i varje kolum är textlänkar av bestämd storlek (längd). Är max och min width:ar ens nödvändiga?
Ett annat problem jag har är att tänka i enheten em. Om man tittar i tråden jag länkar till ovan så har bossse ett stycke kod i sitt första inlägg som jag kan tänka mig fungerar för mig om man skippar max och min width:ar. Men bör man då byta enheten px mot em i bossses kod? Resten av sidan är byggd med relativa enheter så det känns naturligt att justera de inre divarnas position (top, left, bottom, right) med em också. Men det känns samtidigt fel. Om någon vill klargöra hur man ska tänka vad gäller enheter så vore jag tacksam.
Just nu har jag byggt det med att sätta en float:left till varje inre div och sedan justera med att sätta margin mellan varje div. Men det gör att alla divar inte blir "perfekt centrerade".
Några bra förslag på hur man kan lösa detta? Det är frittfram att komma med lösningar som kan innehålla i princip vad som helst (förutom tabeller).
jarvkloMedlem sedan juli 20013 378 inlägg Hmm...
Följande förslag bygger på att man ställer in "de fyra" så att de (inklusive mellanrummen mellan) blir 25% var av containern (se vidare kommentarer i koden)
<!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" lang="sv" xml:lang="sv">
<head>
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body, html {text-align: center; margin:0; padding: 10px;}
#container {text-align: left; margin: 0 auto 0 auto; max-width: 65em; min-width: 25em; padding: 2% 2% 2% 0; border: 1px solid navy;}
.quarter { float: left; width: 23%; margin-left: 2%; overflow: hidden; }
.thetop {padding-left: 2%; padding-bottom: 2%}
/* Bredder mellan "quarters" är margin-left på dessa (plus padding-right på containern) */
/* Detta gör iofs att max-width i praktiken blir 65em + 0.02em, men man slipper avrundningsproblem så det kanske går att leva med (?) ;) */
/* overflow: hidden --> "långa ord" klipps istället för att fukka upp layouten */
/* divven ".bordered" i ".quarter" behövs bara om varje "quarter" skall förses med synlig ram - ej annars! */
.bordered {border: 1px solid maroon; padding: 4px; }
/* finlir */
.quarter .bordered {min-height: 10em;}
</style>
</head>
<body>
<div id="container">
<div class="thetop"><div class="bordered">Detta <br />är<br /> toppen<br /> alltså</div></div>
<div class="quarter"><div class="bordered">Lorem Ipsum et cetera</div></div>
<div class="quarter"><div class="bordered">Lorem Ipsum etc. alltså om man så säger</div></div>
<div class="quarter"><div class="bordered">Lorem Ipsum och så vidare in absurdum egentligen</div></div>
<div class="quarter"><div class="bordered">Lorem Ipsum in absurdum, evinnerligen och i tid och otid - amen</div></div>
<br style="clear: both"/>
</div>
</body>
</html>
testa
... med brasklappen att den inte är testad i MSIE6 ännu (men skulle den bryta ihop där finns ju villkorliga kommentarer och diverse CSS-hack om du är inresserad ;) )
geekyMedlem sedan mars 200815 inlägg Tack håller på och testar. Återkommer med resultat. En fråga dock. Vad är anledningen till att du har satt max-width: 65em; min-width: 25em; på #container?
edit: Jag menar 25em är ganska litet, vad är anledningen att sätta det till 25?
jarvkloMedlem sedan juli 20013 378 inlägg hehe - det är bara ett värde taget ur luften för att markera att det kan vara bra att sätta en undre gräns man har kontroll över också och inte lita på att webbläsaren "stannar" i bredd nånstans.
Jag ser nu att jag borde ha använt dina värden (85em och 65 em) för tydlighet - men jag missade dem i hastigheten
geekyMedlem sedan mars 200815 inlägg Funkar helt felfritt hittills. Smart och snyggt jarvklo :) Ja, förutom i IE6. Testade på jobbet där de bara har IE6. Men får fixa nån separat cssfil för det eländet...
Om man vill att det ska vara större avstånd mellan yttre diven och de yttersta innre divsen, om du förstår vad jag menar, hur kan/bör man göra då?
Alltså om man kör typ:
#container {blablabla; padding: 2% 5% 2% 0;blablabla}
och så vill man ha 5% på andra sidan men 2% mellan de inre divarna.
Några förslag på nåt relativt smidigt?
