Keskustelu: Nettisivujen teko: Miten responsiiviset divit sukeltaisivat alekkain

http://www.tunturisusi.com/tunturisusi/harjoitus2.htm

Kaksi päivää yritin miljoonin tavoin, joten jospa kysyisin.

Kun tuota kahden divin responsiivista sivua kaventaa, niin sisältö skaalautuu pienemmäksi - ja tarkoitus oli, että jossakin tietyssä pisteessä oikeanpuoleinen div sukeltaa vasemmanpuoleisen alle, ja samallahan sisältö automaattisesti hieman levenisi. Näin ei kuitenkaan tapahdu.

Tässä on tuon sivun tyylitiedosto:

http://www.tunturisusi.com/tunturisusi/harjoitus2.css

Ja nämä diveihin liittyvät osiot ovat siinä alareunan puolella.

Tämä lienee asiantuntijalle helppo neuvottavaksi.

Miten tämä hoituu? Kiitos.

Katso vaikka Chromen kehittäjätyökaluilla tyylejä, niin näet ongelman: vaikka sivun kaventuessa @media-lohkosi tavallaan tulee käyttöön, alkuperäinen 48%:n leveys on CSS-tiedostossa alempana ja siksi kumoaa @media-lohkossa asetetun 100%:n leveyden. Siirrä @media-lohko tiedoston loppuun, niin se toimii toivomallasi tavalla.

Uskomatonta silleen, että neuvoit näin täydellisesti - koska minusta oli tuntunut, että tämä ei onnistu koskaan. Katselin neuvoja lähinnä enkunkielisiltä sivuilta, en osannut hyödyntää mainitsemaasi selaimen työkalua.

Suurkiitokset, käytän tätä ominaisuutta monilla sivuillani.

Ja ainahan pitää olla yksi jatkopyyntö. Kun sivun sisältö on skaalautunut halutunlaiseksi, niin teksti näyttää hipovan ihan oikeaa reunaa. Voisitko sanoa vielä, miten saan sinne pienen tyhjän raon?

Ei näytä toteutuvan, jos tuohon oikean puoleiseen block2 laittaa margin-right ja siihen joko pikseleitä tai prosentteja, myöskään paddingin suurentaminen ei vaikuta mitään.

tarkoitatko esim seuraavaanlaista?

poista koko .topblock luokka ensin (Siitä ei ole kuin haittaa), ja muuta seuraava luokka:

@media screen and (max-width: 768px) {
 .block1, .block2 {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
 }
}
/* Tämä pois
.topblock {
    width: 100%;
    padding: 10px;
    border: ;
}
*/

jos tuo topblock jostain syystä pitää olla että saat nuo oranssit reunat kun näyttö > 768px mutta ei haittaa kun < 768px , muuta se media screen lohkon sisään seuraavanlaiseksi:

@media screen and (max-width: 768px) {
 .block1, .block2 {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
 }

 .topblock {
    width: auto;
    padding: 0px;
 }
}

En tarvitse noita oransseja reunoja, ne vain jäivät jostakin.

------------------------------------

Näillä uusilla virityksilläsi sain sivustani täydellisen, juuri sellaisen kuin halusin. Eli poistin tuon, mikä piti poistaa ja laitoin uuden media selvityksen.

Olen rajattoman kiitollinen.

Kiitokset kummallekin neuvojalle. Jos minulle tulee uusia ongelmia, kysyn, nyt siirrän tätä uutta systeemiä eräille sivuilleni.

Kivaa viikonloppua.

Lisäys:

http://www.tunturisusi.com/tunturisusi/index.htm

No, pakko on vielä perfektionistina ;) kysyä tämä. Etusivulla näkyy tämä "ongelma" eli vasemmanpuoleinen div on alareunastaan liian lyhyt, sehän pitenee sisällön mukaan. On varmaan jokin koodi, jolla nuo molemmat divit saisi aina alareunastaan yhtä pitkiksi, vaikka siältö aina hieman vaihteleekin pituudeltaan?

periaatteessa sun pitäis jakaa tuo sivu vähän eri tavalla, ei oikeaan ja vasempaan vaan riveihin. ja asettaa riville aina 2 itemiä normaalitilassa, < 768 tilassa leveys vanhalla tavalla. Tähän responsiivisuuteen on olemassa kirjastoja nykyisin myös, kuten bootstrap. toki voit myös javascriptillä katsoa tuon oikean ja vasemman koot, ja asettaa pienemmän suuremman kokoiseksi.

