https://www.tunturisusi.com/jaakarhu/spaces.jpg
Etsin netistä noin 6 tuntia (eilisilta ja tämä aamu) kahden rinnakkaisen divin responsiivista koodia, vain yksi toimi ja se on tämä. Kuvassa yllä näkyy korjattava asia. Miten tuon tyhjän tilan Columnien ylä- ja ala-puolilla ja välissä saa pienemmäksi - miten sitä voisi säätää?
Käyttämäni koodit html:
<div class="row">
<div class="column" background-image="url('pivaa.jpg')">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" background-image="url('pivaa.jpg')">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>Ja CSS:
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 20px;
height: px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
.column {
width: 100%;
}
}Tunturisusi kirjoitti:
Miten tuon tyhjän tilan Columnien ylä- ja ala-puolilla ja välissä saa pienemmäksi - miten sitä voisi säätää?
voisin kuvitella että esim. laittamalla tuon
padding: 20px;
tilalle
padding: 0;
Tai jotain siltä väliltä. (jos laitat jotain 0 suurempaa, täytyy laittaa myös yksikkö, esim. px)
Lisäksi varmaankin tämä olisi tyylikästä tosiaan poistaa sieltä:
Tunturisusi kirjoitti:
height: px; /* Should be removed. Only for demonstration */
Tunturisusi kirjoitti:
Etsin netistä noin 6 tuntia (eilisilta ja tämä aamu) kahden rinnakkaisen divin responsiivista koodia
Kuulostaa hieman erikoiselta. Jos olisit käyttänyt tuon 6 tuntia css perusteiden opiskeluun, niin olisit luultavasti osannut tehdä tuon koodin itse eikä tätäkään viestiä olisi tarvinnut tehdä (kun osaisit itse säätää sitä koodia)
https://www.tunturisusi.com/jaakarhu/spaces2.jpg
Olin toki tuota paddingin arvon muuntelua kokeillut. Siinä oli se mahdoton puoli, että jos tuon padding 20px (joka on koodissa) muuttaa pienemmäksi, niin sisältö lähestyy ja lopulta menee kiinni vasempaan laitaan.
Tarkensinkin koodia näin:
.column {
float: left;
width: 50%;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 1px;
padding-left: 20px;
}Vielä jää responsiivisen alekkain asettautumisen jälkeen Columnien väliin hieman liikaa tilaa, mutta paranihan tämä. Poistin liikarivin.
Kiitokset Grez vastauksestasi.
Tämä:
Tunturisusi kirjoitti:
padding-top: 1px; padding-right: 20px; padding-bottom: 1px; padding-left: 20px;
on muuten sama asia kuin tämä:
padding: 1px 20px;
Sinänsä toki jokaisen omalla rivillään määrittäminen voi olla selkeämpää ainakin opiskelu- ja säätämisvaiheissa.
Jos et pääse tyydyttävään lopputulokseen tuossa nykyisessä kohdassa olevaa paddingia muuttamalla, voit tietenkin myös määritellä eri paddingit noille yli ja alle 1000px leveille. Lisäksi yksi mahdollisuus on laittaa molemmat divit saman divin sisään ja määritellä paddingeja sille ulommalle diville, jolloin saat ryhmän ulkopuolelle tilaa sen verran kuin haluat ilman että osien väliin tarvitsee jättää tilaa.
Tuossa float-räpellyksessä on se ongelma, että ihan satavarmaan nuo css-säännöt yksinään eivät toimi, koska padding kasvattaa laatikon leveyttä ja jos kaksi vierekkäistä laatikkoa ovat "50 % + 40 px" leveitä, niin ne eivät koskaan mahdu vierekkäin. Eli sinulla on jossain muualla muita css-sääntöjä, jotka muuttavat laatikoiden käyttäytymistä.
Mutta tuo floattien käyttö on jo vuosia sitten vanhentunut tapa ja sillä saa vain rikkinäistä jälkeä, joka ei skaalaudu (kun lisäät yhden elementin, niin luultavasti koko paska hajoaa ja vaatii reilusti koodin muokkaamista) ja aiheuttaa vain harmaita hiuksia vähän osaavammillekin.
Tee jotain tällaista:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.row {
display: flex;
}
.col {
flex-grow: 1;
flex-basis: 100%;
padding: 15px;
margin: 15px
}
</style>
<style>
.row {
min-height: 600px;
}
#first {
background-color: #26ca8c;
}
#second {
background-color: #10a9bd;
}
</style>
</head>
<body>
<div class="row">
<div class="col" id="first">
<h1>Title</h1>
<p>Some content...</p>
</div>
<div class="col" id="second">
<h1>Another title</h1>
<p>More content...</p>
</div>
</div>
</body>
</html>Flexboxin etu on sekin, että mitään breakpoint-sääntöjä ei välttämättä edes tarvitse: kun lisäät flex-wrap-määritteen row-luokalle, niin viimeisenä oleva elementti putoaa automaattisesti uudelle riville, jos selaimen leveys ei riitä.
Joskus on parempi määrittää käsin, milloin mitkäkin elementit rivittyvät omille riveilleen ja toiste on järkevämpää antaa vain palikoiden asettua paikoilleen luonnollisten rajoitteiden mukaan. Se vaihtelee käyttökohteen mukaan.
Voit myös asettaa yhdelle .column-elementille kiinteän leveyden ja loppujen koko määräytyy jäljelle jääneen tilan mukaan; ei onnistu niin helposti floateilla.
The Alchemist kirjoitti:
Eli sinulla on jossain muualla muita css-sääntöjä, jotka muuttavat laatikoiden käyttäytymistä.
Varmaankin tosiaan voidaan olettaa, että siellä jossain on
box-sizing: border-box;
The Alchemist kirjoitti:
Mutta tuo floattien käyttö on jo vuosia sitten vanhentunut tapa
Itsekin suosittelen flexboxia, jos ei jostain syystä ole pakko tukea ennen 2014 julkaistuja selaimia. Ja jos niitä on pakko tukea, niin suosittelen muutenkin (oman mielenterveydenkin kannalta) hakeutumista muihin hommiin :D
https://www.tunturisusi.com/treenataan/
Alchemist, kiitokset, otan mielelläni nämä modernimmat koodisi käyttöön, kun kerrot vielä, miten saan nuo kaksi elementtiä solahtamaan alekkain vaikkapa 1000 px:n kohdalla. Nyt ne eivät solahda ollenkaan alekkain, vaikka kuinka skaalaan pieneksi. Voisitko antaa valmiin koodilisäyksen.
(Juuri tällaisia löysin netistä useita siis silleen samanlaisia, että responsiivista alekkain solahdusta ei tapahdu minun eväilläni.)
Tuolla harjoitussivulla kun menee alemmaksi, löytyvät nämä värikkäät laatikot.
--------------------------------------------------
Grez, minulle tämä on ihan mukavaa ajankulua. Ennen neuvojen antajilta pettää kantti kuin minulta, mutta kiitokset kaikista saamistani neuvoista. Emme voi olla samalla viivalla kaikissa asioissa ei niin koodailuissa kuin muissakaan asioissa.
No tässä nyt jokin nopea esimerkki kahdella breakpointilla. Toinen pakottaa rivin kolmeen yhtä leveään sarakkeeseen ja toinen kaikki sarakkeet allekain. Kannattaa kokeilla, miten käyttäytyminen muuttuu eri tyylisääntöjä tuunaamalla...
Laiskalle lukijalle tiedoksi, että tyylisääntö flex ottaa enintään kolme parametria, jotka vastaavat kolmea muuta tyylisääntöä:
- flex-grow
- flex-shrink
- flex-basis
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.row {
display: flex;
/**
* Sallii ylimääräisten laatikoiden pudota omalle rivilleen.
*/
flex-wrap: wrap;
}
.col {
padding: 15px;
box-sizing: border-box;
/**
* Alustaa (yhdessä flex-wrap'n kanssa) rivin sallimaan max. 10
* keskenään samankokoista saraketta.
*/
flex: 1 0 10%;
/* Marginaali poistettu käytöstä esimerkin yksinkertaistamiseksi. */
/* margin: 15px; */
}
@media (min-width: 801px) and (max-width: 1000px) {
.col {
/**
* Pakottaa rivityksen joka kolmannen laatikon jälkeen. Sarakkeen
* leveys on kiinteästi 33 %.
*/
flex: 0 0 calc(100% / 3);
/**
* Tämä tyylimääritys muuttaa yllä olevan flex-säännön ensimmäistä
* arvoa; tässä erikseen esimerkin vuoksi. Sallii omalle rivilleen
* pudonneen laatikon venyä täyttämään koko rivin leveyden.
*/
/* flex-grow: 1; */
}
#first {
background-color: blue !important;
}
}
@media (max-width: 800px) {
.row {
/**
* Vaihtoehtoinen tapa pakottaa kaikki sarakkeet allekain.
* Käyttäytyy hieman eri tavalla tiettyjen tyylisääntöjen
* kanssa käytettynä...
*/
flex-direction: column;
}
.col {
/**
* Jos tätä sääntöä ei ole, niin laatikot venyvät korkeussuunnassa
* täyttämään .row-elementin koko tyhjän tilan.
*/
flex: 0 1;
}
#first {
background-color: red !important;
}
}
</style>
<style>
.row {
min-height: 1200px;
border: 5px solid gray;
}
#first {
background-color: #26ca8c;
}
#second {
background-color: #10a9bd;
}
#third {
background-color: #ca4726;
}
#fourth {
background-color: #bd106c;
}
</style>
</head>
<body>
<div class="row">
<div class="col" id="first">
<h1>Title</h1>
<p>Some content...</p>
</div>
<div class="col" id="second">
<h1>Another title foo bar baz</h1>
<p>More content...</p>
</div>
<div class="col" id="third">
<h1>Title</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed pharetra ligula. Pellentesque ullamcorper sapien metus, ut commodo urna vulputate nec. Ut faucibus leo non bibendum imperdiet. Nullam porttitor ultrices convallis. Etiam dolor nulla, scelerisque non egestas sit amet, ultrices nec sem. Suspendisse blandit, nunc efficitur bibendum malesuada, orci nibh tincidunt purus, eu consectetur diam sapien vel diam. Proin lobortis felis vel ipsum scelerisque iaculis. Maecenas pulvinar ultrices tempus. Etiam nec bibendum tellus. Suspendisse ac dolor justo. Integer commodo mauris sit amet finibus venenatis. Cras nec rutrum odio. Nam eu dolor quam. Aliquam vel justo ac diam fringilla placerat. Fusce pulvinar iaculis neque.</p>
</div>
<div class="col" id="fourth">
<h1>Another title foo bar baz</h1>
<p>More content...</p>
</div>
</div>
</body>
</html>https://www.tunturisusi.com/jaakarhu/
.row {
display: flex;
}
.col {
flex-grow: 1;
flex-basis: 100%;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
</style>
<style>
.row {
min-height: 600px;
}
#first {
background-color: ;
background-image: url("pivaa.jpg");
}
#second {
background-color: ;
background-image: url("pivaa.jpg");
}
@media (max-width: 1000px) {
.row {
/**
* Vaihtoehtoinen tapa pakottaa kaikki sarakkeet allekain.
* Käyttäytyy hieman eri tavalla tiettyjen tyylisääntöjen
* kanssa käytettynä...
*/
flex-direction: column;
}
.col {
/**
* Jos tätä sääntöä ei ole, niin laatikot venyvät korkeussuunnassa
* täyttämään .row-elementin koko tyhjän tilan.
*/
flex: 0 0;
}
#first {
background-color: red !important;
}
}The Alchemist, jälkesi on ihailtavan täydellistä ja on suuri vaara, että jotenkin heti sitä sotken, mutta tällä kopioimallani koodituksella nuo laatikot sivullani toimivat täydellisesti. Siirsin sen näissä muodoissaan aluksi heti myös varsinaiseen jääkarhuun ja sitten ajan kanssa kaikkialle.
Kiitoksin.
PS. Tarvitsen vielä pientä apua menussa, kysyn sitä piakkoin.
Tunturisusi kirjoitti:
Grez, minulle tämä on ihan mukavaa ajankulua. Ennen neuvojen antajilta pettää kantti kuin minulta, mutta kiitokset kaikista saamistani neuvoista.
En viitannutkaan tuossa aikaisemmassa viestissäni sinun tilanteeseesi.
Puhuin yleisesllä tasolla tilanteesta, jossa on esimerkiksi töissä yrityksessä jossa järjestelmät on niin antiikkisia että täytyy tukea vaikkapa Internet Explorer 9:ää (joka ei tue Flexboxia). Taitaa moinen tilanne olla muutenkin nykyään onneksi jo tosi harvinainen, jos ylipäätään olemassakaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.