Keskustelu: Nettisivujen teko: Muutama kysymys; aihe CSS

Oon nyt selaillu kohta kymmenkuntakunta CSS opasta ja alan ymmärtämään pikkuhiljaa sen sematiikkaa. Kuitenkin on jäänyt vielä epäselväksi, että millä konstein oikeastaan kannattaa hoitaa sivun asettelu CSS:llä.

Eli otetaan yksinkertainen esimerkki:

Haluaisin sivut, joiden asettelu menisi näin:

     SIVUN ASETTELU:
------------------------
|          |multi-      |
| kuvia    |mediaa      |
| ja kenties  (lohko2)  |
|  teskstiä| -------    |
|          |            |
|(lohko1)  |(lohko3)    |
|          | multimediaa|
|          |            |
------------------------

taulukoilla homma menisi simppelisti kuhan vaan yhdistelee soluja ja pistää kuvan ja tekstit soluihin sopivassa järjestyksessä.

Mutta nyt näitä div lohkoja käyttäessä tulee ongelmia, mm:
-aina kun aloittaa uuden div:in, niin se menee automaattisesti alas, ei vierelle. En oikein tahdo saada div-lohkoja vierekkäin.

Kannattaisiko kyseessä olevan esimerkki tehdä siten, että laittaa
koko homman jonkun yhden päälohkon alle, jonka jakaa ensin kahteen osaan/lohkoon, lohko 1:seen ja lohko23:seen(jonka jakaa sitten lohkoon 2 ja 3). Ja sitten vielä jakaa näitä kahta lohkoja myöhemmin tarpeiden mukaan pienempiin div lohkoihin. KYSYMYS 1: Vai miten homma kannattaa rakentaa?(mahdollisesti lyhyt koodi esimerkkikin auttaisi, jos jaksaa innostua koodaa)

KYSYMYS 2: Jos lisätään vielä kysymykseen 1, että
lohkojen; 1, 2 ja 3 sisällöt voivat muuttua käyttäjän toimesta(käyttäjän klikkailut ja hiiren liikutukset), kun ne ovat osa javascriptiä, niin muuttaako se mentaliteettia, jolla homma kannattaa rakentaa? Eli kai homman saa näppärästi toimimaan, kun käyttää vaikka id tunnistetta div-lohkoissa?

KYSYMYS 3: voinko tehdä esimerkiksi lohkosta 1 linkin?

KYSYMYS 4: saako/voiko :hover selektoria liittää mitenkään div-lohkoon tai kuvaan, joka ei ole linkki?

Div-lohkojen arvo hierarkia ja käyttö suurissa kokonaisuuksissa: Jos sovitaan, että olisin määritelly lohkoon23 fontiksi arial, mutta lohkon 2 fontiksi arial Bold ja sitten vielä kirjoittanut lohkoon 2 tagilla <p> kappaleen , joka olisi vielä määritelty eri fontiksi, niin käsittelevätkö kaikki selaimet asian samalla tavoin ja ottavat käyttöön tämän normaalin kappaleen(<p>) fontin, eikä lohkon 2 tai 23 fonttia.

Jos sanotaan vielä, että fontti koko ei ole määritelty <p>:ssä, mutta lohkossa 2 on, niin kuinka sitten käy - mikä fontti jää voimaan?
Onko teillä kokemuksia tällaisesta, että tulee vähän mitä tahansa shaishea, kun ei ole oikein selvillä, että missä lohkossa mikäkin asia täytyy/kannattaa määritellä ja sitten määrittelee ne moneen kertaan tai jotain vastaavaa(esim. backgroundit ja marginaalit). Oppaissa ei varoiteltu tai selitelty sen syvemmin, että miten kannattaa rakentaa monesta div-lohkosta koostuvan kokonaisuuden ja mitä riskejä siihen liittyy. Vielä lisäesimerkisi se, että kannattaako HTML kielen tageja, kuten align tagia, käyttää yhdessä CSS align:ejen kanssa, vaiko hoitaa koko taitto yksinomaan CSS:llä, ettei tulisi sekaannuksia sivun asettelussa?. KYSYMYS 5 kuuluu siis: miten pidät omissa kotisivuissasi esiintyvien div-lohkojen määritelmien ja muun median helposti hallittavissa ja selkeänä, siten ettei mm. edellä olevaan ongelmaa esiinny. Tai vaihtoehtoisesti tiedätkö jotain opasta, jossa aiheesta on puhuttu?