bootstrapissä sivu jaetaan aina 12 kaistaleeseen vertikaalisesti.
col-xs = pienin näkymä, mobiililaitteet
col-md = toiseksi pienin, tabletit
col-md = "tavalliset" näytöt
col-lg = suuret näytöt

col-xs-12 tarkoittaa että elementti vie koko parentin leveyden mobiilissa, kaikki 12 kaistaletta
col-sm-6 tarkoittaa että elementti vie puolet parentista tablettinäkymässä
col-md-4 tarkoittaa että elementti vie kolmasosan parentista, tavallisilla näytöillä
parentilla tarkoitetaan siis elementtiä jonka sisällä ollaan.

eli tyyliin

<!-- ekat kaksi -->
<div class="rivi">
  <!-- vasen -->
  <div class="item">
  </div>
  <!-- oikea -->
  <div class="item">
  </div>
</div>
<!-- seuraavat kaksi -->
<div class="rivi">
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<!-- jne -->

<!-- bootstrapillä -->
<div class="row">
  <!-- vasen -->
  <div class="col-xs-12 col-sm-12 col-md-6">
  </div>
  <!-- oikea -->
  <div class="col-xs-12 col-sm-12 col-md-6">
  </div>
</div>
<!-- seuraavat kaksi -->
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-6">
  </div>
  <div class="col-xs-12 col-sm-12 col-md-6">
  </div>
</div>

javascriptillä menisi jokseenkin näin (jQuery):

$(document).ready(function() {
   var vasenKoko = $("#vasen").height();
   var oikeaKoko = $("#oikea").height();

   if(vasenKoko > oikeaKoko) {
     $("#oikea").height(vasen);
   }
   else {
     $("#vasen").height(oikea);
   }
});

*edit*
tai kuten metabolix sanoikin, taulukoilla.

Helpointa olisi poistaa CSS:stä width, display ja float ja sen sijaan asettaa sarakkeet taulukoksi (jos tilaa on tarpeeksi; muuten ne menevätkin jo oletuksena allekkain).

@media screen and (min-width: 768px) {
	.block1, .block2 {
		display: table-cell;
	}
}

Toisaalta on hyvä huomioida, että sivun asettelu muuttuu myös ikkunan kokoa muutettaessa ja näin ollen koko oikean sarakkeen siirto sivun loppuun voi tulla käyttäjälle yllätyksenä. Sikäli groovyb:n ehdottama jako riveihin voisi olla kätevä. Ongelmaksi tulee, että vierekkäisten asioiden ollessa eri mittaisia sivulle jää paljon tyhjiä rakoja.

Auttaisiko flexbox tässä jotenkin? (En muista.)

Tuohon rivittämisen mukana tuomaan rako-ongelmaan auttaa ehkä kuvien tarkennukset - kuvat tulisi muotittaa samankokoisiksi elementeiksi, jolloin ainut poikkeama olisi enää tekstin määrä kuvan alapuolella. Eri aspect ration sisältämät kuvat tulisi luonnollisesti cropata jos näin aiotaan toimia.

Toisaalta, nykyään on jopa trendikästä, kun elementit eivät tasoitu ihan samoihin mittoihin, aikaansaaden pienen palapeliefektin sivustolle.

Tossa kun html:ää sivustolta vähän katsoin, niin eniten nuo <font face -jutut nappaa silmään.
Mikä niiden tarkoitus on? fontit tulisi määritellä css:ssä: Esimerkki. Muutenkin, yritä välttää elementteihin lyötyjä inline stylejä, eli <div style="tämä on inline styleä", ja tee tyylit css -tiedostoihisi luokilla ja id arvoilla.

nyt sivuilla on tällästä hässäkkää:

<font face="Bookman Old Style, Book Antiqua, Garamond, Verdana" size="3" color="#330000">
   <font face="Bookman Old Style, Book Antiqua, Garamond, Verdana" size="3" color="#330000">
      <font face="Bookman Old Style, Book Antiqua, Garamond, Verdana" size="3" color="#330000">
        <table width="100%" height="80" bgcolor="#ffffff" background="footer2.png" cellspacing="0" cellpadding="20" border="0" bordercolor="#000000">
        </table>
      </font>
   </font>
</font>

tee fonttimääreesi css luokkiin, ja käytä niitä.
Esimerkiksi seuraava pätkä asettaa koko sivustollesi saman fontin joka paikkaan, eikä sitä tarvitse enää viljellä minnekään html elementteinä.

