überfuzzMedlem sedan apr. 2006409 inlägg Hej alla!
Jag sitter och gör en hemsida och funderar på att göra två spalter på den. Har börjat fundera på en sak tidigt i arbetet. Hur gör jag om jag vill att innehållet ska fördelas lika i två spalter..? Luddigt?
Mer preciserat: Om jag 'includar' filer vill jag att båda spalterna fylls med ungefär lika mycket innehåll hur stor eller liten plast innehållet kräver. Går det att göra, i så fall hur?
Css:en till spalterna jag har hittills är:
#main{position:relative; margin-top: 15px}
#mainleft{width:400px; height:100%; }
#mainright{width:400px; position:absolute; top:0px; left:400px;}
jarvkloMedlem sedan juli 20013 378 inlägg
überfuzz skrev:
Hur gör jag om jag vill att innehållet ska fördelas lika i två spalter..?
Hmm...
Du får bryta materialet manuellt om du vill att det skall fördelas lika eftersom aktuell webbstandard -(X)HTML/CSS2(.1) - inte innehåller några mekanismer för att göra spaltbrytningar eller fördela material över flera spalter.
Det lär finnas mekanismer för sån't i CSS3 - men det stöds (ännu) inte av t.ex. MSIE (och kommer mest troligt inte att göra det av MSIE7 heller om jag förstått saken rätt) så frågan är om det är en väg du vill gå redan nu...
Tyvärr...
Fast det är klart - har du en databasdriven webbplats kan du iofs bryta och fördela textmaterial mellan spalter redan på serversidan när du bygger ihop (X)HTML-koden - men det är en helt annan historia det.
überfuzzMedlem sedan apr. 2006409 inlägg Tack för tipset, eller info:n...
Menar du att det går att lösa mha php-skript..? Går det att göra ett skript som känner av hur stort html-koden kommer manifesteras i webläsaren och sedan delar upp tex en html-fil..? Är jag ute och cyklar nu???
jarvkloMedlem sedan juli 20013 378 inlägg Närå - du är inte ute och cyklar, och det är klart att du kan lösa det mesta med PHP (men det är naturligtvis mer eller mindre komplext beroende på innehållet)...
Om du har nyhetpuffar med rubrik, textingress och en läs-mer-länk är det förmodligen enkelt att fördela lika många i varje spalt - har du "fri löptext" är det värre iom att du då måste täcka så många alternativ... Men omöjligt är det inte... Däremot en helt annan historia (än den om hur man gör det med (X)HTML och CSS) ;)
überfuzzMedlem sedan apr. 2006409 inlägg Okej, hur göra jag för att få mina spalter att följa med innehållet ner. Klistrar med de delar av css:en som styr dem.
/*center*/
body {margin: 0px; margin-top: 20px; padding: 0px; text-align: center;}
#center {width: 800px; padding: 0px; margin-right: auto; margin-left: auto; text-align: left; background: #eee; border: 1px solid #888;}
/*main*/
#main{margin-top: 5px; position:relative; }
#mainleft{width:390px; position:absolute; top:10px; }
#mainright{width:390px; position:absolute; top:10px; left:410px;}
Som det är nu har ju background iprincip ingen höjd. Hur anpassar jag den och spalterna efter ett innehållet som varierar beroende av vilken sida användaren vill se?
jarvkloMedlem sedan juli 20013 378 inlägg Svårt - det finns ingen (känd och fungerande) mekanism för att göra två "block" lika höga...
Men du har en fast bredd på bägge kolumnerna...
Då funkar standardmetoden i http://www.alistapart.com/articles/fauxcolumns/ (se även t.ex. exemplet http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html - även om det exemplet lägger ut kolumnerna lite annorlunda än du gör)
I princip går metoden ut på att du skapar en bakgrundsbild med spaltindelning som du lägger "under" de bägge kolumnerna.
überfuzzMedlem sedan apr. 2006409 inlägg Nää, nu fattar jag inte. På vilket sätt får det min main-div att känna av hur stor plats innehållet behöver..?
Blocken behöver inte vara lika höga heller förresten. Jag har en bakgrundsbild eller färg som täcker bägge spalterna. Jag kommer som sagt include:a filer och jag kan ju styra storleken manuellt.
Alltså, jag har head, meny, main samt foot. Alla är relativt positionerade. Hur får jag dem annpassa storleken efter innehållet?
jarvkloMedlem sedan juli 20013 378 inlägg Hmm..
Använd inte position:absolute (eftersom det resulterar i att de blocken "flyter ovanpå" och på så sätt hindrar att main-div:en kan anpassa sig)
Här är ett exempel (samma metod i botten som i de länkar jag tipsade om ovan ;) )
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ett av Jarvklos exempel</title>
<style type="text/css">
html,body {margin:0;padding:0;height:100%;}
#main, #head, #meny, #foot {
width:800px;
margin:0 auto;
}
#mainleft {float: left; width: 390px; }
#mainright {float: right; width: 390px; }
#foot {clear: both}
#main { background-color:#eee; }
#head { background-color:#ee0; }
#meny { background-color:#e0e; }
#foot { background-color:#0ee; }
</style>
</head>
<body>
<div id="head">Head</div>
<div id="meny">Meny</div>
<div id="main">
<div id="mainleft">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed ut ante a sapien venenatis euismod.
Ut vitae leo non tellus congue pulvinar. Vestibulum sed risus.
Aenean eget lectus ac dui tincidunt imperdiet.
Curabitur vestibulum augue in odio. Quisque eget tortor.
</div>
<div id="mainright">
Etiam hendrerit velit nec nisl.
Quisque et sapien eu odio aliquet vehicula.
Suspendisse volutpat, magna et iaculis accumsan,
ante purus rutrum mauris, non sodales dolor mauris et urna.
Nam at ligula. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae;
Curabitur vitae justo. Nam tellus ipsum, adipiscing quis,
imperdiet vel, gravida id, sem.
Maecenas et magna nec erat tincidunt placerat.
Sed viverra, erat vitae euismod tristique, eros arcu molestie sem,
id sagittis justo urna at erat.
</div>
<div id="foot">Foot</div> <!-- inuti main! -->
</div>
</body>
</html>
Testa :bire
