Heippa hei sun heiluville!
Pyytäisin teiltä kaikilta lämminsydämisiltä koodereilta apua pikku probleemaani suunnittelemiini nettisivuihin liittyen. Haluaisin saada nettisivulle luoduksi kolme palstaa, joista keskimmäinen olisi varsinainen "pääpalsta", jolla on tekstiä ja kuvia. Vasemmanpuoleisella palstalla olisi tietyt klikattavat perusikonit ja oikealla palstalla ei mitään (ainakaan näillä näkymin). Sivun yläosassa olisi sivujen logo. Keskimmäinen palsta olisi näillä näkymin se ainoa "vaihtuva" palsta, jossa olisi sivujen pääasiallinen sisältö. Se olisi myös se levein palsta, kaksi muuta palstaa olisivat kapeampia.
Eli kuinka nettisivulle saa luotua palstat? Olen yrittänyt tätä NVU:lla ja KompoZerilla, mutta kummatkin heittävät tekstin koko sivun levyiseksi, enkä ole millään onnistunut löytämään keinoa saada luotua palstoja. Ja jos joku voisi vielä bonuksena neuvoa kikan, jolla tekstin saa "kiertämään" kuvat, so. menemään niiden ohitse niin, että kuvat eivät "katkaise" tekstin kulkua palstalla vaan ovat tavallaan "upotettuina" tekstin sekaan?
Käännyn näiden foorumeiden puoleen, koska täällä tuntuu olevan aika gurua porukkaa, jolta tuollaisen perussetin luulisi onnistuvan. Jos joku voisi vaikka antaa valmiiksi koodinpätkän, jolla palstojen luominen ja kuvien luonteva sommittelu tekstin sekaan onnistuu? Etenkin tuo palstojen luominen olisi todella tärkeää, että sivut näyttäisivät vähän uskottavammilta ja hienommilta.
Terveisin
Heikki-Johannes
Lataa joku valmis template, niin säästät muiden aikaa.
Esim.
http://wordpress.org/extend/themes/disciple, ja muokkaa ei-wordpress muotoon.
Terve Heikki-Johannes.
Palstat voi toteuttaa helposti käyttämällä <div>-tageja ja hiukkasen CSS:ää. Palstat voi tehdä HTML-tiedostoon esim. näin: http://pastebin.com/fcd9f6e5
CSS voisi näyttää tältä:
body {
width: 90%;
margin: 0 auto;
}
div.palsta {
float: left;
width: 30%;
margin-right: 1em;
}
img.kuva-oikea {
float: right;
}Nyt yhden palstan koko on siis 30% bodyn koosta (joka tässä tapauksessa on 90% koko sivusta). Pienentäessä ikkunaa palstojen koko pitäisi muuttua samassa suhteessa. Jokin minimiarvo palstojen koolle voisi olla hyvä. Tämän voi tehdä käyttämällä esim. min-width-attribuuttia.
En ehtinyt nyt kirjoittaa erillisiä määrittelyjä keskimmäiselle palstalle, mutta tuon pitäisi onnistua samoilla periaatteilla helposti.
Tuon kuvakikan tässä tapauksessa toteuttaa img.kuva-oikea. Kuvan voi asetella vasemmalle käyttämällä left-arvoa. Jos haluaa lehtityyliset palstat (eli välilyöntien pituutta kasvatetaan niin, että koko rivin tila käytetään), voi div.palsta-kohtaan kirjoittaa text-align: justify;.
Toivottavasti tuosta oli apua.
Oli apua, mutta ei tarpeeksi. Kopioin tuolta sivulta http://pastebin.com/fcd9f6e5 koodisi ja lisäsin siihen tuossa ylhäällä antamasi CSS-koodin, mutta palstoja ei synny. Kompozerin Preview-tilassa teksti näkyy koko sivun levyisenä, ja samoin käy, kun kopioin koodin Notepadiin ja tallennan sen html-muodossa katseltavaksi.
Syynä saattaa olla se, että sijoitan antamasi CSS-koodit vääriin kohtiin HTML-tiedostossa. En ollut myöskään aivan varma, mihin kohtaan keskimmäisen palstan määrittelyt kirjoitetaan, joten laitoin sen toisen (keskimmäisen) div class="palsta"-koodin kohdalle. Ja mihin kohtaan se min-width-attribuutti pitäisi laittaa?
Alla tulee koodini, jota toivoisin teidän korjaavan niin, että siitä syntyy se kolme palstaa ja kuvakikka. Auttakaa tyhmää!
<!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>Lorem ipsum</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body width="90%" margin="0 auto"> <div class="palsta" float="left" width="30%" margin-right="1em" text-align="justify"> <img class="kuva-oikea" float="right" src="kuva.png" alt="Lipsum"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> <div class="palsta" float="middle" width="40%" margin-right="1em" text-align="justify"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> <div class="palsta" float="right" width="30%" margin-right="1em" text-align="justify"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> </body> </html>
CSS-koodi menee tiedostoon nimeltä style.css. Tähän viitataan sivulla http://pastebin.com/fcd9f6e5 olevassa koodissa rivillä
<link rel="stylesheet" type="text/css" href="style.css" />
Tämä siis kertoo selaimelle, että CSS-määrittelyjä löytyy style.css-nimisestä tiedostosta. Tallenna siis tuo CSS-koodi tuon nimiseen tiedostoon.
Kirjoitinpa tuon koodin nyt uusiksi, koska alunperinhän halusit keskimmäisen palstan olevan muita leveämpi. Tallenna siis molemmat erillisiin tiedostoihin:
style.css:
body {
line-height: 140%;
margin: 4em auto;
width: 90%;
padding: 0 1em;
}
div#oikeapalsta {
float: right;
margin-left: 1em;
text-align: justify;
width: 160pt;
}
div#keskipalsta {
text-align: justify;
}
div#vasenpalsta {
float: left;
margin-right: 1em;
text-align: justify;
width: 160pt;
}
img.kuva-oikea {
float: right;
}tiedosto.html:
<!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>Lorem ipsum</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="oikeapalsta"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> <div id="vasenpalsta"> <img class="kuva-oikea" src="kuva.png" alt="Lipsum"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> <div id="keskipalsta"> Tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä tekstiä... </div> </body>
Nyt jokaiselle palstalle on omat määrittelyt. Voit vaihtaa palstojen kokoa muuttamalla niiden width-attribuuttia. Keskipalstan koko pitäisi muuttua automaattisesti.
http://pp.kpnet.fi/jvm/jvm/index.htm
Toteutin joskus kauan sitten palsta-ajattelun kotisivullani taulukkotaitolla ja CSS:llä. Nyt taulukkotaitosta puhuminen taitaa olla vanhanaikaista. JVM
jmp:n esimerkkiin lisäisin, että jos reunapalstojen sisältö ei ylety alas asti, keskipalsta valtaa alareunassa niidenkin tilan. Yksi ratkaisu tähän on asettaa keskipalstan marginaalit reunapalstojen levyisiksi.
#vasen {
width: 30%;
float: left;
}
#oikea {
width: 20%;
float: right;
}
#keski {
margin-left: 30%;
margin-right: 20%;
}Vielä on pari probleemaa.
Keskipalstan teksti valahtaa 3-4 fonttia leveämmäksi sen jälkeen, kun reunapalstojen teksti on päättynyt. Keskipalstan leveys siis kasvaa hieman, niin ettei sen ja reunapalstojen välissä ole samaa rakoa kuin alussa, vaikka olen asettanut keskipalstan marginaalit reunapalstojen levyisiksi Metabolixin esimerkin mukaan. Mikä eteen?
Ja nettisivulla eivät näy ääkköset! Tekstiä-sanan ä:stä tulee tyhjä neliö, joka syö myös sitä seuraavan välilyönnin ja seuraavan sanan t-kirjaimen, tähän tyyliin: "䠴eksti䠴eksti䠴eksti䠴
Heikki-Johannes kirjoitti:
Vielä on pari probleemaa.
Selaimeni on Internet Explorer 6.
ÖÖÖ? Oiskohan aika vaihtaa selainta, jos ei Firefox tai muutkaan käy niin päivitä IE edes uusimpaan versioonsa...
Heikki-Johannes kirjoitti:
Vielä on pari probleemaa.
Keskipalstan teksti valahtaa 3-4 fonttia leveämmäksi sen jälkeen, kun reunapalstojen teksti on päättynyt. Keskipalstan leveys siis kasvaa hieman, niin ettei sen ja reunapalstojen välissä ole samaa rakoa kuin alussa, vaikka olen asettanut keskipalstan marginaalit reunapalstojen levyisiksi Metabolixin esimerkin mukaan. Mikä eteen?
Metabolixin esimerkissä palstojen välissä ei ole rakoa. Raon saat asettamalla margin-left- ja margin-right-attribuuttien arvot palstojen kokoa suuremmiksi.
Merkistöongelma todennäköisesti johtuu siitä, että tallennat tiedoston Latin 1 -merkistöllä, ja HTML-tiedosto sanoo merkistön olevan UTF-8 (ks. HTML-esimerkki). Tiedoston merkistökoodauksen ja tiedostossa ilmoitetun merkistön on oltava samat. Vaihtoehtosi ovat siis:
1. Tallenna tiedosto UTF-8-koodattuna
2. Vaihda HTML-tiedostossa esiintyvä charset muotoon iso-8859-1, iso-8859-15 (jos haluat euromerkin) tai vastaavaksi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.