body {
  font-family: "Bookman Old Style", "Book Antiqua", Garamond, Verdana;
  font-size: 1.2em;
  color:#330000;
}

Huomasinpa tässä samalla, että putka ei taida varsinaista CSS -opasta sisältää. Sellaisen voisi joku väkertää, jos aikaa löytyy ylimääräistä.

eli CSS luokkien määreet periytyy elementtien sisällä lapsiin by default:

<style>
/* Jos CSS on samassa tiedostossa html:n kanssa, pistetään se <style> -elementin sisälle */
    .luokka {
      color: green; /* Väri vihreäksi */
    }
</style>

<div class="luokka">
  <p>Väri on vihreä!</p>
  <div>
     <div>
     <p>Täälläkin väri on vihreä!</p>
     </div>
  </div>
</div>

ja koska tyylit periytyy lapsille, tarkoittaa <body> (tai <html>) -tägille annetut määreet sitä, että ne on voimassa koko verkkosivustolla, ellei muuta määrätä (anneta uusia tyylejä elementille). CSS luokkia voi antaa elementille useita.

lapsilla tarkoitetaan elementin sisällä olevaa elementtiä

<div id="eka"> <!-- kaikkien elementtien vanhempi eli parent tässä esimerkissä -->
  <div id="toka"> <!-- "eka" elementin child (lapsi), sekä seuraavan, "kolmas" elementin parent -->
     <div id="kolmas"> <!-- "toka" elementin child -->
     </div>
  </div>
</div>

<!-- Tässä esimerkki siitä, miten tuo toimii käytännössä -->
<style>
 .blue {
  color: blue;
 }
 .red {
  color: red;
 }
 .font-size-small {
  font-size:0.6em;
 }
 .font-size-large {
  font-size:2em;
 }
</style>

<div class="blue">
   <p>Väri on sininen, ja fontti normaali</p>
   <div>
      <p class="font-size-small"> Väri on sininen, ja fontti pieni</p>
      <p class="red font-size-large">Väri on punainen, ja fontti iso</p>
   </div>
</div>

Todella paljon arvokasta tietoa, jonka tästä talletan ja alan tutustua. Minulta menee aina tovi, kun miellän jonkin uuden asian paneutumisen jälkeen. Kiitokset.

Minulla tuon leipä- eli perustekstin fonttikoko on määritetty tyylitiedostossa. Olen sitten erikseen fontitellut sivuillani näitä värillisiä otsikoita, joihin miellyin vuosia sitten.

Todellakin on noin, että surffaajalle koko oikean puolen "katoaminen" sinne alas tulee ehkä yllätyksenä, mutta vierittämällä se kuitenkin löytyy ja toisaalta lopputulos omaan silmääni näyttää kauniilta.

Ja olen samaa mieltä tuosta palapeliefektistä, sekin voi näyttää kivalta, kun sen ottaa niin.

Tuollainen CSS-opas olisi arvokas ja hyvä. Suomenkielistä tietoa löytyy netistä palasina vähän eri puolilta ja englanniksi sama juttu. Mutta yhtenäinen esitys olisi varmasti monelle sivujen tekijälle hyvin mieluinen.

groovyb kirjoitti:

...
ja koska tyylit periytyy lapsille, tarkoittaa <body> (tai <html>) -tägille annetut määreet sitä, että ne on voimassa koko verkkosivustolla, ellei muuta määrätä (anneta uusia tyylejä elementille).
...

Hieman tarkennuksia: jotkut ominaisuudet periytyvät, toiset taas eivät. Periytyminenkään ei takaa deklaraatioiden voimaan jäämistä, vaan hyvinkin moni asia saattaa vaikuttaa lopputulokseen.

groovyb kirjoitti:

CSS luokkia voi antaa elementille useita.

Tässä luokat ovat merkkauskielen (HTML) rakenteita, yleisiä class-attribuutteja, joihin sitten voidaan viitata mm. CSS-luokkavalitsimilla (selektoreilla).

Joo, puhuin vähän yleistäen. Joku voisi CSS3 -oppaan väkertää, jos saa aikaa sellaisen tekemiseen järjestettyä. Siitä voisikin sitten helposti laajentaa lessiin ja sassiin.

http://www.tunturisusi.com/tiaiset/index.htm

Kyllä, toisen divin sukeltaminen alas vaatii oman ajattelunsa. Toteutin tiaisissa tämän niin, että laitoin jokaisen tiaisen erilliseksi div-yksiköksi.

