https://www.tunturisusi.com/index.htm
Tuossa sivun yläreunassa on neljä columnia tai siis diviä, täynnä tekstiä. Olen "omilla keinoillani" toteuttanut näiden divien välissä olevan pystyviivan taustakuvalla, jonka äärimmäisessä vasemmassa reunassa on pystyviiva.
Mutta kun diveissä sisältö loppuu kaikissa eri kohdissa, niin se pystyviivakin loppuu ennen aikojaan ja aina eri kohdissa. Onko mitään koodia, jolla sisällön eli tuon viivan siinä samalla saisi jokaisessa divissä yltämään alareunaan asti?
PS. Netistä kyllä löytyy useamman divin koodeja, joissa on alunalkaen huomioitu tämä ongelma, mutta en tässä yhteydessä voi alkaa vaihtelemaan koko koodia.
Tässä näitä tyylitiedostoja ovat
Lisäämällä ".container"-classille propertyn
display: flex
ja poistamalla ".container > class"-määrityksestä propertyn
height: 100%
saat innder-divit parentin korkuisiksi jolloin reunat ulottuvat loppuun asti.
Ohjeesi näytti lupaavalta ja olin aika varma, että näinhän tämä ratkesi. Mutta kun tein noin, eli tyylitiedostosta neloset.css poistin korkeuden 100% ja asetin tilalle display: flex;, niin koko sivun sisältö hajosi, kuin käsikranaatin jäljiltä! ;)
Kai laitoit tuon display: flex; -määritteen .container-luokalle, ei height: 100% -määritteen tilalle?
Juuripa niin kävi, eli en osannut korjata alkuperäisten ohjeiden mukaan tarkasti, vaan laitoin tuon flexin korkeuden tilalle. Nyt vasta huomaan, että ohjeissa on container ja container > class.
Toimii täydellisesti juuri kuten oli tarkoituskin. Viivat ulottuvat tasan alareunaan asti. Suuret kiitokset kummallekin.
PS. Jos tarkistat sivun, niin poista väliaikaistiedostot - ainakin minun piti tehdä taas niin, jotta uusi versio näkyy.
Lisäys:
Mutta huokaus, uusi ongelma.
Nyt ei toimi responsiivisuus oikein. Eli kun tila on pienentynyt kylliksi, divit eivät solahda alekkain.
Lisäys:
Palautin toistaiseksi tuon tyylitiedoston ilman flexiä, koska tämä responsiivisuus on äärimmäisen tärkeä ominaisuus.
Eli viivat saisi kyllä näillä ohjeillanne alas, kunhan saisi vielä samalla säilymään tämän responsiivisuuden - mutta miten?
Kiitokset.
Lisäys: Vielä yksi tarkennus - divit kyllä kapenevat, kun tila pienenee, mutta eivät siis lopulta solahda alekkain. (Sori, että selitin tämän monessa viestissä)
Minä näytän tämän ongelman näin. Tässä ensiksi etusivu ilman flexiä, mutta viivat eivät ulotu alas asti - responsiivisuus toimii hyvin, kun sivua pienentää:
https://www.tunturisusi.com/index.htm
Tässä sama sivu flexillä, viivat ulottuvat hienosti alas asti, mutta responsiivisuus ei toimi oikein, kun sivua sivusuunnassa pienentää:
No mitäs jos sä laittaisit noi muutokset vain riittävän leveään mediaan niin ne ei voi mitenkään vaikuttaa siihen toimintaan pienemmällä laitteella.
Tuo pitäisi kääntää minulle selkokielelle, että osaisin toteuttaa, eli koodeiksi - mitä ja minne. ;)
Yritin niin, että määritin jokaisen divin oikeaan reunaan borderviivan. Toteutus oli helppo. Silleen huono ratkaisu, että myös ihan oikeaan laitaan tuli viiva, minne sitä ei tarvita, vaan ainoastaan väleihin. Mutta lopputulos oli ihan sama
eli huono, kuin tastakuvillakin - divit eivät solahtele alekkain. Ja muutakin sotkua ilmeni.
Media-avainsanan avulla voi määritellä CSS-määrityksen koskemaan vain laitteita, joiden näytön koko on tarpeeksi iso:
@media screen and (min-width: 800px) {
.container {
display: flex;
}
}Eli tuo display: flex; on esimerkissäni päällä vain, jos näytön leveys on yli 800 pikseliä.
Lisää tietoa: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
Uskomatonta - sillä toivo oli katoamassa.
Suurkiitokset kaikille vastanneille ja tietysti Grezille ja fergusqille tästä mediasta, sillä tämä näyttää toimivan nyt täydellisesti. Korotin lukeman 800 lukemaan 1000, jossa on sivujeni breaking point.
(Ollapa tyylitiedostoon koodi, jolla saisi kerralla kaikille sivuille juuri nämä pystyt väliviivat. En ole käyttänyt tällaisia border-viivan kaltaisia viivoja yli kymmeneen vuoteen, mutta nämä näyttävät oikein käytettyinä ja riittävän ohuina hyviltä - siis minun silmääni, ja sehän on sivujen tekijälle tärkeää)
Tunturisusi kirjoitti:
Tuo pitäisi kääntää minulle selkokielelle, että osaisin toteuttaa, eli koodeiksi - mitä ja minne. ;)
Oletin että tuo media-valinta olisi sinulle jo lähtökohtaisesti ns. selvää pässinlihaa, kun sinulla oli jo ennestään seiellä tuo media-määritys jolla responsiivisuus oli toteutettu (ja jolla se css:ssä aina toteutetaan). Mutta hyvä että fergusq avasi asian ja sait sivun kuntoon.
On tuttuakin, mutta totuuden ja nöyryyden ;) nimessä on muistettava, että
- responsiivisuuden aikaansaavan median koodin olen saanut ohjelmointiputkasta
- kaikki div-koodit olen saanut ohjelmointiputkasta
- monet muutkin pienemmät jutut olen saanut ohjelmointiputkasta
Lähes kaikki sivuni ovat tällaisen kolmen divin sivuja ja eräillä niistäkin tämä viiva on tällä uudella medialla jo käytössä:
Mielestäni kun jostain "saa" jotain yksinkertaisia peruskoodeja, niin oma kehittymisen kannalta olisi hyvä tutkia niitä ja ymmärtää mitä ne tekevät eikä vaan kopioida sellaisenaan omaan projektiin. Tämä auttaisi valtavasti myös jatkoylläpidossa.
Olen juuri samaa mieltä ja näin olen pyrkinyt tekemäänkin. Jotkut vain ovat parempia erilaisissa asioissa, kuten koodaamisessa, kuin toiset, sille ei voi mitään. Itse en voi koskaan kuulua tähän parempien ryhmään. Mutta 99 % eteen tulleista ongelmista olen ratkonut itse, ja niitä on riittänyt, tällainen viiva on vain jäävuoren huippu.
Aihe on jo aika vanha, joten et voi enää vastata siihen.