Tämä on varmasti tyhmä kysymys, mutta CSS-aloittelijana olisi kiva tietää vastaus.
Elikkäs, jos on määriteltynä esim. Div-elementti "sisältö", jota haluaisin käyttää sivuston kaikilla sivuilla siten, että elementin koko (käytännössä korkeus) määräytyisi sen sisällön mukaan - siis ilman, että joka sivulle tarvitsisi määritellä omaa sopivan kokoista elementtiä. Kuinkahan tällainen määritellään?
Sama Div eri sivuilla
7
586
Vastaukset
Divin korkeushan määräytyy sisällön mukaan, jos mitään rajoituksia ei ole erikseen määrätty. Siis jos et anna arvoja height- ja max-height-ominaisuuksille, niin div kasvaa pystysuunnassa sisältönsä mukaan.
Toisekseen, divien nimissä ei kannata (eikä speksien mukaan varmaan saakaan) käyttää ääkkösiä, eli mieluummin
kuin
.- hyy
Jos haluaa, etta divit ovat aina vahintaan tietynkorkuisia, niin kun laittaa heigh-maarityksen, niin Mozillalla korkeus ei veny jos sisaltya tulee enemman, mutta IE:lla venyy. Mozillalle saa laitettua minimi korkeuden kayttamalla maaritysta min-height, mutta IE ei taas tata tunnista.
Itse olen keksinyt tahan kaksi ratkaisua...
Joko jos sivun sisalla voi olla vierityspalkki niin voi maaritella overflow:auto;
Tai sitten antaa IE:lle oman maarityksen
.div {
min-height: 300px (tama Mozillalle/Operalle)
}
*html .div {
height: 300px (vain IE lukee taman)
}
Tietaako miten tuon saisi tehtya yhdella maarittelylla? hyy kirjoitti:
Jos haluaa, etta divit ovat aina vahintaan tietynkorkuisia, niin kun laittaa heigh-maarityksen, niin Mozillalla korkeus ei veny jos sisaltya tulee enemman, mutta IE:lla venyy. Mozillalle saa laitettua minimi korkeuden kayttamalla maaritysta min-height, mutta IE ei taas tata tunnista.
Itse olen keksinyt tahan kaksi ratkaisua...
Joko jos sivun sisalla voi olla vierityspalkki niin voi maaritella overflow:auto;
Tai sitten antaa IE:lle oman maarityksen
.div {
min-height: 300px (tama Mozillalle/Operalle)
}
*html .div {
height: 300px (vain IE lukee taman)
}
Tietaako miten tuon saisi tehtya yhdella maarittelylla?Ongelma piilee jälleen Internet Explorerissa, joka ei ole kuullutkaan min-height-ominaisuudesta ja joka tulkitsee height-ominaisuudenkin merkityksen väärin. On kuitenkin olemassa kiertoteitä, joista muutama on lyhyesti kuvattu alla.
Tapa 1: The Underscore Hack ( http://wellstyled.com/css-underscore-hack.html )
HTML:
CSS:
#sisalto
{
min-height: 100px;
_height: 100px;
}
--------------------
Tapa 2: IE ei ymmärrä !important-sääntöjä
HTML:
CSS:
#sisalto
{
min-height: 100px;
height: auto !important;
height: 100px;
}
--------------------
Tapa 3: IE ei ymmärrä attribuuttivalitsinta
HTML:
CSS:
.sisalto
{
height: 100px;
}
*[class="sisalto"]
{
height: auto;
min-height: 100px;
}
--------------------
Tapa n: IE ei ymmärrä... :)- Putteri
Juu, olen kokeillut tuota korkeusarvon jättämistä pois, mutta ongelma vaivaa sellaisessa tilanteessa, jossa ensin on määritelty div-laatikko, jonka sisään tulee toinen laatikko.
Pelkällä tekstillä ulompi laatikko venyy kyllä, mutta sisällä olevalla laatikolla ei. Ulomman laatikon korkeuden joutuu siten määrittämään ja sitten se on yhtä suuri sivuston jokaisella sivulla. Putteri kirjoitti:
Juu, olen kokeillut tuota korkeusarvon jättämistä pois, mutta ongelma vaivaa sellaisessa tilanteessa, jossa ensin on määritelty div-laatikko, jonka sisään tulee toinen laatikko.
Pelkällä tekstillä ulompi laatikko venyy kyllä, mutta sisällä olevalla laatikolla ei. Ulomman laatikon korkeuden joutuu siten määrittämään ja sitten se on yhtä suuri sivuston jokaisella sivulla.Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.
CSS:
#box1
{
border: 1px solid black;
padding: 10px;
}
#box2
{
width: 50px;
height: 100px;
border: 1px solid blue;
}
HTML:
Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun
mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.
Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.- Putteri
Whitelighter kirjoitti:
Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.
CSS:
#box1
{
border: 1px solid black;
padding: 10px;
}
#box2
{
width: 50px;
height: 100px;
border: 1px solid blue;
}
HTML:
Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun
mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.
Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.Ongelma johtuikin siitä, että olin määritellyt sisemmälle laatikolle absoluuttisen sijainnin jota ei ilmeisesti saa tehdä? Kiitokset jokatapauksessa!
- repeee
Whitelighter kirjoitti:
Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.
CSS:
#box1
{
border: 1px solid black;
padding: 10px;
}
#box2
{
width: 50px;
height: 100px;
border: 1px solid blue;
}
HTML:
Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun
mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.
Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.Jos haluaa käyttää float-ominaisuutta elementeissä, voi ominaisuuden katkaista esim. luomalla div-tagin, joka sijoitetaan koodiin float-elementtien ja ylitettävän elementin väliin.
ko. div-tagin (vaikkapa #clear) css-koodiin määritellään vain, että clear: both!
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Suomi on täysin sekaisin
Jo ties monettako päivää hirveä itku ja poru jostain helvetin nilviäisistä. https://www.is.fi/taloussanomat/art-20000104414748Ensimmäisestä kohtaamisesta saakka
minulla on ollut hämmentynyt olo. Miten voit tuntua siltä, että olisin tuntenut sinut aina? Sinun kanssasi on yhtä aikaa151692Aivan täysin tahallinen teko
Ei mitään puolusteluja, eikä selittelyitä. Kuljettajalle kerrottiin asiasta siinä paikanpäällä, mutta silti hän ajoi ves921425Suomussalmi saatu vihdoin maailmankartalle!
Nyt kun Suomussalmi on vihdoin viimein saatu ennennäkemättömällä tavalla maailman tietoisuuteen niin voitaisiin järjestä521336Olet saanut minut sekoamaan
Tunteiden ristiaallokossa vellominen on ollut melkoinen kokemus. Ei kukaan ole saanut minua niin raiteiltaan kuin sinä.221286Mainehaitta metsäkonefirmalle
Hukkajoen tapahtumista liikkuu paljon huhuja. Eikö kannattaisi julkaista raakkuja tuhonneen metsäkoneyrityksen nimi, kos501161Oho! Maajussi-Kallelta pakit saanut morsioehdokas Miss Suomi -kisoissa! Tunnistaisitko hänet nyt?
Hmm, tunnistaisitko?!? Onnea missihulinoihin! Lue lisää ja katso kuvat: https://www.suomi24.fi/viihde/oho-maajussi-01065Myönnän sinulle nyt
Että olen erittäin mustasukkainen sinusta jo nyt. Ikävä on tämä tunne, kun tietämättömyyden solista nousee myrkkyä miele54980Pysytäänkö nainen
edelleen yhtä viileän tyynenä kun nähdään. Uskotko että tahtoessani saisin murettua tyyneytesi hyvin helposti.56857Olen käyttäytynyt ristiriitaisesti
eikä minusta varmaankaan ota mitään selvää. Se johtuu siitä, kun järki sanoo ei, ei, ei ja sydän sanoo kyllä, kyllä, kyl60839