Vielä tarvitsisin sellaisen koodin, jolla vasemmanpuoleinen div sukeltaa oikeanpuoleisen alle. Onkohan sitä olemassa. Nimittäin useimmiten olisi luontevaa olla niin, että kuva on oikealla ja teksti vasemmalla. Ja alassukelluksen jälkeen tuolloinkin teksti sukeltaisi kuvan alle.

Eräillä sivutyypeillä tämä alassukellus ei aiheuta mitään lisäajattelua. Esim. jos sivulla on vaikkapa sananlaskuja ja aforismeja suuri määrä, niin eipä haittaa, miten ne järjestyvät sen jälkeen, kun toinen div on pudonnut.

Ja heh. ;) Alassukellus - omaa terminologiaani. Minulle nuo deklaraatiot ja attribuutit jäävät ainiaaksi vieraiksi, ja hyvä niin.

PS. En tuo muita sivujani tämän jälkeen esittelyyn - toin vain sen verran, että koodien kirjoittajat näkevät, että koodeja käytetään. Olen käyttänyt tätä koodia jo muutamilla kymmenillä muillakin sivuillani. Kaikkialla sitä ei laisinkaan tarvita, ja jossakin se on hyvä lisä.

Koko ajattelussasi on olennaisena ongelmana se, että lähdet leveän ruudun tilasta – joka jo muutenkin vaatii monia CSS-tyylejä – ja mietit, miten saisi siitä kapean ruudun tilan. Usein on helpompi laittaa asiat HTML-koodissa siihen järjestykseen, johon ne kuuluvat kapealla ruudulla, ja miettiä sitten, millä tyyleillä ne saa leveällä ruudulla eri kohtaan. Ylipäänsä kannattaa miettiä molempien tilojen vaatimuksia alusta asti, ja sivun ”perustila” ei välttämättä ole kumpikaan noista, vaan perustilana voi pitää sitä, miltä sivu näyttää ilman CSS-tyylejä.

Tunturisusi kirjoitti:

Vielä tarvitsisin sellaisen koodin, jolla vasemmanpuoleinen div sukeltaa oikeanpuoleisen alle.

Laita koodiin ensin ylempi ja sitten alempi, ja leveämmällä ruudulla laita ensimmäiselle float:right (ja molemmille sopivat leveydet).

Kiitokset.

Jeps, varmaan "suurelliseen" ajatteluuni vaikuttaa sekin, että näyttönäni on 46-tuumainen Sony HD-tv, jolta kaikki näkyy hienosti ja suurena. Laitoin isomman 60 tuuman television ja tämä entinen, vuodelta 2013, jäi tietokoneen näytöksi. Yritän silti tehdä sivuistani responsiivisia niin pitkälle, kuin se vaatimattomilla tiedoillani käy päinsä.

PS. Eräs sukulaiseni on Ylellä töissä ja kun hän näki kesällä näyttöni, hän totesi, että parempi kuin heillä töissä. ;) Mutta siellä he väliaikoina seuraavat television ohjelmatarjontaa 80 tuuman näytöltä.

PPS. Ylen nettisivut ovat mielestäni netin hienoimpia, usein jään ihastelemaan niitä. (Olen aivan sivupoluilla)

Lisäys: Siirsin kuvat heti oikealle ja toimii kuten pitikin. Kiitos vielä kerran.

Jos se on tosiaan HD-tv (1920x1080), niin sehän on nykymittapuun mukaan oikeastaan aika normaalikokoinen sivunsommittelun kannalta, vaikka tuumakoko olisi isokin.

Kyllä tämä HD on, ihan heti en muista noita pikseleitä. Tuo uusi LG on 4k Ultra HD ja olen sillä katsonut Netflixin 4k HD tarjontaa, mikä on uskomattoman nautinnollista. Sonyn kuvam värilaatu on ehkä hivenen parempi kuin LG:n.

Tuota Sonya varten jo piti asennuttaa antennit, vahvistin ja häiriönpoistin - teräväpiirtolähetyksiä varten. Haja-asutusalueella on antennin varassa, mikä on harmi - mutta onneksi tuli lisäksi tämä Netflix. Teräväpiirto näkyy televisiossa juuri ja juuri ja olisin laittanut seuraavaksi satelliittilautasen, jos olisi ollut tarve. Sen signaali tulee tähän vahvana, minkä katselin asentajan kanssa juuri viime toukokuussa.

Ja itse asiaan, tietenkin on varmaan kaikilla suunnittelijoilla nykyisin isot näytöt. ;)