Keskustelu: Nettisivujen teko: Sarakkeiden (divien) taustavärit

Uusi, yksinkertaisempi kysymys. Minulla ei ole sellaista koodia, jolla kolme vierekkäistä divia solahtaa yhdeksi, kun tila pienenee. Yritän tällaisella:

http://www.tunturisusi.com/testi/

Tässä harjoitelmassa on kolme diviä ja solahdus yhdeksi tapahtuu, mutta:

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

- miten saan erilaiset taustavärit kuhunkin diviin? (Yksinkertainen kysymys, mutta jostakin syystä en tässä osaa)

Tätä hallinnoi tyylitiedosto:

http://www.tunturisusi.com/testi/testaus.css

Saat eri värit näin:

.col:first-of-type{
    background: #fff;
}
.col:nth-of-type(2){
    background: #ddd;
}
.col:last-of-type{
    background: #bbb;
}

http://www.tunturisusi.com/testi/

Kiitokset. Pääsin tavallaan samaan asti itse eilen, eli laitoin style -koodilla suoraan html-sivulle värit, mutta siinä oli sama ongelma kuin sinun koodillasi: väri muuttuu vain tekstin takana - kun sen pitäisi muuttua koko "kaistassa" eli columnissa tai divissä, mikä tämä nyt on.

Miten tuon värin saisi koko alalle kuhunkin osioon? ;)

Väri tulee kyllä koko Div-elementtiin. Jos haluat värin myös Div-elementtien väliin, muuta margin-määritys padding-määritykseksi:

.col{
    margin: 1% 0 1% 1.6%;
}

---->

.col{
    padding: 1% 0 1% 1.1%;
}

Karkeasti ilmaistuna: margin jättää tyhjää tilaa elementin ulkopuolelle, kun taas padding elementin sisäpuolelle.

http://www.tunturisusi.com/testi/

Paranee ;)

Siis jos toimin oikein, niin liitin antamistasi koodeista alemman tyylitiedostoon. Muutin siellä olleen padding-lukeman 20 nollaksi.

Olisi muuten jo melko hyvä, mutta kun kuva-ala pienenee, niin tekstin oikeassa reunassa pitäisi olla hieman tilaa, sillä teksti katoaa laidan taakse. Myös sen jälkeen, kun divit ovat asettuneet päällekkäin, niiden väliin ilmaantuu ylimääräinen rako.

Mutta ei Roomaakaan päivässä rakennettu. ;)

Lisäys:

http://www.tunturisusi.com/testi/

Laitoin kokonaan uudet koodit, tässä ovat paddingit kohdallaan ja toimii hyvin. Ainut puute on se alkuperäinen, eli tässäkään en saa eri värejä, mutta jos en saa, voin selvitä yhdellä värillä. ;)

Ja laitan tähän nämä kooditkin vielä, jotka löytyivät netistä, CSS:

.container {
    font-size: 0; /*fix white space*/
}
.container > div {
    font-size: 17px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    border: 0px solid red;
    box-sizing: border-box;
    text-align: left;
	padding: 20px;
}
@media (max-width: 768px) { /*breakpoint*/
    .container > div {
        display: block;
        width: 100%;
    }
}
	margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
	border: solid 1px #ccc;
}

HTML, ja värin voi lisätä yksinkertaisesti style-koodilla:

<div class="container">
    <div class="column-left"style="background-color: #fff2e6;">Column left</div>
    <div class="column-center">Column center</div>
    <div class="column-right">Column right</div>
</div>

Mod. lisäsi kooditagit!

404-virhe tulee, kun menee kurkaamaan testi sivua. Lisäksi tuo linkittämäsi CSS-rimpsu on rikki, siinä on liikaa lopettavia sulkuja, yms.

Tuolla HTML:llä voit tehdä määritykset CSS-tiedostoon näin:

.column-left{
    background:#fff;
}
.column-center{
    background:#eee;
}
.column-right{
    background:#ddd;
}

Sori, sotkin niiin tuon testi-sivun, että poistin sen, koska kadotin punaisen langan - mutta aikaansaamani kolmen divin systeemi on tämän sivun:

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

alareunassa, se ikäänkuin footer, jonka keskellä on linkki ja laidoilla aforismit.

Käytän tuota myös muualla sivuillani, siellä missä tarvitsen kolme kaistaa.

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

Uusi kysymys: Miten saan tuon footerin kiinni alareunaan?

http://www.tunturisusi.com/tunturisusi/assets/css/main.css

Olen käynyt läpi tuon main.css kaksi kertaa, se on kilometrin mittainen, ja en löytänyt. (Tosin löysin kuitenkin eräitä valaisevia kohtia ja moniakin).

Vai onko tuo alareuna määritetty jossakin muualla?

Dartvaneri, kiitos vastauksistasi.

Suosittelen selaimen kehitystyökalujen käyttöä. Esimerkiksi Chromiumin työkaluilla heti näkee, että alapalkki on tyypiltään table ja sisältää 2em:n verran alamarginaalia. Ongelma ratkeaa helpoiten sillä, että alapalkista ottaa koko turhan taulukon pois eli jättää vain sen divin, jossa varsinainen sisältö on. Diville voi laittaa sopivan taustakuvan CSS:llä.

CSS:ää on monta tuhatta riviä, ja sivusto ei todellakaan näytä niin monimutkaiselta. Olisiko aika joskus aloittaa puhtaalta pöydältä?

Voitko ystävällisesti tehdä uuden aiheen selvästi uudelle kysymykselle ja jättää nuo ihan tarpeettomat viivat viesteistä pois?