Divit saa aseteltua vierekkäin vaikkapa näin:

#eka {
float:left;
width:200px;
}
#toka {
float:left;
width:300px;
}

<div id="eka"> Pölöpölö </div>
 <div id="toka"> Pölöpölö..... </div>

Q1: joudut ehkä käyttämään clear tagia tuon pallon rungon saamiseksi eg clear: both;

Q3: Voi tehdä; käytä <div class="lohko1"> <a>sisältö tähän</a> </div>; css filessä sitten:

div .lohko1 a {
        float:left;
/* HEIGHT */
	height: 100%; /* käytä vältellen pixeleitä; muuta prosentti lukua jos ei toimi; yritä pt:llä (eg 50pt;) jos ei mene prosenteilla */
/* WIDTH */
	width: 50%;
}

Pallolla on ihan hyvää koodia myös.

Q4: Ei voi, mutta voit kuitenkin käyttää tätä niksiä apuna:

div .lohko1 a:hover {
cursor : default;
}

jolloin linkki on sivulla, mutta käyttäjä ei näe sitä ellei paina kuvaa (tällöin linkiksi pitää laittaa sivusto, jolla käyttäjä on); lisää tietoa on täällä:
http://www.w3schools.com/css/pr_pseudo_hover.asp
Paremmin ehkä tuo menisi ajaxilla.

Tämä autto jo aika paljon, kiitokset vastauksista!

Paulus M kirjoitti:

KYSYMYS 3: voinko tehdä esimerkiksi lohkosta 1 linkin?

Et, mutta voit tehdä linkin, joka on koko lohkon kokoinen, kuten hevonen jo neuvoikin.

hevonen kirjoitti:

/* käytä vältellen pixeleitä; muuta prosentti lukua jos ei toimi; yritä pt:llä (eg 50pt;) jos ei mene prosenteilla */

Mikäs pisteistä tekee vähemmän pahoja kuin pikseleistä?

hevonen kirjoitti:

Paremmin ehkä tuo menisi ajaxilla.

Ai niinkun mikä?

hevonen kirjoitti:

Q4: Ei voi

Kyllä voi.

.mun:hover {
  background-color: #f00;
}

<div class="mun">hoho</div>

Toimii kuten odottaisit (paitsi tietty IE6:lla).

Kiitos vielä tuosta! :hover tosiaan näyttää toimivan vaikka div:issä, niin kuin sanoit.

Yritän saada seuraavassa koodissa kuvat allekkain ja niiden oikealle puolelle
kommenttipalkin. Kommenttipalkki ei kuitenkaan mene edes div-lohkon "kuvataloista" sisään, vaikka olen kirjoittanut lohkon - "kommenttipalkki" - sen sisälle.

.kuvataloista{
	background: #ddd;
	border: 4px solid #000;
	margin: 5px 100px 5px 25%;
}


.kuvataloista .kuvat img{
	background: #999;
	border:0;
        display:block;
<!"display: block;": tarkoitettu estämään se, ettei kuvat liu vierekkäin.
Vaikka display:block:in ottaisi pois, niin silti kommenttipalsta ei tule kuvataloista lohkon sisään.eikö display:blockin vaikutusalue pitäisi olla vaan oman div lohkonsa sisäpuolella, siten että se estää vain kuvien keskenäisen vierekkäisyyden - jos ei, niin miten homma hoidetaan? -->
}


