voiko laittaa divejä sisäkkäin?
divit sisäkkäin
anttiii
8706
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Turvaa tilisi vahvistamalla puhelinnumerosi. Voit silloin palauttaa unohtuneen salasanan tekstiviestillä.
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 8
Vanhimmat
Kyllä voi.
laitoin sillä lailla että yhden divin sisällä on ne kaikki muut jutut, niin se ei toimi. Onko tähän joku selitys? niinku millainen sen koodin pitää olla, että se toimii?
Esimerkiksi tuossa viereisessä viestiketjussa käytin rakennetta, jossa on enimmillään kolme diviä sisäkkäin.
http://keskustelu.suomi24.fi/show.fcgi?category=108&conference=654&posting=22000000017116207
Otetaan vielä lyhyempi esimerkki:
Tämä on ulompi div, jonka sisällä on
toinen div-elementti.
tein sellaisen sivupohjan, että on näin:
yhen divin sisällä kaikki. Sitten divi, jonka sisällä on otsikkokuva. Sitten divi vasemmalla jossa on valikko. Ja divi oikealla jossa on kaikkea sisältöä.
IE näyttää sivun oikein, mutta firefox ei: se näyttää sen divin, jonka sisällä kaiken pitäis olla, ainoastaan otsikkokuva-divin ympärillä.
Ja koodini on vielä validia! Miten tämä on mahdollista?
Tilanne vaatii tarkempaa lähdekoodia peliin.
Tässä on lähdekoodi, johon laitoin mukaan myös css:n (hieman vajaana). Sivu siis toimii hyvin IE:llä, mutta FF ja Opera näyttävät sen väärin. Tämä päättyy ennen aikojaan, eikä jatku sivun loppuun asti kuten IE:llä.
Eli apua kaipailen, kertokaapas mikä on vialla.
otsikko
body { background: #175B1B; }
#kaikki {
margin-left: auto;
margin-right: auto;
border: 4px black solid;
background-color: #CFE8F3;
padding: 0px;
width: 785px;
}
#valikko {
background-color: #CFE8F3;
border: 2px black solid;
float: left;
margin: 4px 2px 2px 2px;
width: 200px;
padding: 2px;
}
#sisallys {
background-color: #CFE8F3;
border: 2px black solid;
float: left;
margin: 4px 2px 2px 2px;
width: 200px;
padding: 2px;
}
#right {
background-color: #CFE8F3;
margin: 4px 2px 2px 2px;
width: 550px;
padding: 4px;
border: 2px solid black;
float: right;
}
#banneri {
background-image: url(images/banneri.gif);
background-color: #FFFFFF;
padding: 0px;
border: 0px;
margin: 0px;
height: 229px;
width: 785px;
}
Etusivu
Info
Tiedotteet
Palaute
Linkit
Muuta
Info
Sisältöä
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et j
usto duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
utem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis.
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no se
a takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et
nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no
rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
seuraava sivu
Sivu 1
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
lista
Tutkiskelin tuota CSS2-spesifikaatiota aikani ja tulin samaan tulokseen, jota jo alun perin aavistelin: Internet Explorer näyttää sivun väärin, ja ongelman alkulähteenä on floatien käyttö. Speksit määräävät mm. seuraavaa:
http://www.w3.org/TR/CSS21/visudet.html#normal-block
http://www.w3.org/TR/CSS21/visuren.html#floats
Lyhyesti ja suomeksi sanottuna normaalissa elementtien virrassa olevan lohkoelementin alareuna ei veny ko. elementin sisältämien floatien alareunojen tasalle. Antamasi lähdekoodin tapauksessa tämä tarkoittaa sitä, että kaikki-divin korkeus määräytyy banneri-divin mukaan.
--- Ratkaisutapa 1 (HTML-viritelmä) ---
Lisää kaikki-divin loppuun seuraava koodinpätkä:
Nyt floatien alapuolelle tulee staattisesti sijoitettu lohkoelementti, joka saa kaikki-divin venymään riittävän pitkäksi.
--- Ratkaisutapa 2 (ei ehkä luotettava) ---
Lisää kaikki-divin tyyliin määritys "overflow: auto;". Tämä saa Operan ja Firefoxin venyttämään kaikki-diviä siten, että myös floatit jäävät kaikki-divin reunojen sisäpuolelle. Speksien mukaan edellä mainitun määrityksen vaikutus on kuitenkin selainkohtainen, eikä se siis välttämättä toimi samalla tavalla muissa selaimissa.
--- Ratkaisutapa 3 ---
Kun kaikki-div sijoitetaan absoluuttisesti, myös floatit otetaan huomioon korkeuden laskennassa. Nyt tosin keskittäminen täytyy tehdä eri tavalla.
#kaikki
{
position: absolute;
left: 50%;
margin-left: -397px;
background-color: #CFE8F3;
width: 785px;
border: 4px black solid;
padding: 0px;
}
Kokeilin tuota ratkaisutapa ykköstä, ja homma toimii! kiitos paljon, että jaksoit vaivautua auttamaan!
Jos kaikki suomi24:n keskustelijat olisivat yhtä mukavia ja avuliaita kuin sinä, ei täällä olisi lainkaan ongelmia. Kiitos vielä kerran, olet ihana ihminen!