Support » Lisäosat ja muokkaukset » Koko sivuston levyinen header-kuva

  • Hei taas!
    Pommitan nyt kysymyksilläni. Käytän lapsiteemaa Thematicista ja haluan nyt saada yläosaan värillisen alueen, joka jatkuu aina selainikkunan reunoihin asti riippumatta sen leveydestä.
    Nyt minulla on alla oleva 940 leveä yläbanneri käytössä:
    }
    #blog-title a {
    background:url(images/Ylabanneri_kaari_940.jpg) no-repeat top center;
    display:block;
    text-indent:-9000px;
    width: 940px;
    height: 137px;
    }

    Kuinka toimin, jos ylläoleva kuva jää paikoilleen mutta sen sivuilla näkyy 1×137 px kokoiset liukuvärikuvat. Mikä on oikea termi tällaiselle bannerille?

    Kiitos taas : )

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • Moderator Sami Keijonen

    (@samikeijonen)

    Hei. Linkki sivuille auttaisi. Onko bannerin korkeus kiinteä 137px? Yksi mahdollisuus olisi laittaa haluamasi taustakuva body-tagiin (tai page wrapperiin tai vastaavaan) siten, että se tulisi tasan tarkkaan bannerin reunoille. Mutta hankala sanoa ennen kuin näkee itse sivut.

    Thread Starter Heluna

    (@heluna)

    Moi, tässä linkki.
    http://217.149.57.112/pressline

    Kaikki sivut ovat staattisia ja vielä erittäin keskeneräiset. Käytän firebugia apuna.
    Vielä kiinnostaa tietää, kuinka saada koko tausta reunoille ja alas värilliseksi + header niinkuin ensimmäisessä viestissä toivoisin. Main-alue jäisi siis valkoiseksi.
    Entä kuinka tekisin kapean varjostuksen main-alueen reunalle?

    Paljon kysymyksiä… Tämä foorumi on ollut isona apuna minulle!

    Moderator Sami Keijonen

    (@samikeijonen)

    Ihan ensimmäiseksi katso sivun html-rakennetta. Siellä on divit

    wrapper
    header
    main
    footer

    Jos haluat vaihtaa koko sivun taustaväriä, niin se onnistuu käyttämällä body-tagia tai wrapper-tagia. Laita kaikki muutokset/lisäykset lapsiteeman style.css tiedostoon. Esim.

    #wrapper {
    background: #ccc;
    }

    Headerin taustaväriä vaihdettaisiin samalla tavalla.

    #header {
    background: #ddd;
    }

    Tämä peittää kylläkin koko sivun yläosan, joten jos haluat taustavärin vain bannerin reunoille, niin joudut laittamaan täsmälleen sopivan kokoisen taustakuvan body tai wrapper-tagiin, joka toistuu x-suunnassa.

    Main alue saadaan valkoiseksi laittamalla tyylitiedostoon

    #main{
    background: #fff;
    }

    Varjostuksen voi tehdä joko css3 määreillä (ei toimi vanhoissa selaimissa) tai taustakuvalla, joka on täsmälleen yhtä leveä kuin main-alue.

    http://css-tricks.com/snippets/css/css-box-shadow/

    Nämä ovat vain suuntaa antavia ohjeita. Käytännössä joudut itse kokeilemaan ja testaamaan mikä toimii parhaiten. Ja css taitoja se eniten vaatii.

    Thread Starter Heluna

    (@heluna)

    Kiitos vastauksista! Taidan toteuttaa sen varjostuksen kuvana.

    En ymmärrä mihin esim. alla oleva css3-määre laitettaisiin:
    .one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    }

    Moderator Sami Keijonen

    (@samikeijonen)

    Esim.

    .hentry {
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    }

    En kylläkään ole ihan varma mihin varjostuksen haluat.

Esillä 5 vastausta, 1 - 5 (kaikkiaan 5)
  • The topic ‘Koko sivuston levyinen header-kuva’ is closed to new replies.