.kuvataloista .kuvat img:hover{background: #007;}


.kuvataloista .kommenttipalkki{
	background:#ddd;
	border:4px solid #444;
	float:right;
	width:200px;
	height:300px;
}




....

<div class = "kuvataloista">
 <div class = "kuvat">
  <a href"#"><img src ="pictures/perustusulkona.png"></img></a>
  <a href"#"><img src ="pictures/vajoama.png"></img></a>
  <a href"#"><img src ="pictures/eiperustuksia.png"></img></a>
 </div>



 <div class="kommenttipalkki">
  tässäpä on tekstiä
 </div>
</div>

Paulus M kirjoitti:

Yritän saada seuraavassa koodissa kuvat allekkain ja niiden oikealle puolelle
kommenttipalkin.

Oikea toteutus riippuu siitä, kumman palkin leveys määrätään. Esimerkkikoodissas tuolla kommenttipalkilla on width, meen sen mukaan.

Paulus M kirjoitti:

Kommenttipalkki ei kuitenkaan mene edes div-lohkon "kuvataloista" sisään, vaikka olen kirjoittanut lohkon - "kommenttipalkki" - sen sisälle.

Juu, floatoidut elementit ei pysy niitten isäntien sisällä.

Kun oikealla puolella oleva elementti määrää leveyden, pitää se vasemmalla oleva ensin floatoida vasemmalle, että allaoleva tavara voi mennä sen viereen.
Oikealla puolella oleva floatoidaan sitten oikealle ja kunhan nuo vain mahtuvat, menevät ne vierekkäin.
Ja kun nyt sitten haluaa jotain noiden alle, pitää tuolle allaolevalle laittaa clear: both; ettei se yritä mennä mihinkään hassuun paikkaan.
http://blaze.dyndns.ws/~blaze/twocolumns.html

Kiitokset, nyt toimii muuten, paitsi että toi floadattu kommenttipalsta tulee
vasta viimeisen kuvan viereen(aika hassusti, mutten tiedä miksi), eli näin:

Sivun asettelu:

kuva1
kuva1
kuva2
kuva2
kuva3   Kommenttipalsta
kuva3   Kommenttipalsta
        Kommenttipalsta

CSS koodin näyttäessä tältä:

.kuvataloista{
	background: #ddd;
	border: 4px solid #000;
	margin: 5px 100px 5px 2px;
	float:left;
}


.kuvataloista .kuvat img{
	background: #999;
	border:0;
	float:left;
	clear:both;

}


.kuvataloista .kuvat img:hover{background: #007;}


.kuvataloista .kommenttipalkki{
	background:#ddd;
	border:4px solid #444;
	float:left;
	width:200px;
	height:300px;
}
span #kommenttipalstateksti{font-family:arial,serif;color: #984;}

laitoin tuon pääkehyksenkin(kuvataloista) floadaamaan ja nyt näyttää tavara pysyvän sisällä.

HTML koodi näyttä tältä vieläkin:

<div class = "kuvataloista">
 <div class = "kuvat">
  <a href"#"><img src ="pictures/perustusulkona.png" onClick ="kirjoitaPU()"> </a>
  <a href"#"><img src ="pictures/vajoama.png"></a>
  <a href"#"><img src ="pictures/eiperustuksia.png"></a>
 </div>



 <div class="kommenttipalkki">
  <span id="kommenttipalstateksti"></span>
 </div>
</div>

Kannattaisko koko rakennelma tehdä ilman floadausta.
pitäis siis saada kolme kuvaa allekkain ja niiden viereen kommenttipalsta?

"Kannattaisko koko rakennelma tehdä ilman floadausta."
Ei kannata.
Lisää tämä css:sään:

.kuvataloista .kommenttipalkki{
    position:relative;
    bottom:10%; // jos ei mee prosenteilla käytä px/pt
}

Joo, kyllähän toi toimii, mutta voi tosin olla, että jollain muilla selain asetuksilla se menee vähän väärään paikkaa, ku jouduin laittaa siihen jonku ihan random luvun(222 px), että se osui oikeaan kohtaan. Mutta nyt se on silti ihan oikeassa paikassa, kiitokset.

Vedäppäs testi läpi kaikilla suurilla selaimilla pixeleillä; sen jälkeen tee sama prosenteilla. Huomasitko mitään eroa? Ei pitäisi mennä enää random paikkaan, jos käytit prosentteja. Omasta kokemuksestani, kun käyttää prosentteja aina kun on mahdollista, yhteensopivuus on turvattu. Uusimmissa selaimissa tuo pixeleiden käyttö ei kuitenkaan ole enää suuri ongelma.