Oon tossa vähä aika sitte tajunnu miten saa siistin alapalkin tai minkä vaan laatikon sivulleen kätevästi. Osa tän jo tietää arvatenkin, mutta niille jotka ei tiiä niin voi kokeilla:
HTML:
CSS:
html>body div#laatikko {
width: 200px;
height: 200px;
bottom: 0;
position: absolute;
background: #FF00FF;
...
}
Ja mitä muuta nyt haluut määrittää. Tossa on vaan semmonen vika ettei se taho oikeen toimii IE6:lla.. Seiska mun mielestä osaa lukee ton ja Mozilla ja Opera ainaki lukee sen. Tietty voihan sivulle laittaa ilmotuksen siitä että kannattaa avata sivut Mozillal tai Operal ( jne..
Mutta jos joku tietää samanlaisen kikan joka toimis jopa myös IE6:ssakin nii olis tosi kiva jos tähän samaan ketjuun vois ilmotella siitä nii oppis jotakin uutta. :)
Siinä se.
HTML:
CSS:
html>body div#laatikko {
width: 200px;
height: 200px;
bottom: 0;
position: absolute;
background: #FF00FF;
...
}
Ja mitä muuta nyt haluut määrittää. Tossa on vaan semmonen vika ettei se taho oikeen toimii IE6:lla.. Seiska mun mielestä osaa lukee ton ja Mozilla ja Opera ainaki lukee sen. Tietty voihan sivulle laittaa ilmotuksen siitä että kannattaa avata sivut Mozillal tai Operal ( jne..
Mutta jos joku tietää samanlaisen kikan joka toimis jopa myös IE6:ssakin nii olis tosi kiva jos tähän samaan ketjuun vois ilmotella siitä nii oppis jotakin uutta. :)
Siinä se.
Vastaukset 11
Vanhimmat
hiukan turhan moderni IE6:lle?
eikö tuo voisi olla pelkästään
#laatikko {
width: 200px;
height: 200px;
bottom: 0;
position: absolute;
background: #FF00FF;
}
...olisi mahottoman vaikeeta lätkästä toi laatikko esim keskelle sivuu. Siis toi html>body ikäänku irrottaa sen laatikon kaikesta ja nostaa kaiken päälle sen ja sitten voit sitä siirrellä miten huvittaa. :)
alussa tämä:
html>body div#laatikko {
eikö toimi jos laittaa vain:
#laatikko {
???
:)
tilanteessa... Mutta ei kaikissa. Ton laatikon voi käytännössä laittaa mihin tahansa. Testaile pois..
Voisin laittaa tänne esimerkin miltä se näyttää..
Untitled Document
#laatikko {
width: 200px;
height: 200px;
bottom: 0;
position: absolute;
background: #FF00FF;
}
Laatikossa on tekstiä. laatikossa on tekstiä. laatikossa on tekstiä, laatikossa on tekstiä
Katsoppa mikä ero:
position: absolute;
position: fixed;
Elikkäs siis toi laatikko on kaikkien päällä ja sen pitäisi pysyä paikallaan verrattuna selaimeen eikä sivuun.
Mahdoitkohan edes testata tota juttua? :D
Tokihan absolute ja fixed ovat aivan eri asioita.
Mutta minä putosin kelkasta siinä mikä ero on seuraavilla:
html>body div#laatikko
#laatikko
Ihan oikeasti en huomaa mitään eroa, ainakaan Operalla. IE:llä tietenkin huomaa: ekalla tavalla ei näy mitään, mutta jälkimmäinenkin toimii siinä samalla tavalla kuin molemmat Operalla. Foxilla en kattonu.
btw. mulla kun ei ole tuota IE7:aa käytössä, niin viittisköhän joku kertoa joka se ymmärtää tuon fixed-mahdollisuuden muuallakin kuin taustakuvassa.
Entä onko siinä muita askeleita css-ymmärryksen tiellä?
Tarkotin tätä: http://irc-galleria.net/view.php?nick=DigiBoxi&image_id=54983189
Esim. tuolla olen käyttänyt juurikin html>body div# -ominaisuutta. Sano jos hoksaat mitä se tekee. Jos et vielkään (jostain syystä) keksi mitä se tekee nii voin tehä sulle äkkii kaks identtistä sivuu joista toinen käyttää pelkkää #laatikkoo ja toinen html>body div#laatikkoo... :)
Tuolla on niin monta css-tiedostoa etten todellakaan alaa sieltä mitään esimerkkejä kaivelemaan.
Jos tarkoitat tuota alas fixattua juttua, niin mihin siinä tarvitaan html>body #div ?
Miksei riitä #div ?
Tai niin tietty IE hajoaa jos ominaisuudeksi laitta fixed, jos taas käyttää html>body -juttua niin se jättää sen kiltisti näyttämättä.
Mutta selitä tosiaan, selkeillä esimerkeillä eikä usean tyylitiedoston sekamelskalla.
Oikeastaan on aika järjetöntä kirjoittaa
html>body
koska tämä tämä tarkoittaa suomeksi sitä että sääntö koskee vain sellaista body-elementtiä joka on html-elementin lapsi. Ja koska body-elementin nimenomaan pitää AINA olla html-elementin lapsi (jos kirjoitetaan edes kutakuinkin oikeellista html:ää) niin tuo määritys on aika turha (ellei sitten sillä ole tarkoitus piilottaa haluttua elementtiä sellaisilta selaimilta jotka eivät tuota määritystä ymmärrä).
Esimerkki:
Untitled
div > em { background-color: Aqua; }
yksi kaksi kolme neljä
Ainoastaan ensimmäinen em-elementti saa taustavärikseen Aquan, koska tässä tapauksessa ainoastaan se on divin lapsi. Jälkimmäinen on lapsenlapsi joten sitä määräys ei koske.
http://www.w3.org/TR/css3-selectors/#child-combinators