Divien korkeus korkeimman mukaan

Dokumenttityypillä "-//W3C//DTD HTML 4.01 Transitional//EN" toimii IE9:llä mutta ei Mozilalla:

http://koti.mbnet.fi/ptmeks/v01.html

Kun vaihdan tyypin: "-//W3C//DTD XHTML 1.0 Transitional//EN", ei toimi kummallakaan.

http://koti.mbnet.fi/ptmeks/v02.html


Löytyykö helppoa ratkaisua tai muuta sopivaa scriptiä, jolla sais toimimaan etenkin myös alemmassa dokumenttityypissä?


Alkuperäinen scripti jota lähdin muokkaamaan löytyi: http://keskustelu.suomi24.fi/node/9528908#comment-47176622-view
9277
Äänestä

Muut lukivat myös

Vastaukset 9

Vanhimmat

Jos haluat vain vierekkäiset elementit samankorkuisiksi, käytä taulukkoa. Se hoitaa asian ilman JavaScriptiä (ja CSS:ääkin). Alkuperäisessä skriptissä, johon viittaat, kyse oli leveyksistä, jolloin tilanne on aivan toinen.

Jos kuitenkin pitää tehdä vaikeasti, niin ota huomioon, että div-elementin kaikki lapset eivät ole elementtejä. Kuten konsolista voi katsoa, koodisi aiheuttaa nyt virheitä, koska divi.childNodes[i].style ei ole kaikissa tapauksissa määritelty. Raaka tapa hoitaa asia on lisätä lauseen

divi.childNodes[i].style.height = suurinKorkeus "px"

eteen ehto

if('style' in divi.childNodes[i])

Äänestä
  • Kiitos, nyt toimii :)

    Scripti saattaa kyllä olla jäljiltäni vähän niin ja näin kun nuo ohjelmointitaidot perustuu pääosin yrityksiin ja erehdyksiin, joten korjausehdotukset on vähintäänkin suotavia.

    Laitan päivitetyn sivu näkyville, josta selviää myös perusidea: http://koti.mbnet.fi/ptmeks/v03_js.html

    Äänestä

Miksi taulukkoa pitäisi käyttää?
Ihan diveilläkin ja css:lläkin tuon saa aikaan.

Seuraavat tulevat tarpeeseen:
– display: table;
– display: table-row;
– display: table-cell;

Äänestä
  • Niin, miksi tehdä asia taulukolla, jolloin se toimii kaikissa selaimissa, kun yksinkertaisen asian voi tehdä mutkikkaasti ja tavalla, joka ei toimi lainkaan vanhoissa selaimissa? Kyllähän tuo viisaus kannatti kirjoittaa yli puoli vuotta sen jälkeen, kun asia oli jkäsitelty.

    Äänestä

  • Realistinen kirjoitti:

    Niin, miksi tehdä asia taulukolla, jolloin se toimii kaikissa selaimissa, kun yksinkertaisen asian voi tehdä mutkikkaasti ja tavalla, joka ei toimi lainkaan vanhoissa selaimissa? Kyllähän tuo viisaus kannatti kirjoittaa yli puoli vuotta sen jälkeen, kun asia oli jkäsitelty.

    No koska jos haluat olla katu uskottava css html pro, niin et tietenkää voi käyttää varmoja ja helppoja ratkaisuja jotka toimii kaikissa selaimissa jne, vaan on käytettävä kaikenlaisia kikkoja ym joilla toimivuus on epävarmaa.. eikä pidä unohdaa etä miltä sivu näyttää marginaalikäyttö laitteissa ja laitteissa joilla hyvin epäteden näköisesti kukaan sivullasi vierailee.. rannekellosta pölynimuriin :D .. niin ja pitää muistaa valitoida sikana vaikka sivut toimisikin erinomaisesti kaikissa laitteissa, niin validointi löytää kyllä virheitä sivustostasi ja sitämyöten sivustosi pilaa ja tuhoaa koko maailman

    Äänestä

Vanha juttu mutta laitan nyt vielä vähän selvitystä...

Tuo "taulukko" on tehty diveillä ihan siitä syystä, että cms:llä "solujen jotka ovat divejä" lisääminen onnistuu mutkattomasti mihin väliin hyvänsä. Javascripti ainoastaan määrittää kaikkien divien korkeuden korkeimman divin mukaan.

Äänestä

Taulukot on tarkoitettu taulukkomuotoisen datan esittämiseen, ei sisällön asemointiin. Siksi tuo ratkaisu.

Äänestä
  • Tuollainen kommentti vuosi sitten esitettyyn kysymykseen oli varmaankin uskontosi vaatima rituaali, joten sitä ei sovi kritisoida. Ymmärrämme, että sinulle annettuun missioon kuuluu kaikkien ”taulukkotaittojen” kantaminen roviolle, ja inkvisitiosi erottelee taittotaulukot muista kuulustelemalla jokaista taulukkoa, kunnes se tunnustaa olevansa taittosellainen.

    Mutta luulenpa, että täällä evankelioimisesta et paljoa pisteitä saa.

    Äänestä

Tuleveisuudessa ratkaisu ongelmaan on CSS:n flex-box.

Äänestä

Kommentoi aloitusta


ptmeks kirjoitti:

Dokumenttityypillä "-//W3C//DTD HTML 4.01 Transitional//EN" toimii IE9:llä mutta ei Mozilalla:

http://koti.mbnet.fi/ptmeks/v01.html

Kun vaihdan tyypin: "-//W3C//DTD XHTML 1.0 Transitional//EN", ei toimi kummallakaan.

http://koti.mbnet.fi/ptmeks/v02.html


Löytyykö helppoa ratkaisua tai muuta sopivaa scriptiä, jolla sais toimimaan etenkin myös alemmassa dokumenttityypissä?


Alkuperäinen scripti jota lähdin muokkaamaan löytyi: http://keskustelu.suomi24.fi/node/9528908#comment-47176622-view

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu