Minulla on monta tuotelaatikkoa, joissa on otsikko, kuva ja loppupalikat. Näitä loppupalikoita voi olla tuotteesta riippuen paljon tai vähän ja tästä johtuen tuotelaatikoiden korkeudet vaihtelevat joskus suurestikin. Miten saisin pakotettua pienille tuotelaatikoille jonkin tietyn minimikorkeuden? Pelkkä minimikorkeus olisikin helppo toteuttaa, mutta tarkoitus olisi saada toteutettua se niin, että otsikko olisi ylhäällä, kuva keskellä tai ylhäällä ja ne loput härpäkkeet tulisivat laatikon alaosaan. Tyhjä tila jäisi siis joko kaikkien kolmen osan väliin tai kuvan ja alapalikoiden väliin. Olen yrittänyt siirtää others-luokan absoluuttisella sijoittelulla laatikon alaosaan, mutta tässä on tullut ongelmaksi se, ettei tällöin others-luokalla ole korkeutta ja pidemmissä laatikoissa kuva ja loppupalikat menevät päällekkäin. Miten tällaisen saisi toimivasti toteutettua?
<div class="Product"> <div class="title"> </div> <div class="image"> </div> <!-- Kun tuotelaatikko on liian pieni, se pakotetaan johonkin korkeuteen. Siitä tuleva tyhjä tila jää tähän tai jaetaan tasaisesti tähän sekä title:n ja image:n väliin. --> <div class="others"> <!-- Tässä on tuotteesta riippuen vähän tai hyvinkin paljon tavaraa. --> </div> </div>
Voit varmaan käyttää CSS:än min-height ja min-width määrityksiä tähän.
No niin muuten voisinkin, mutta kun tuo others-luokka pyrkii tällöin laatikon yläosaan, jolloin venyvän laatikon tyhjä tila tulee others-luokan alle. Tarkoitus on saada se tuotelaatikko näyttämään tasaiselta, vaikka laatikko venyisikin. Jos laatikon venyessä, laatikon alaosaan ilmestyy tyhjää tilaa, ei tuotelaatikko näytä kovin sulavalta.
Voithan ruveta revittelemään ja käyttää "Masonryä", joka asettelee html-elementit niin, että ne mahtuvat paremmin sivulle.
Yksinkertaisin tapa on, että kukin tuotetieto on taulukko, jossa on vain kaksi alkiota päällekkäin, ja niistä ensimmäinen tasataan ylös, toinen alas vertical-align-ominaisuudella. Ja taulukolle tietysti min-height. Demo:
http://www.cs.tut.fi/~jkorpela/test/product.html
Voi olla, että tuo ei ole sellainen, mitä tarkoitit. Mutta kerro sitten, millä tavalla ei ole.
Tasaisuuden vaikutelman voisi kyllä ehkä saada aikaan silläkin, että laatikolla on sekä reunaviiva että taustaväri. Ehkä jopa taustakuvio niin, että sitä ei näy tekstin alla, ainoastaan siellä, missä tekstin alla on tyhjää tilaa.
P.S. Laitoin tuohon demoon schema.orgin mukaisia Product-metatietomäärittelyjä. Jos ollaan rakentamassa tuotetietosivustoa, sellaiset määrittelyt kannattaa lisätä, vaikka kestääkin vielä jonkin aikaa, ennen kuin esimerkiksi Googlen Product-haku alkaa kattaa muutakin kuin USA:n.
On myös mahdollista laittaa piilotettuja elementtejä väliin pitentämään laatikkoa.
<html>
<style type="text/css">
.text{width:200px;height:400px;}
.text2{width:200px;height:100px;}
.tyhja{width:200px;height:200px;visibility:hidden;}
</style>
<body>
<div class="text">
Tässä on tekstiä.
Tässä on tekstiä.
Tässä on tekstiä.
Tässä on tekstiä.
<div class="tyhja">
Null
</div>
<div class="text2">
Tässä on tekstiä.
Tässä on tekstiä.
</div>
</div>
</body>
</html>pistemies kirjoitti:
On myös mahdollista laittaa piilotettuja elementtejä väliin pitentämään laatikkoa.
Mikset vaan laita ylämarginaalia .text2:lle?
Blaze kirjoitti:
pistemies kirjoitti:
On myös mahdollista laittaa piilotettuja elementtejä väliin pitentämään laatikkoa.
Mikset vaan laita ylämarginaalia .text2:lle?
Miten kumpikaan menetelmä saisi aikaan halutun vaikutuksen? Tässä kai ei ollut kyse kiinteän korkuisesta tyhjästä tilasta. Millaisen arvon antaisit .text2:n margin-top-ominaisuudelle?
Yucca kirjoitti:
Miten kumpikaan menetelmä saisi aikaan halutun vaikutuksen? Tässä kai ei ollut kyse kiinteän korkuisesta tyhjästä tilasta. Millaisen arvon antaisit .text2:n margin-top-ominaisuudelle?
Vaikka esimerkissäni onkin kiinteä korkeus, se ei tarkoita sitä että sillä ei olisi vaihtelua. Kyseessä on selaimelle näkyvä osuus.
Vaikka php:ta ei kovin suositella sotkettavaksi css:n sekaan, niin sillä voi kuitenkin määritellä yksilöllisesti (laatikon tarpeen mukaan) lisää korkeutta silloin kun sitä tarvitaan.
Toisaalta sen voi tehdä sotkematta phpta ja cssää, sillä piilotetun elementin etuna on se, että siihen voi vaikka lisätä rivejä
täsmälleen yhtä paljon kuin on pisimmässä laatikossa ja siten korkeus säilyy samana. Voi pikselihommalla värkkäyksen halutessaan unohtaa...
Yucca kirjoitti:
Miten kumpikaan menetelmä saisi aikaan halutun vaikutuksen?
Tämän siitä saa ku lukee vaan viimisen viestin...
pistemies kirjoitti:
Siihen voi vaikka lisätä rivejä täsmälleen yhtä paljon kuin on pisimmässä laatikossa ja siten korkeus säilyy samana.
Mistä tiedät, montako riviä siinä pisimmässä laatikossa on? Mistä tiedät, montako riviä esimerkiksi tässä viestissä on? (Jos luulet tietäväsi, kavenna ikkunaa tai muuta fonttia.)
Metabolix kirjoitti:
pistemies kirjoitti:
Siihen voi vaikka lisätä rivejä täsmälleen yhtä paljon kuin on pisimmässä laatikossa ja siten korkeus säilyy samana.
Mistä tiedät, montako riviä siinä pisimmässä laatikossa on? Mistä tiedät, montako riviä esimerkiksi tässä viestissä on? (Jos luulet tietäväsi, kavenna ikkunaa tai muuta fonttia.)
Joo. Ei kannata luulla mitään :)
Oletuksena on se, että laatikoiden leveys on vakio.
Kyllä rivien tarkan määrän saa asetettua, kun jaksaa ohjelmoida.
Tosin ei kannata tulostaa tuotteiden rivejä arraysta... jokaisella rivillä arrayssa oma arvo, kapeammalla sivulla lyhyemmät rivit. :) Mutta eipä tuossa kysyjä tainnut haluta just saman pituista boxia eikä se olisi käytännöllinenkään kun jäisi liian paljon tyhjää tilaa. Juttuni samanpituisesta boxista oli vaan turhaa huulta... ei kai kukaan viitsi sellaista vaivaa nähdä vaikka olis tarvettaki. Mieluummin sotketaan samaa taustaväriä ja "valehdellaan" että boxi jatkuu alemmas kuin mitä jatkuu.
Ps. Sinun viestissäsi näyttäisi olevan 27 riviä :)
Kiitoksia kaikille vastaajille. Tuo pistemiehen tyyli näyttää jotenkin turhan vaikealta toteuttaa. Varsinkin minun tapauksessani php:n käyttäminen vaatisi turhaa lisäkikkailua enkä siksi halua siihen ryhtyä.
Tuo Yuccan antama taulukkovaihtoehto näyttää juuri siltä mitä kysymyksellä hainkin. Pitääpä kokeilla sitä heti kun ehdin.
// Edittiä. Yuccan taulukossa alapalikat on sijoitettu alas ja kuva ylös eli tyhjä tila on niiden välissä. Hyvä näinkin, mutta vielä parempi olisi, että kuva on keskellä eli tyhjä tila jää tasaisesti kuvan ylä- ja alapuolelle. Kai tämä onnistuu yksinkertaisesti laittamalla kuva omalle taulukkorivilleen ja määrittelemällä vertical-aligniksi middle? Yucca ei esimerkissään kylläkään käyttänyt min-height:iä, mutta näyttäisi toimivan ilmankin. Mitäs nämä Product-metatietomäärittelyt ovat, kun en ole aikaisemmin sellaisista kuullut?
AkeMake kirjoitti:
Mitäs nämä Product-metatietomäärittelyt ovat, kun en ole aikaisemmin sellaisista kuullut?
Odotin, että se olisi joku XML-namespace, jolla lisättäisiin metatietoja, tuotetietoja siis, XHTML-sivuille. Sellainen se ei ole, vaan jokin hullunkurinen HTML-pohjainen metatietosysteemi, josta tuskin ikinä tulee mitään standardia.
LaNu kirjoitti:
AkeMake kirjoitti:
Mitäs nämä Product-metatietomäärittelyt ovat, kun en ole aikaisemmin sellaisista kuullut?
Odotin, että se olisi joku XML-namespace, jolla lisättäisiin metatietoja, tuotetietoja siis, XHTML-sivuille. Sellainen se ei ole, vaan jokin hullunkurinen HTML-pohjainen metatietosysteemi, josta tuskin ikinä tulee mitään standardia.
Ei siitä ehkä standardia tulekaan, vain se, mitä kaikki käyttävät (jos haluavat pysyä markkinoilla). :-)
Metatietojen alalla on vallinnut melkoinen sekamelska, ja vielä keväällä näytti siltä, että Google tukee suhteellisen tasapuolisesti kolmea erilaista metatiedon tekniikkaa (periaatteessa kolmea eri tapaa käyttää samoja sanastoja, mutta käytännössä asiat eivät ole niin yksinkertaisia). Mutta kesällä tuli sitten tieto Bingin, Googlen ja Yahoon päätöksestä keskittyä tukemaan mikrotietoja (microdata) ja ylläpitämiään schema.org-sanastoja, ks.
http://blog.schema.org
En ollut päätöksestä mitenkään ihastunut (varsinkin kun piti huutaa kustantajalle Stop Print, jotta sain HTML5-kirjani ottamaan huomioon tuon linjauksen), mutta kyllähän hakukoneet nykyisin ohjailevat asioita paljon enemmän kuin komiteat ja yleiset konsortiot. Jos haluaa myydä jotain, pitää kiinnittää enemmän huomiota siihen, mitä hakukoneet tekevät, kuin siihen, mitä niiden jonkin spesifikaation mukaan pitäisi tehdä.
Product-määrittelyn detaljeja:
http://www.schema.org/Product
(Perustuu eräänlaisen luokkakäsitteeseen, jossa Product perii ominaisuuksia yleiseltä Thing-luokalta.)
Aihe on jo aika vanha, joten et voi enää vastata siihen.