Keskustelu: Nettisivujen teko: Paddingin vaikutus taustakuvassa tai -värissä

Terve

Jos elementillä on taustakuva tai -väri, niin padding siinä elementissä vaikuttaa valitettavasti myös siihen taustaan.

#elementti {
  background-color: #fff;
  width: 900px;
  padding: 0px 10px 0px 10px;
}

Nyt taustaa kutistetaan sivuilta kymmenen pikselin verran, vaikka tarkoitus on siirtää vain #elementin tekstiä. Onko olemassa puhdasta CSS-kikkaa, jolla vältyttäisiin taustan siirtymiseltä ja vältettäisiin toisen elementin tarve tekstille?

Nyt olet kyllä väärässä. Padding nimenomaan ei siirrä taustaa. Liittyyköhän ajatusvirheesi siihen, että elementin leveydeksi tulee noilla asetuksilla 920px, koska padding lasketaan widthin ulkopuolelle?

Nähtävästi siinä oli käynyt noin. Korjattu!

Onkohan muuten olemassa jotain CSS2.1-tapaa CSS3:n last-child-operaattorille? W3C:n mukaan se ei ole CSS2.1:een kuuluva operaattori, mutta nähtävästi CSS3:een se kuuluu. Myöskään nth-last-child ei toimi kuin CSS3:ssa.

Jos olisi, miksi luulet, että sellainen lisättäisiin uudestaan? Sitä paitsi last-child kuitenkin sisältyi alkuperäiseen CSS 2:een. Käytännössä voi olettaa, että jos selain tuntee first-childin, se tuntee myös last-childin, ovathan nämä selainten tekijöille yhtä helppoja toteuttaa. Uudemmat nth-jutut ovat sitten eri asia.

Jos elementtien määrä on ennalta tiedossa, voit hyödyntää +:aa.

On kyllä helvetin ärsyttävää, että tuo padding lisää tuota widthiä/heightiä. Pitäisi olla joku erillinen width/height-arvo, jossa padding vähentäisi itse contentin leveyttä.

CSS3 tarjoilee:

box-sizing: border-box;

Eli reunus (border) ja sisennys (padding) menevät leveysarvon sisäpuolelle.
Eli leveys (width) = sisällön + sisennyksen + reunuksen leveydet.

box-sizing: content-box; (huom! tämä on oletusarvo)

Eli reunus (border) ja sisennys (padding) menevät leveysarvon ulkopuolelle.
Eli leveys (width) = sisällön leveys.

Onhan tuossa CSS3:ssa kaikkea kivaa, mutta eipä noistakaan päästä vuosiin iloitsemaan, sillä niin kauan kun noita vanhoja selaimia käytetään niin joutuu kuitenkin käyttämään CSS2-tyylejä niitä varten.

punppis kirjoitti:

On kyllä helvetin ärsyttävää, että tuo padding lisää tuota widthiä/heightiä.

Padding nimenomaan ei lisää niitä. CSS-määrittelyjen ja modernien selainten laatikkomallissa (vastakohtana IE:n vanhojen versioiden omalle pelille) on olennaista, että width ja height asettavat sisällön leveyden ja korkeuden.

Tarkoitit ehkä, että padding lisää elementin vaaka- tai pystysuunnassa viemää kokonaistilaa. Niin siis on tarkoitus. Se voi olla ajatuksellinen ongelma, mutta ainakin jos kaikki dimensiot on tarkoitus esittää pikseleinä, asiahan hoituu käytännössä sillä, että lukuarvot valitaan sopivasti.

Leveyden hallinta on yksi asia, jossa CSS:n standardisointi "meni metsään". Kaikki vanhat selaimet taisivat käsitellä reunuksen ja sisennyksen laatikon leveyden sisään. CSS:ssä sitten määriteltiin asia toisin ja väki valitti. Standardi kuitenkin pidettiin kuten se oli, koska se oli standardi. Jouduin itsekin aikanaan pähkäilemään, koska ehdin oppia vanhan tavan ja se tuntui heti alusta alkaen järkeenkäyvältä. Standardinmukainen leveydenhallinta tuntui järjettömältä kun aloin vaihtaa CSS:n käyttöön. Toki siihen oppi, mutta ylimääräistä oppimisvaivaa piti nähdä.

