Hei,
Olen siirtymässä vihdoin html-koodista xhtml-koodaukseen.
Eipä tuossa kauheasti eroa, lähinnä pitää DIV-tagien käyttö pitää opetalla taulukkojen sijaan.
Näin alkuun tuntuu niiden käyttö suhteellisen helpolta, joskaan vielä en varmasti
osaa kaikkia niiden hyötyjä käyttää.
Nyt harmaita hiuksia on tuonut kun teen sivustoa mikä on 100% leveä, eli "peittää" koko selaimen.
Etenkin ongelma on, että mikä olisi helpoin/parhain tyyli saada 2 DIViä vierekkäin.
Idea:
100% leveä header
100% leveä menu
50% leveä vasen div, 50% leveä oikea div
100% leveä footer
Ennen kuin oman koodini laitan muokattavaksi niin pari kysymystä.
(Kun ei kukaan jaksa toiselle valmista koodia tehdä kuitenkaan ;) )
1. Jos määritän menun 100% leveäksi niin kun selainta pienentää niin menulinkit menee aivan kasaan.
Ne eivät mene kasaan jos määritän PIKSELIleveyden menulle, vaikka 600px.
Siitä seuraa se ongelma, jos laitan vaikka menun ylä- ja alaborderiksi 2 pikselin viivat niin
ne viivat loppuu 600 pikselin jälkeen eivätkä ole siis koko selaimen leveitä, niin itse
asiassa koko menu-div on vain sen 600 pikseliä eikä koko selaimen leveä.
Onko ainut ratkaisu että tekee eka vaikka menutausta-divin ja määrittää sen leveydeksi 100% ja tekee borderit
jne ja määrittää leveydeksi 100% niin se on sitten ihanasti koko selaimen leveä, ja tuon divin sisään vasta
määrittää menu-divin, jolle laittaa sen pikselileveyden niin ei mene teksti kasaaan jos pienentää selainta.
Vai voiko tuon tehdä vain yhden divin sisään niin että teksti ei pienenny kun selain-ikkunaa pienennät?
2. Vasen ja oikea DIV, yhdessä esimerkissä oli tyyliin:
molemmat; float:left ja leveydet 50% ja 49,9% jotta ne on vierekkäin.
Jotku puhuu, että ei kannatta floattia käyttää...
Mikä teidän mielestä on paras tapa tehdä 2 vierekkäistä DIVIä, jotka siis vievät koko selain leveyden yhdessä.
(Toki niiden sisään pitää sitten omat DIVinsä tai taulukko johon teen vasempaan tekstiä ja oikealle kuvan)
3. Ilmeisesti koodaus tyylejä noihin DIV-tageihin on todella montaa eri tyyliä, että saman lopputuloksen saa
helposti tai vaikeesti :) Sekin vielä mietityttää että olisiko apua tuossakin jos tekee sivuun jotkut
"container" ja "content" DIVit, jotka sitten "hallitsee" koko sivua.
Lähdetään näin liikkeelle :)
Vastataan nyt vajailla tiedoillani kunnes Merri tulee sanomaan jotain fiksumpaa :)
1. Tee menusta skaalautuva. Eli laita menuelementit (linkit?) vaikka listaan, ja määrittele css:llä niille ulkoasu. Laita ne linkit tai li-elementit block-tason elementeiksi, ja määrittele niille sopiva leveys ja laita ne floattamaan keskenään, niin että ne menevät vierekkäin, mutta jos vain sivuttaistila riittää. Tällöin ikkunaa pienennettäessä linkit menevät alekkain, mikä on mielekkäämpi vaihtoehto kuin se että sivua joutuisi sivuttaisvierittämään. Tälläinenhän järjestelyhän on esim. täällä putkassa.
2. Ensinnäkin haluaisin varmistua että todella haluat tuollaisen järjestelmän, missä todellakin molemmat ovat ikkunan suhteellisen koon mukaan määriteltyjä. Paljon yleisempäähän on että vasemmalla on esim. navigaatiopalkki, jonka ei ole mielekästä muuttaa kokoaan ikkunan koon mukaan. Tälläisen tekeminen onnistuu määrittelemällä vaikka vasemman navigaatiopalkin leveyden vaikka 15em ja laittamalla sen floattamaan vasemmalle. Sitten oikeanpuoleiselle, ikkunan kokoon mukautuvalle sisältöosalle tarvitsee vain määritellä vasemmalle marginia se 15em, jolloin sen pitäisi hypätä navigaatiopalkin oikealle puolelle.
Suhtaudu näihin neuvoihin kuitenkin hieman kriittisesti. En ole pitkään aikaan jaksanut paneutua näihin ulkoasuihin, sillä käytän nykyisin yleensä jotain vapaan lisenssin ulkoasua joita netistä löytyy melko järkyttävä määrä, ja jotka ovat paljon esteettisempiä ja paremmalla XHTML/CSS tekniikalla toteutettuja mihin itsellä kyvyt riittävät. Ja niistähän voi ottaa luonnollisesti oppia ihan vapaasti, esimerkiksi Andreas Viklundin templatet ovat mielestäni huippuluokkaa, niistä kannattanee kurkistella kuinka ne ovat toteutettuja:
http://andreasviklund.com/
1. Joo, tuo menun tekeminen juuri noin on tuttua kauraa. Se juuri ei ole ongelma.
Heh, ilmeisesti osa näistä on vain tyyliseikkoja.
Onhan sitten monellakin juuri noin, että menulinkit menee lyttyyn jos selainta pienentää esim. ohjelmointiputkalla.
Toisaalta oma mielipide on, että kyllä sivusto katsellaan ihan koko ruudulla, joten sinänsä tää on mun mielestä vaan pilkunviilausta, mutta silti haluaisin että teksti ei mene lyttyyn :) Jopa mun se menupalkki on niin matala, että jos teksti menee lyttyyn niin se menee menupalkin alle. (Joo, ehkä sekin olisi korjattavissa, että menu palkkikin suurenee alaspäin.) Mutta haluan pitää tosta omasta tyylistäni kiinni =)
Se on mun "ongelma", että niin paljon olen netistä katsonut esimerkkejä, että mikä nyt olisi vaikka tähän mun ulkoasuun se paras vaihtoehto, siksi tulin tänne foorumille utelemaan mielipiteitä.
Ehkä mun pitäis vaan mun koodia tänne laittaa ja sitten voitta käydä läpi ja katsoa ainakin kaikki turhuudet pois =)
Tää nyt on ainutlaatuinen (siis ekaa ja viimeistä kertaa teen) ulkoasu mun tarpeisiin. Siks menu ylhäällä leveenä ja sisältö kahdessä DIV:ssä vierekkäin. Vasemmalla tekstit ja oikealla iso kuva pienen tekstilaatikon kera.
EDIT: tässäkin yksi esimerkki:
http://www.tjkdesign.com/articles/liquid/4.asp
ottaa vaan navigointi DIVin pois ja lisää menupalkin...
Ymmärsin vissiinkin väärin mitä hait "lyttyyn menemisellä" takaa, eihän noi Putkassa lyttyyn mene ainakaan Firefoxilla, alekkain vain :P. Haluat siis että sivua ei voi pienentää, ainakaan kovin paljon leveyssuunnassa (ja jos pienentää, tulee sivuttaisvierittämispalkit)? Itse en näe tälläistä ulkoasua hyvänä vaihtoehtona, kun Div/CSS pohjaisen ulkoasun yhtenä suurimmista eduista on juuri skaalautuvuus, ja täten parempi käytettävyys erilaisilla selaimilla ja asetuksilla (kännyköillä, internet tableteilla, käyttörajoitteisilla henkilöillä yms.).
Ja itse en ainakaan aina katsele aina sivuja kokoruudulla, nytkin selainikkuna on minulla leveyssuunnassa vain puolet näytöstä (kiitos Gridmoven, jolla voi helposti jakaa näytön eri ikkunoille). Erityisen kätevää ohjelmoidessa, kun tarvii jatkuvasti vilkuilla referenssiä.
Mutta mutta, mikäs minä olen saarnaamaan. Voit myös kokeilla min-width -määrettä, joka ei varmaan nimeään enempää esittelyjä tarvitse. Tosin IE6 ei taida tuota tukea, mutta poistumassahan se jo on.
Sori. Joo, siis allekkain menee :) Mutta en siis halua, että menee edes allekkain, vaan linkit eivät liiku mihinkään suuntaan kun selain ikkunaa pienentää.
Jollain keinolla sain niin, että esim. noi menulinkit ja headerin kuva (kun ne on keskitetty) niin ne liikkuu aivan vasempaan laitaan jos ikkunaa siirrät pienemmäksi. Sellainen skaalaus on ihan ok, mutta en halua että itse DIVit pienenee tai tekstit menisi allekain. En vaan halua :))
Joo, vaikka ei koko ruutua käytössä niin eihän mun menuvalikko vie kun sen n. 600 pikseliä mikä nykypäivän resoilla on ok... siis voit vaikka pitää puolet selaimesta esillä ja näät kaikki menulinkit, ainakin melkein.
Hmm...Siis sivuskrollauspalkit tulee juuri siinä tapauksessa jos teen niin että kaikki tekstit menee lyttyyn siiis ALLLEKAIN. Se on eri asia jos haluaa käyttää selain ikkunaa todella pienenä sitten ainakin saa mun versiossa leveys suunnassa skrollata.
Kyseessä siis lähinnä "taiteellisen yksinkertainen" oma portfolio-sivusto, mitä on tarkoitus ihailla koko leveydellään ;) Toki isolla resoluutiolla katottuna reunoissa on tilaa ja sitä kautta jos on pienempi reso niin koko saitin sisältö näkyy ihan hyvin ilman mitään leveysskrollausta.
(Kauheen nopeasti tulee kirjoitettua, toivottavasti en kovin epäselvästi selitä)
Nyt sain yhellä versiolla aika hyvää jälkeä, katsotaan vielä miten saan sisällön oikeille kohdille.
Saa toki vielä antaa vinkkejä mistä vaan aiheeseen liittyen :)
Tämä on nyt täysin suoraan tähän liity, enkä vastaa sinällään mihinkään kysymykseen, mutta tämä ponnahti tästä keskustelusta mieleeni. Divejä käytetään yleensä vähän liian paljon, joten ajattelin tarjota vaihteen vuoksi äärimmäistä divittömyyttä. Ja siitä huolimatta sivussa on palstajako.
<html>
<head>
<title>Divitön palstajako</title>
<style type="text/css">
body { margin : 0; padding : 0; }
h2,h3,h4,h5,h6,p,pre { margin-left : 50%; }
#otsikko,#footer { background : #000; color : #FFF; margin : 0; padding : 10px; text-align : center; }
#valikko {
float : left;
margin : 0;
padding : 0;
width : 49.5%;
}
#valikko li { display : inline; margin : 0; padding : 0; }
#valikko a {
display : block;
padding : 15px 25px;
}
#valikko a:hover {
background : #000;
color : #FFF;
}
#footer { clear : both; }
</style>
</head>
<body>
<h1 id="otsikko">Otsikko</h1>
<ul id="valikko">
<li><a href="">Ensimmäinen linkki</a></li>
<li><a href="">Toinenkin linkki</a></li>
<li><a href="">Kolmatta tapausta</a></li>
<li><a href="">Neljäski ehti vielä kaveeraamaan</a></li>
<li><a href="">Viiettä viiään jo pois</a></li>
</ul>
<h2>Terve terve</h2>
<p>Ootpahan tullunna sivuille.</p>
<h3>Katohan</h3>
<pre>Jottain() {
koodiaki;
} mukamas() {
tässä;
}</pre>
<p>Kaikenlaiset asiat onnistuvat.</p>
<p>Tarvii vaan vähän käyttää mielikuvitusta.</p>
<p id="footer">© Loppu tuli</p>
</body>
</html>Omassa käytössäni divit ovat lähes aina olemassa vain kahden eri syyn takia: joko koostan niillä joidenkin elementtien sisällön yhdeksi kokonaisuudeksi (eli ne kuuluvat loogisesti yhteen), tai sitten tarvitsen CSS-tuen rajallisuuden vuoksi ylimääräisiä elementtejä toteuttamaan jotakin, mitä tarvitsen.
Huomioitavaa tässä edellisessä virkkeessäni on se, että monet aloittelevammat tai kokemattomammat yrittävät usein ratkaista ongelmia pelkästään lisäämällä divien määrää tai käyttämällä ainoastaan niitä sen sijaan, että keskittyisivät selvittämään löytyisikö CSS:stä vastaus ongelmaan. Joten tässä sivu joka kannattaa painaa mieleen: CSS Property Index - siitä näkee CSS2:n kaikki standardoidut arvot, joista lukemalla ja kokeilemalla voi löytää kaiken mitä tarvitsee :)
Kannattaa myös vilaista lävitse listaa HTML-elementeistä ja niiden rooleista, ja miettiä tarkkaan miksi jokin elementti on olemassa. Esimerkiksi vaikkapa DL, DT, DD voivat aluksi tuntua täysin tarpeettomilta. On hyvä muistaa että tyylittely on lähes täysin vapaata, vain jotkut tietyt HTML-elementit ovat historiallisista syistä johtuen tyylirajallisia. Jos jokin elementti käyttäytyy eri tavalla kuin olettaisi, saattaa sillä olla vain jokin CSS-asetus, josta et vielä tiedä, tai jonka olemassaoloa ja oletusarvoa et ole tullut huomioineeksi.
Tulipahan taas jotain turhaa aatosta pukattua väsyneenä.
Ajattelin tarjota sitten vielä hieman lisää katseltavaa. Tämän osalta voinee tehdä niin, että ensin vaan kummemmin tutkimatta kopioi koodin tiedostoon ja katsoo miltä lopputulos näyttää. Sen jälkeen voi miettiä päässään että miten se oltaisiin voitu toteuttaa. Sitten voi kurkkia koodia.
<html>
<head>
<title>Divitön palstajako</title>
<style type="text/css">
body { font-size : 85%; margin : 0; padding : 0; min-width : 770px; }
h1,h2,h3,h4,h5,h6,p,pre { border-width : 0 300px; border-style : solid; border-color : #CCD; margin : 0; padding : 5px; }
h1,#footer { border-color : #AAB; }
#otsikko,#footer { background : #000; color : #FFF; margin : 0; padding : 10px; text-align : center; }
#valikko,#extra {
float : left;
margin : 0;
padding : 0;
width : 300px;
}
#extra { float : right; }
#valikko li,#extra li { display : inline; margin : 0; padding : 0; }
#valikko a,#extra a {
display : block;
padding : 15px 25px;
}
#valikko a:hover,#extra a:hover {
background : #000;
color : #FFF;
}
#footer { }
</style>
</head>
<body>
<h1 id="otsikko">Otsikko</h1>
<ul id="valikko">
<li><a href="">Ensimmäinen linkki</a></li>
<li><a href="">Toinenkin linkki</a></li>
<li><a href="">Kolmatta tapausta</a></li>
<li><a href="">Neljäski ehti vielä kaveeraamaan</a></li>
<li><a href="">Viiettä viiään jo pois</a></li>
</ul>
<ul id="extra">
<li><a href="">Ei oo tosi</a></li>
<li><a href="">Ei vaan voi</a></li>
<li><a href="">Ihan pöhnöä</a></li>
</ul>
<h2>Terve terve</h2>
<p>Ootpahan tullunna sivuille.</p>
<h3>Katohan</h3>
<pre>Jottain() {
koodiaki;
} mukamas() {
tässä;
}</pre>
<p>Kaikenlaiset asiat onnistuvat.</p>
<p>Tarvii vaan vähän käyttää mielikuvitusta.</p>
<p id="footer">© Loppu tuli</p>
</body>
</html>Kiitos Merri hyvistä vinkeistä! Pitää oikein ajatuksella vielä kotikoneella lukea ja testailla.
Eilen luulin, että ratkaisin ongelmani laittamalla vasemman divin ja oikean divin ominaisuuksiin: float: left ja leveydet 50% ja 49,9%
Tuossa oli ainoa ongelma se, että kun selainta pienensi niin oikean puoleinen DIV menee kirjaimellisesti vasemman divin päälle. Kyllä kai sit hyväksyn, että ne skaalautuu, mutta mulla joku mättää kun se menee sen päälle.
Toisenlainen ratkaisu on, kun tein taulukon vasemman ja oikean divin ympärille. Sitä kautta lopputulos on juuri mitä haluan, mutta kun olisin tuon niin halunnut tehdä ilman tablea.
Loppulauseet: Mä en voi ymmärtää miten vaikeeta toi on tehdä diveillä!?
Siis kaksi vierekkäistä diviä, jotka yhteensä vie 100% (tai sen 99,9%) selaimen leveydestä ja niin, että divit ja niiden sisältö ei liiku mihinkään kun selainta pienentää... tai saa ne vähän skaalautua, mutta kunhan eivät mene toisten päälle. En ymmärrä miten miljoonalla googletus kerrallakaan en tähän vastausta löydä? :D
Käytännössä ratkaisuna siis menee esimerkiksi se, että vasemman puoleinen on floatattu, mutta oikeanpuoleiseen on laitettu marginaalia vasemmalle hieman enemmän kuin floatattu elementti on (kun käytetään prosenttiarvoja). Tätä käytin esimerkiksi tuossa divittömässä taitossa, marginaalia vaan tuli jokaiseen pääsisällöksi tarkoitettuun elementtiin.
Floattaamisen sijasta tällä marginaalitavalla voi myös tehdä absoluuttisesti sijoitellun elementin. Sen rajoituksena on lähinnä se, että sen kanssa ei pysty suoraan millään varmistamaan, että esimerkiksi footer olisi aina sen alapuolella. Sen pystyy tosin kiertämään sillä, että asettaa sisältöalueen minimikorkeuden.
Voit muuten myös määrittää minimileveyden sivulle, esim. laittaa body-tagiin min-width : 770px; niin sitten sivu ei enää pienene siitä (paitsi nyt IE6:ssa).
Hmm..."ok".
Mielestäni kokeilin jollain tapaa tuota sinun ekaa vinkkiä.
Ainiin, tuota "min-width" pitää kokeilla.
(juu, koodin pitää olla validia ja tukea montaa selainta...mutta jos joku käyttää selainten vanhoja versioita niin voivoi ;) )
Kiitos taas.
Yltiöyksinkertaistettu näyte:
<div id="palsta1"></div> <div id="palsta2"></div>
#palsta1 {
float : left;
width : 49.5%;
}
#palsta2 {
margin-left : 50%;
}Eli huomattavaa on se, että en ole määrittänyt #palsta2:n leveyttä. Sitä ei tarvitse määrittää, koska haluttu lopputulos tulee jo tuolla.
Hieman monimutkaisempi, jolla voi tehdä sisältöalueen palstoja:
<div class="palsta">
<div class="rivi">
<p>Eka palsta</p>
</div>
<div>
<p>Tekstiä<br />kaksi riviä</p>
</div>
<div class="rivi">
<p>Toinen palstarivi<br />Jolla kaksi riviä</p>
</div>
<div>
<p>Tekstiä</p>
</div>
<div class="rivi">
<p>Kolmas palstarivi</p>
</div>
<div>
<p>Floateista huolimatta pääpalstan laatikon pitäisi olla koko palstoitusalueen kokoinen.</p>
</div>
</div>div.palsta {
border : 1px solid red;
overflow : hidden;
position : relative;
}
div.palsta div {
float : left;
overflow : hidden;
width : 49.5%;
}
div.palsta div.rivi {
clear : both;
}Selainten CSS3-tuki on vielä tässä vaiheessa liian vajaa, että uskaltaisin käyttää kehittyneempiä valitsimia. Nyt on pakko käyttää "turhaa" .rivi luokkaa. Olisi parempi jos voisin vain viitata siihen nth-childilla (joka on CSS3-ominaisuus).
Ja disclaimerina, näitä esimerkkejä en testannut vaan vetäisin päästä suoraan.
Kiitos vielä esimerkeistä. Testailen illalla tai huomenna, kuittailen sitten onnistuko silti säätämään väärin :)
Merri kirjoitti:
Yltiöyksinkertaistettu näyte:
<div id="palsta1"></div> <div id="palsta2"></div>#palsta1 { float : left; width : 49.5%; } #palsta2 { margin-left : 50%; }Eli huomattavaa on se, että en ole määrittänyt #palsta2:n leveyttä. Sitä ei tarvitse määrittää, koska haluttu lopputulos tulee jo tuolla.
No onhan tuo sitten yksinkertaista! :)
Tai suunnilleen noin teinkin, mutta pitänee lähdekoodi tehdä alusta uudestaan tämän ympärille kunnolla niin sitten varmasti ei tulee turhaa koodia ja divit eivät mene toisten päälle. (sehän mulla oli enää ongelma)
Et määrittänyt #palsta2:n leveyttä, mutta eihän siitä mitään haittaakaan ole vai?
Muuten nythän nuo skaalautuu ihan nätisti, kun selainta pienentää.
Mutta mitä tyyliä tohon pitää lisätä jos haluaa että noi DIV:it ei skaalaudu ollenkaan kun selainta pienentää, vaan ovat tiukasti tekstisisältöineen aivan paikallaan?
Sit niille pitää antaa fiksattu leveys, vaikka pikseleinä.
Jos tahdot myös keskityksen, niin sitten tarvitset isännöivän elementin. Keskityksen toteutustapa riippuu tosin hieman siitä, millainen sivusta muuten tulee: onko tarkoitus että jotkin muut elementit vievät kaiken tilan leveyssuunnassa vaiko ei?
Jos koko sivu rajataan tiettyyn leveyteen, niin nykyselaimilla on mahdollista käyttää body-elementtiä siten, että sen leveys rajataan tiettyyn arvoon ja sitten se keskitetään (margin : 0 auto;). Tällöin pohjavärit ja mahdolliset taustakuvat asetetaan jo html-elementtiin. Vanhemmilla selaimilla oli kuitenkin vähän ongelmia tämmöisen temppuilun kanssa, mutta toisaalta joka päivähän niiden merkitys vähenee.
Olga: Joo, niinhän se on. Jokin ongelma tuossakin oli? No en muista mikä, eli varmaan olekaan. :)
Merri:
Joo, keskitetty pitää olla. (täytyy nyt katsoa miten oikein sen teen, tuppaa olee monta vaihtoehtoa)
Siis kyseisellä sivulla on monta elementtiä (header, menupalkki, pari graafista viivaa ja alapalkki), jotka siis pitää olla 100% leveitä.
Eli tuon mukaan sivuston "keskustan" missä on vasen div ja oikea div niin periaatteessa niidenkin pitää peittää leveydestä 100%, mutta itse tekstisisältö on molemmissa vain jotain esim. 500px. Se miten tämän toteutan niin on vähän epäselvää...Siis voinko jotenkin diveille määrittää marginaalia tai paddingia että sisältö asettuu oikeaan kohtaan. Toisaalta sinunkin palsta esimerkissä noiden leveydet piti määrittää prosentteina, joten pitäisiköhän minun laittaa noiden "keskus divien" sisään vielä omat "sisältö divit".
Ehkä mun ois korkee aika laittaa pian koodia teille niin siitä on sitten helpompi muokata ja ihmetellä mitä haen takaa. :)
Tälläinen väliaika huomio:
<!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" lang="fi">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fi" />
<style type="text/css">
#vasen
{
float:left; width:49.5%; background-color:#CCCCCC;
}
#oikea
{
margin-left:50%; background-color:#FF0000;
}
</style>
</head>
<body>
<div id="vasen">
111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111
</div>
<div id="oikea">
222222222222222222222222222222222222222222222
222222222222222222222222222222222222222222222
222222222222222222222222222222222222222222222
</div>
</body>
</html>Tuossa se ongelma olikin, eli kun on paljon (teksti)sisältöä niin kun pienennät selainta niin vasen divin sisältö menee oikean divin päälle tai toisinpäin menee jos otat oikealta diviltä marginin pois ja annat sille levydeksi vaikka 49,9%.
Tai tuo vissiin on normaalia käytöstä? Nyt pitäisi määrittää jotenkin niin, että divit lopettaisi skaalauksen kun selaimen leveys loppuu tai sitten niin, että ne kummatkaan divit ei sisältöineen skaalaudu ollenkaan!?
Yksi mahdollisuus lienee, että teen noiden sisään vielä toiset divit ja niihin vasta laitan (teksti)sisällön ja määritän niille diveille jonkun kiinteän pikselileveyden vai?
Tässä on pari erinäköistä varmistusta:
- bodylla on min-width
- vasemmalla palstalla on overflow : hidden;
- kaikki kappaletagit on rajoitettu olemaan korkeintaan 500 pikseliä leveitä (leipätekstinhän pitäisi aina olla kappaletageissa, eikä vain rivinvaihdoin eroteltuna)
<!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" lang="fi">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fi" />
<style type="text/css">
body {
min-width : 770px;
}
#vasen
{
float:left;
width:49.5%;
background-color:#CCCCCC;
overflow:hidden;
padding : 5px 0;
}
#oikea
{
margin-left:50%;
background-color:#FF0000;
padding : 5px 15px;
}
p {
max-width:500px;
text-align:justify;
}
</style>
</head>
<body>
<div id="vasen">
<p>111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111</p>
</div>
<div id="oikea">
<p>111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam aliquam lacinia nisi. Morbi id nibh nec sapien commodo convallis. Ut dui. Quisque tincidunt mi ut est. Vivamus ut magna. Phasellus at purus. Mauris ac odio eu lectus ultricies gravida. Fusce tincidunt tincidunt pede. Aenean accumsan, pede sed tincidunt elementum, dolor neque ultricies est, ullamcorper pretium dolor nisi ultricies augue. Donec posuere tristique orci. Phasellus luctus commodo est. Integer dignissim. Vestibulum enim diam, sollicitudin et, rutrum sed, tincidunt sit amet, mi. Pellentesque ut nunc vitae tellus aliquam auctor. In ultrices, mi et consectetuer pulvinar, nisi leo nonummy quam, a rutrum ipsum orci at nibh. Proin metus nunc, accumsan quis, placerat quis, lobortis at, arcu. Praesent venenatis. Integer sed quam a orci feugiat blandit. Nam neque. Aenean euismod dui in leo.</p>
<p>Nunc pulvinar. Mauris eu mauris. Sed ut purus. Nullam nec felis. Vivamus ut tellus eget quam viverra ultricies. Etiam malesuada ante eget turpis. Vestibulum lectus lorem, mattis sed, dictum et, commodo vel, urna. Nulla feugiat porta lacus. Phasellus ullamcorper, lorem at lacinia dapibus, metus sapien congue tortor, vel luctus est ligula nec nisi. Donec nonummy, est in molestie commodo, mauris nisi commodo arcu, eu sollicitudin arcu augue non mi. Vivamus hendrerit.</p>
</div>
</body>
</html>en vielä suostu katsoo mitä koodia laitoit...taisin nyt itse onnistua jotakin kautta. Saat kohta koodin. =)
Kuten aikaisemmin sanoin niin "keskus divien" sisään laitoin vielä omat "sisältö divit". Ja koko keskusken ympärille vielä "content div" ja headerin ja footerin jätin contentin ulkopuolelle. Tyyleistä sitten näetkin miten ne alustavasti määritellyt. Tuossa vielä "keskus divit" skaalautuu kun selainta pienentää, mutta eivät skaalaudu toistensa päälle!
<!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" lang="fi">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fi" />
<style type="text/css">
html,body{margin:0;padding:0}
#header
{
height:120px;background-color:#065478;text-align:center; width:100%;
}
#content
{width: 1000px;margin-left: auto;
margin-right: auto;
}
#vasen
{
float:left; width:49.5%; background-color:#CCCCCC;
}
#vasen2
{
background-color:#eeeeee; width:500px;
}
#oikea
{
background-color:#FF0000; margin-left:50%;
}
#oikea2
{
background-color:#eeeeee; width:500px;
}
#footer
{
height:30px;background-color:#065478;text-align:center; width:100%;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="content">
<div id="vasen">
<div id="vasen2">
111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111
</div>
</div>
<div id="oikea">
<div id="oikea2">
222222222222222222222222222222222222222222222
222222222222222222222222222222222222222222222
222222222222222222222222222222222222222222222
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>Hyväksyykö Merri tuollaisen virityksen?
(aivan sama, monen tuskallisen päivän jälkeen toi ainakin toimii ja pelkillä diveillä! :) )
Vielä tietysti vähän pelottaa, että kun lisää parit viivat ja borderit ja kaiken sisällön niin meneekö sitten tossa joku mönkään...kaiken järjen mukaan ei.
Nyt katon mitä koodia laitoit hetki sitten.
EDIT: Katsoin koodisi. Sehän oli vähän samankaltainen kuin tämä minun?
Tai sinä sait vähemmillä diveillä homman toimimaan antamalla tyyliä p-tagille jne. Mutta eihän tässä minunkaan versiossa mitään vikaa? Eihän? :)
Tässä nyt oman pohjani vientiä edemmäs samaan tapaan, karsien pois aiempaan verrattuna niitä tyylejä, joita ei tarvita halutun efektin saamiseksi:
<!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" lang="fi">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fi" />
<style type="text/css">
#header,#footer {
min-width : 1000px;
}
#header {
background-color : #065478;
height : 120px;
text-align : center;
}
#content {
background-color : #EEF7FF;
margin : 0 auto;
overflow : hidden;
position : relative;
width : 1000px;
}
#vasen {
background-color : #CCD9EE;
float : left;
overflow : hidden;
padding : 5px 0;
width : 500px;
}
#oikea {
background-color : #DEF;
margin-left : 500px;
padding : 5px 15px;
}
p {
text-align : justify;
}
#footer {
background-color : #065478;
height : 30px;
text-align : center;
width : 100%;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="vasen">
<p>111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111</p>
</div>
<div id="oikea">
<p>111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111<br />111111111111111111111111111111111111111111111</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam aliquam lacinia nisi. Morbi id nibh nec sapien commodo convallis. Ut dui. Quisque tincidunt mi ut est. Vivamus ut magna. Phasellus at purus. Mauris ac odio eu lectus ultricies gravida. Fusce tincidunt tincidunt pede. Aenean accumsan, pede sed tincidunt elementum, dolor neque ultricies est, ullamcorper pretium dolor nisi ultricies augue. Donec posuere tristique orci. Phasellus luctus commodo est. Integer dignissim. Vestibulum enim diam, sollicitudin et, rutrum sed, tincidunt sit amet, mi. Pellentesque ut nunc vitae tellus aliquam auctor. In ultrices, mi et consectetuer pulvinar, nisi leo nonummy quam, a rutrum ipsum orci at nibh. Proin metus nunc, accumsan quis, placerat quis, lobortis at, arcu. Praesent venenatis. Integer sed quam a orci feugiat blandit. Nam neque. Aenean euismod dui in leo.</p>
<p>Nunc pulvinar. Mauris eu mauris. Sed ut purus. Nullam nec felis. Vivamus ut tellus eget quam viverra ultricies. Etiam malesuada ante eget turpis. Vestibulum lectus lorem, mattis sed, dictum et, commodo vel, urna. Nulla feugiat porta lacus. Phasellus ullamcorper, lorem at lacinia dapibus, metus sapien congue tortor, vel luctus est ligula nec nisi. Donec nonummy, est in molestie commodo, mauris nisi commodo arcu, eu sollicitudin arcu augue non mi. Vivamus hendrerit.</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>Kunhan muistaa bordereita laittaessa sitten säätää myös leveyksiä, niin kaiken pitäisi olla ok. Esim. jos vasemmalle puolen laitat borderin, niin sehän kasvattaa elementin kokonaisleveyttä, joten joko leveyttä pitää karsia tai sitten vastaavasti oikean puolimmaisen vasenta marginaalia kasvattaa.
Tämä esimerkkini eroaa sillä, että se toimii myös IE:llä. Oma versiosi saa aikaan efektin, jossa IE sijoittaa oikeanpuolimmaisen palstan sisemmän elementin alkamaan vasta vasemman palstan jälkeen. Ongelma johtuu IE:n bugista / standardin noudattamattomuudesta floattien kanssa.
Merri kirjoitti:
Tässä nyt oman pohjani vientiä edemmäs samaan tapaan, karsien pois aiempaan verrattuna niitä tyylejä, joita ei tarvita halutun efektin saamiseksi.
Ok, testaan tätä koodiasi kohta.
Merri kirjoitti:
Kunhan muistaa bordereita laittaessa sitten säätää myös leveyksiä, niin kaiken pitäisi olla ok. Esim. jos vasemmalle puolen laitat borderin, niin sehän kasvattaa elementin kokonaisleveyttä, joten joko leveyttä pitää karsia tai sitten vastaavasti oikean puolimmaisen vasenta marginaalia kasvattaa.
Toki. Tässä tarkoitin vain, että bordereita teen menuvalikkolle ja footterille jne, en itse "sisältö diveille". Joten ei tästä huolta. Mutta kun huomannut, että kaikki on epävarmaa niin siksi heitän tuollaisen asian ilmoille, että koko koodi menee sekaisin "jos laitan esim. footerille borderin". :D
Merri kirjoitti:
Tämä esimerkkini eroaa sillä, että se toimii myös IE:llä. Oma versiosi saa aikaan efektin, jossa IE sijoittaa oikeanpuolimmaisen palstan sisemmän elementin alkamaan vasta vasemman palstan jälkeen. Ongelma johtuu IE:n bugista / standardin noudattamattomuudesta floattien kanssa.
Ok, testaan kohta.
Hmm...En kyllä itse huomaa mitään eroa kun katson koodiani ie:lla tai firefoxilla!? Eikä tuo ongelman selostuksesikaan kuulostanut ongelmalta vaan kuulosti just siten miten tuon haluankin toimia!? (siis käytän ie7, ie6:sella mikä vaan kusee ;))
----------
EDIT:
Hyvinhän tuo sinun esimerkki toimii ja tosiaan vähemmällä koodilla/diveillä, joten ehkä nyörryn ja otan tuon sinun esimerkin minun saitin pohjaksi. Kiitos.
Vielä pari selvennöstä noista tyyleistäsi. Mieluummin keskustelen kuin googletan.
#content {
background-color : #EEF7FF;
margin : 0 auto;
overflow : hidden;
position : relative;
width : 1000px;
}niin, eihän tuon keskustan tarvitsekaan kirjaimellisesti olla 100% leveä, joten esim. tuo 1000px käy.
-tuo margin kohta säätää sen sisällä olevat divit keskelle?
-Miä tuo overflow kohta tarkoittaa?
-Position: relative. Eli on missä on =) vai miten tuon selittäisi?
#vasen {
background-color : #CCD9EE;
float : left;
overflow : hidden;
padding : 5px 0;
width : 500px;
}-Tää olikin ok, eli leijuu sitten vasemmalle. Onko tuo float pakko olla?
#oikea {
background-color : #DEF;
margin-left : 500px;
padding : 5px 15px;
}Ei tässäkään mitään epäselvää...
Eka ihmettelin mistä se tietää, että tämä on 500px leveä, mutta se tuleekin content miinus vasen div leveys.
Nyt aloin lisätä omaa koodia ja tekstisisältöä. Hyvältä näyttää toistaiseksi.
Ainoastaan sellainen vika, että oikeanpuoleinen div aloittaa (teksti)sisällön esittämisen noin 10 pikseliä alempaa kuin vasemmanpuoleinen div. Otin vielä sinun esimerkistäsi noi padding määritykset pois ja laitoin vasemmalle diville 15px left ja top paddingia ja samat padding määritykset oikealle diville, mutta sama ongelma säilyy...?
#contentin overflow : hidden; ja #vasemman float liittyvät toisiinsa: käytännössä overflown näkyvin vaikutus on se, että jos elementin näkyvän alueen ulkopuolelle sijoitetaan lapsielementti tai muuta (kuten outline-tyyli), niin se leikataan siten että se näkyy vain kyseisen elementin alueella (laskien borderit mukaan). Tällä on myös kuitenkin olemassa toinen vaikutus: mikäli leveyttä tai korkeutta ei ole määritetty, niin elementti venyy myös floatatun sisältönsä mittaiseksi. Tämä tarkoittaa, että vasen palsta voi olla pidempi kuin oikea ja silti #content venyy haluttuun mittaan asti.
Vasemmalla palstalla overflow : hidden; taas on juurikin siksi, että se estää liian leveää sisältöä rikkomasta leiskaa.
Mitä tulee padding-ongelmaan, niin kannattaa tarkistaa käytettyjen lapsielementtien marginaalit. Paddingia on myös itseasiassa pakko olla palstadiveissä, koska Firefox onnistuu hieman sähläilemään lapsielementtien marginaalien ja palstojen oikean koon suhteen. En ole tullut selvittäneeksi onko tämä bugi vai standardin pilkuntarkkaa noudattamista, mutta ainakaan sitä ei ole korjattu koko Firefoxin elinkaaren aikana.
margin : 0 auto; tosiaan keskittää, eli sääntö menee ylös ja alas 0, oikealle ja vasemmalle auto. Turhaahan sitä on kirjoittaa kaksi pitkää riviä kun yksi lyhyt riittää :)
Sitten lopulta position : relative; - tiedät varmaan että absoluuttisesti asetellut elementit (position : absolute;) sijoittuvat body-elementin mittojen mukaisesti? Käytännössä relative aiheuttaa sen, että #contentin sisäiset absoluuttisesti sijoitellut elementit sijoitetaankin #contentin mittojen mukaan. Käytännössä sitä ei välttämättä tässä tarvita, mutta voit kokeilla miten suuri vaikutus sillä on lisäämällä jonkin absoluuttisesti sijoitellun elementin hetkeksi.
Sitten, millainen maailma olisi ilman IE:tä? Tämäkin asia olisi hieman helpompi, kuten alla olevasta esimerkkikoodista näkee.
Tässä ideana on se, että #vasen ja #oikea ovat aina täyden sisällön mittaisia. Tämä demonstroituu kätevästi sivulla olevia nappeja painelemalla.
Koska IE ei jostakin käsittämättömästä syystä johtuen vieläkään tue taulukkotyylien määrittämistä mille tahansa elementille, niin sitä varten joutuu osoittamaan omat koodinsa, jotta saadaan aikaan sama efekti.
<!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" lang="fi">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fi" />
<style type="text/css">
#header,#footer {
min-width : 1000px;
}
#header {
background-color : #065478;
height : 120px;
text-align : center;
}
#content {
background-color : #EEF7FF;
display : table;
margin : 0 auto;
position : relative;
width : 1000px;
}
#vasen {
background-color : #CCD9EE;
display : table-cell;
padding : 5px 15px;
width : 50%;
}
#oikea {
background-color : #DEF;
display : table-cell;
padding : 5px 15px;
width : 50%;
}
p {
text-align : justify;
}
#footer {
background-color : #065478;
height : 30px;
text-align : center;
width : 100%;
}
</style>
<!--[if IE]><style type="text/css">
#content,#vasen,#oikea {
display : block;
overflow : hidden;
}
#vasen {
float : left;
height : expression(eval(document.getElementById('oikea').scrollHeight > this.scrollHeight ? document.getElementById('oikea').scrollHeight : this.scrollHeight));
width : 470px;
}
#oikea {
float : right;
height : expression(eval(document.getElementById('vasen').scrollHeight > this.scrollHeight ? document.getElementById('vasen').scrollHeight : this.scrollHeight));
width : 470px;
}
</style><![endif]-->
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="vasen">
<form><p><button onclick="var l=document.getElementById('lipsum_vasen');l.style.display=(l.style.display!='block' ? 'block' : 'none');return false">Vasen lipsum</button></p></form>
<p id="lipsum_vasen" style="display:none">Nunc pulvinar. Mauris eu mauris. Sed ut purus. Nullam nec felis. Vivamus ut tellus eget quam viverra ultricies. Etiam malesuada ante eget turpis. Vestibulum lectus lorem, mattis sed, dictum et, commodo vel, urna. Nulla feugiat porta lacus. Phasellus ullamcorper, lorem at lacinia dapibus, metus sapien congue tortor, vel luctus est ligula nec nisi. Donec nonummy, est in molestie commodo, mauris nisi commodo arcu, eu sollicitudin arcu augue non mi. Vivamus hendrerit.</p>
</div>
<div id="oikea">
<form><p><button onclick="var l=document.getElementById('lipsum_oikea');l.style.display=(l.style.display!='block' ? 'block' : 'none');return false">Oikea lipsum</button></p></form>
<p id="lipsum_oikea" style="display:none">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam aliquam lacinia nisi. Morbi id nibh nec sapien commodo convallis. Ut dui. Quisque tincidunt mi ut est. Vivamus ut magna. Phasellus at purus. Mauris ac odio eu lectus ultricies gravida. Fusce tincidunt tincidunt pede. Aenean accumsan, pede sed tincidunt elementum, dolor neque ultricies est, ullamcorper pretium dolor nisi ultricies augue. Donec posuere tristique orci. Phasellus luctus commodo est. Integer dignissim. Vestibulum enim diam, sollicitudin et, rutrum sed, tincidunt sit amet, mi. Pellentesque ut nunc vitae tellus aliquam auctor. In ultrices, mi et consectetuer pulvinar, nisi leo nonummy quam, a rutrum ipsum orci at nibh. Proin metus nunc, accumsan quis, placerat quis, lobortis at, arcu. Praesent venenatis. Integer sed quam a orci feugiat blandit. Nam neque. Aenean euismod dui in leo.</p>
</div>
</div>
<div id="footer"></div>
</body>
</html>Tätä en suosittele lähinnä sen takia, että expressionit ovat JavaScriptiä, joten et välttämättä saa identtistä lopputulosta kaikilla selaimilla. Toisaalta, leiskahan ei mene pahasti rikki vaikka expressionit jäisivät pois (voit kokeilla kommentoimalla koodinpätkän pois).
Jees, kiitos vielä kerran. Toli monta epäselvää asiaa selväksi. :)
Nyt rupean tuota padding asiaa ihmettelemään.
Jos vielä tulee jotain niin palaan asiaan...
EDIT:
Kysytääs vielä. Tein menu-divin ja sinne ihan normilinkit.
Miten saan tehtyä kyseisten linkkien väliin vaikka noin 10 pikselin välit?
Laittamalla toisen divin menun sisään ja määrittämällä pikselileveyden jne jne niin tuota väliä saisi, mutta onnistunee helpomminkin?
Aseta marginaalia linkkeihin.
Sitten mahdollisesti kiinnostuneille taustalukijoille: kirjoitin testisivun floateista, jossa testasin overflow : hidden; ja :after -valitsimen toimivuudet selaimilla. Sen näkee täällä.
Terve,
Tämä on ollut mielenkiintoinen keskustelu, olen yrittänyt ottaa oppia parhaani mukaan. Yritin soveltaa näitä ohjeita käytäntöön ja tehdä sivun, jossa olisi vasen palsta leveydeltään 30% ja oikea 70%, eikä 50-50 kuten näissä esimerkeissä. Mutta koska olen näissä hommissa täysi tunari, niin eipä onnistunut. Otin pohjaksi tuon merrin divittömän vaihtoehdon >Divitön palstajako< ja kokeilin vain muuttaa noita sarakkeiden leveyksien %-osuuksia. Mutta se ei selvästikään riittänyt, jotain muutakin pitäisi säätää. Mutta mitä?
Ja sitten pitäisi saada useampia (3-5) kuvia rinnakkain samalle riville... mutta en vaan osaa. Olisko vinkkiä?
Ainiin, kiitos vielä Merrille kaikesta.
Olen näitä koodeja soveltanut muissakin projekteissa =)
Monesti saan kyllä IE6 (kun jotkut vielä sellaista käyttävät) selaimen kanssa tapella, kun aivan
kummasti tuo alapalkki/footer pomppii liian ylös tai miten sattuu.
Itselläni hirveä kiire, toivottavasti joku kerkiää "Leppiz":stä avustamaan! :)
Leppiz:
h2,h3,h4,h5,h6,p,pre { margin-left : 30%; }#valikko {
float : left;
margin : 0;
padding : 0;
width : 29.5%;
}Kuvat pitää laittaa palstan sisälle, sitten niiden pitäisikin mennä nätisti samaan riviin. Eli tärkeää on, että käytetään lohkoelementtejä sisältöön.
Helpompaa noin pitkällä tähtäimällä on korvata tuo ensimmäinen tämän viestin koodirimpsu divillä, jolloin ei tarvitse määritellä margin-leftiä jokaiselle lohkotason elementille jota tahtoo käyttää sisältöalueella. Ja muutenkin voi tyylittely hieman helpottua.
Muoks!
Ai joo, IE:n käyttäytymiseen vaikuttaa suuresti se, onko DOCTYPE määritelty vaiko ei. Esimerkeissäni sitä ei ole määriteltynä. Ilman DOCTYPEä IE heittää välillä aivan outoja ideoita ilmoille.
Kiitos Merri. Kokeilen saanko homman nyt toimimaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.