Pitäis saada tehtyä CSS:llä sivustolle taulukkomainen rakenne diveillä. Miten määritetään sivuston osa-alue, jonka korkeus kasvaa sisällön mukana?? eli jos vaikka haluaa, että sisältö-div jatkuu alas niin pitkälle kuin sisältöä riittää ja vasta sen jälkeen tulis footer-div..?
Ei siinä ole määrittelemistä, jos et irroita diviä normaalista rivityksestä määrittelemällä sille esimerkiksi ominaisuutta position : absolute; tai floattaamalla. Oletuksenahan divit asettuvat peräjälkeen ylhäältä alas.
Ilmeisesti olet tekemässä monipalstaista sivua?
Joo, eli siis sisältö-divin vasemmalla puolella on navigointi-divi ja oikealla puolella muut-divi. Sitten kaikkien näiden kolmen alapuolella footer-divi. Mulla on tuo position: absolute käytössä kaikkien divien kohdalla, mutta esim. jos sisältö-diviin kirjoittaa tarpeeks paljon tekstiä siten, että sen alkuperäinen korkeus suurenee, se painuu footer-divin alle. Tarkoituksena olisi saada se footer-divi liikkumaan ylös-alas -suunnassa sisältö-divin korkeuden mukaan.
Siispä muuta sisältödivi siten, että se ei ole absoluuttisesti sijoiteltu (ja sama juttu footerille). Sitten laita marginaalia molempiin laitoihin sen verran, että ne absoluuttisesti asetellut sivupaneelit saavat oman tilansa eikä sisältödivin tekstit jää niiden alle.
Taustakuvilla voi sitten kikkailla "taulukkomaisen" lopputuloksen, eli jos kaikki pääpalstat on saman divin sisällä, niin sillä saa yhden laitapalkin taustan kuntoon, sitten sisältödiviin voi myös laittaa taustakuvan toiselle sivupalkille (tosin tällöin täytyy laittaa paddingia marginaalin sijasta, jotta tausta voi sijoittua oikeaan paikkaan).
Jos otan absoluuttisen sijoituksen pois, niin sisältö-divi hyppää sivun vasempaan ylälaitaan ja vasen sivupaneeli on sen päällä. Koitin laittaa marginaaleja sille, mutta se ei auttanut. Saiskos tähän jonkun koodiesimerkin yksinkertaisesta css:n avulla tehdystä sivurakenteesta? :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Hyvin yksinkertainen kolmen palstan malli</title>
<style type="text/css">
* { border : 0; margin : 0; padding : 0; }
#paaotsikko {
background : black;
color : white;
height : 40px;
line-height : 40px;
padding : 10px;
}
#navi {
left : 0;
padding : 5px;
position : absolute;
top : 60px;
width : 140px;
}
#info {
padding : 5px;
position : absolute;
right : 0;
top : 60px;
width : 90px;
}
#sisalto {
margin : 0 100px 0 150px;
padding : 5px;
}
#tiedot {
background : black;
color : white;
padding : 10px;
}
</style>
</head>
<body>
<div id="dokumentti">
<h1 id="paaotsikko">Omat sivut</h1>
<div id="navi">Navi</div>
<div id="sisalto">
<h2>Sisaltö</h2>
<p>Tässä se on.</p>
</div>
<div id="info">Info</div>
<div id="tiedot">Minä tein</div>
</div>
</body>
</html>Laitan nykyään aina kaiken yhden päädivin sisälle, korjaa joitakin asetteluongelmia selaimien välillä (yleensä IE ja/tai Opera tekee asettelussa jotain erilailla kuin mitä Firefox, Safari ja Konqueror). Toisaalta päädivi antaa myös tehdä muita kätsiä juttuja, kuten keskittää sivun vähän ohuempaan palstaan.
Tämän esimerkin lopputulos on identtinen jokaisessa uudessa graafisessa työpöytäselaimessa IE5:stä ylöspäin, tietääkseni.
Toimii muuten loistavasti tuo asemointi, paitsi että sisältö-divi on vasemmassa laidassa navigointi-divin päällä.. eli ilmeisesti noi marginaalit eivät toimi (?).
Mitä selainta käytät? Testasin tuon nyt näillä selaimilla: IE5, IE5.5, IE6, Opera 7.54, Opera 8, Opera 9 ja Firefox 1.5 enkä nähnyt mitään ongelmaa.
Kävin css-tiedoston läpi ja löysin ääkkösen. Eli vika oli siinä että #sisalto oli #sisältö. Kiitoksia kauheesti avusta, tollast designia juuri hainkin! :)
Nyt tuli vastaan tällainen ongelma: Jos main-text divissä on tarpeeksi vähän tekstiä, footer-divi nousee ja jää navbar-divin alle. Miten saan footerin nousemaan/laskemaan riippuen aina korkeimman elementin, joko main-textin tai navbarin mukaan? HTML-koodissa divit menevät siten, että kaikki edellä mainittua kolme diviä ovat content-divin sisällä. Tässä ois mun CSS-koodia:
#content {
position: relative;
width: 900px;
border: 3px solid black;
}
#main-text {
background-color: #ffffff;
border: 1px solid black;
margin-left: 160px;
padding-left: 5px;
padding-right: 5px;
}
#navbar {
background-color: #fafafa;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
border: 1px solid black;
width: 140px;
}
#footer {
background-color: #ffffff;
margin-top: 5px;
border: 1px solid black;
text-align: right;
padding: 5px;
}Merri, testasin tuota myös sinun antamallasi esimerkkikoodilla, ja samalla tavalla kävi. Mikäli #infossa on esim. vain yksi rivi tekstiä, ja #navissa taas kymmenkunta linkkiä, niin #tiedot jää silloin #navin alle.
Määritä min-height sisällölle. IE:lle pitää vielä erikseen kikkailla erillisellä tyylitiedostolla pelkkä height, IE käsittelee heightin min-heightinä. Muut selaimet kuitenkin noudattavat height-arvoa oikein.
Tuo ratkais ongelman, kiitos!
Itse asiassa mitään erillistä tyylitiedostoa IE:tä varten ei tarvinnut tehdä. Googletin netistä tällaisen samaan CSS-tiedostoon lisättävän ratkaisun:
/* for Internet Explorer */
* html #main-text {
height: 400px;
}Tuo height 400px siis vastaa Firefoxin ymmärtämää min-height -määritystä.
(Mod. edit: kooditageja kannattaa käyttää.)
Älä vaan käytä jäsennysvirheitä hyväksesi.
Käytä mieluummin Microsoftin ja IE:n työryhmänkin suosittelemaa tapaa, eli ehdollisia kommentteja.
Eli teet HTML-koodiin, head-tagien väliin tällaisen:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="styles_ie.css" /> <![endif]-->
Ja sitten tee tuon osoittamaan .css-tiedostoon tuo koodi ilman *html-hackia.
Sitä tiedostoa voi sitten käyttää myöhemmin ilmenneiden bugien korjaamisen.
Jep, CSS:n parsimisvirheet on korjattu IE7:ssä, joten tuo oma korjauksesi aiheuttaisi vain päänvaivaa myöhemmin. Yllä näkyvä GoldenDragonin esittämä "conditional comment" on se millä ongelman saa ratkaistua aiheuttamatta ongelmia. En tiedä tukeeko IE7 min-ominaisuuksia; myöhemmän ajan murhe.
Aihe on jo aika vanha, joten et voi enää vastata siihen.