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
574
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
Paras olisi vain unohtaa
Tuleekohan tähän meidän tilanteeseen ikinä mitään selvyyttä. Epätoivo iskee taas, enkä jaksaisi enää odottaa. Kohta lop811670- 721319
Mietitikö nainen koskaan
Miksi me ollaan päädytty tähän pisteeseen. Lähestmistapaa ei ole. Tarvitaanko me oikeasti enää tätä.1061248Suomalaisia naisia lennätetään seksimatkoille
https://www.iltalehti.fi/kotimaa/a/1f5f5e20-8c36-4907-9640-8e0c3b017c5a Gambia on jo vuosia ollut yhtä kuin munanhaku ma1801092Nämä kaikki alla olevat aloitukset on saman naisen aloituksia
Kuinka paljon täytyy vintissä viheltää että esiintyy välillä jopa miehenä, ja sitten itse vastailee omiin kysymyksiinsä?1581033huono omatunto
johtuu siitä, että minulla on tunteita sinua kohtaan. Se vaikuttaa asiaan. Kaipasin sinua tänäänkin.621030Päätin juuri että
En odota että meidän välillä enää tapahtuisi mitään. Tämä on aivan liian monimutkaista ja kyllä sinäkin olisit joskus mi32892Onnistuit sohaisemaan mua
Kaikkein herkimpään kohtaan ja kyseenalaistamaan mun luottamuksellisuuden. Kun sitä ei ole niin ei ole mitään muutakaan62866- 61826
Uutta tietoa sodistamme - muuttuuko käsityksesi?
Kirja, joka voi muuttaa käsityksiä aivan oleellisesti Talvi- ja jatkosodan aatoista! Olisiko sittenkin tuo Talvisota v255795