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!
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;
}
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.