Onneksi CSS3 ratkoo kuitenkin ongelman vihdoin.

Kyllähän tuo CSS:n box model muutenkin tuntuu vaikeuttavan sivujen tekemistä, jos haluaisi käyttää pikseleiden sijaan jotain muuta pituusyksikköä eikä tunkea joka väliin lisää elementtejä pelkän paddingin tai borderin takia.

The Alchemist kirjoitti:

Kyllähän tuo CSS:n box model muutenkin tuntuu vaikeuttavan sivujen tekemistä, jos haluaisi käyttää pikseleiden sijaan jotain muuta pituusyksikköä eikä tunkea joka väliin lisää elementtejä pelkän paddingin tai borderin takia.

Siis miten vaikeuttaa? Jos asetat paddingin, se vain pitää ottaa huomioon width- ja height-ominaisuutta, jos halutaan päästä johonkin tiettyyn kokonaisleveyteen tai -korkeuteen. Tämä pätee, oli yksikkönä pikseli tai jotain muuta. Vai mitä vaikeutta tarkoitat?

Yleensä nuo sivut vaan tehdään jonkun leiskan pohjalta ja leiskassa on selkeästi määriteltynä, että tässä kohtaa on tekstille tilaa vaikkapa 500 pikseliä. Ihan törkeän epäloogista laittaa siihen widht-arvoksi esim. 480px, jos nyt sattuu olemaan paddingi 10px per sivu. Jos joskus haluaa sitä paddingia nostaa, niin saa sitten taas muuttaa sitä widthiä erikseen. Välillä kun tekee tuota css-taittoa vähän monimutkaisemmassa sivustossa, niin tuntuu että tekee jotain ala-asteen yhteenlaskukoetta.

Itsellä ainakin lähes 100% ajasta haluan määrittää laatikon leveyden paddingeineen päivineen, jolloin se vie ruudulta sen määritetyn leveyden ja that's it. Nykyisen systeemin kanssa joutuu kikkailemaan turhia.

Tuskin kukaan muutenkaan haluaa määritellä itse tekstiosuuden tilaa, vaan nimenomaan sen koko boksin tilan paddingeineen päivineen, sillä tuo tila on usein rajattu. Tämän takia koko setti on sangen epälooginen.

Tuohan on asennekysymys. Toki CSS:n malli on hankala, jos viilataan pikselilleen niitä ulkoasuja, mutta silloin käytetäänkin yleensä pikseleitä kaikkeen ja laskeminen on mahdollista. Jos taas tehdään joustavaa ulkoasua, kaikkea ei voi laskea valmiiksi, koska esimerkiksi fontin tarkka koko (ja siten tiettyjen tekstien vaatima tila) ei ole tiedossa. Silloin laatikkomallista on vaivaa, jos yrittää vääntää joustavaa ulkoasua pikselintarkasti.

Helppo ratkaisu ongelmaan on suunnitella ulkoasu niin, että tarkoilla leveyksillä ei ole merkitystä. Käytännössä tästä usein seuraa, että ulkoasussa on vähemmän turhaa glitteriä ja kuvia, mikä on ainakin minun mielestäni vain hyvä asia, vaikka markkinointiosasto ehkä onkin eri mieltä. Joustavassa ulkoasussa on myös usein tärkeämpää saada juuri tekstiosuuden vähimmäisleveys sopivaksi.

Harva asia netissä ärsyttää niin paljon kuin sivut, jotka "vie ruudulta sen määritetyn leveyden". Jos venytän selainikkunan täyttämään koko ruudun, tarkoitukseni ei suinkaan ole saada reunoille 10 cm tyhjää tilaa vaan saada enemmän sisältöä kerralla näkyviin. Vastaavasti jos laitan ikkunan kapeaksi, en halua hankalaa sivusuuntaista vierityspalkkia vaan kapeamman sisällön.

Tuossa on kyllä pointtia, mutta markkinointimielessä sitä glitteriä on pakko olla jos tekee nettisivuja esim. asiakastöinä. Hienoa graafista settiä on lähes mahdoton tehdä skaalautuvaksi.

Paitsi että nykyään löytyy mm alfaläpinäkyvät PNG-kuvat ja tuki monelle taustakuvalle per elementti. Sillä saa jo aika paljon aikaiseksi.