Hrm.. Ha de tre lagren i ett annat lager, som du har bakgrunden i? :)
..eller missförstår jag, som vanligt? ;)
HTML & CSSur HTML, XHTML & CSS
6 svar · 389 visningar · startad av Karlsson
Ohoj seglarvänner!
Skulle vilja använda mig av en tre-kolumnslayout, left, middle och right där left och right skulle ha en blåaktig bakgrund. Om jag då lägger bakgrunden i body-taggen skulle jag ju kunna ge illusionen av att divarna sträcker sig ända ner oavsett mängden innehåll. MEN... Detta kommer ju inte att fungera om jag vill ha en flytande layout med icke-fixerade vidder av divarna. Hade tänkt mig en vidd på hela rasket satt i em med en max-vidd också satt i em och därimellan vidderna satta i %.
Nån som har nån fiffig lösning på problemet? Känns som det kan bli riktigt riktigt jobbigt det här... Om man inte skulle kunna ha två olika bakgrunder i body.
Hrm.. Ha de tre lagren i ett annat lager, som du har bakgrunden i? :)
..eller missförstår jag, som vanligt? ;)
Ja, problemet finns kvar om man gör så.
Du kan applicera en bakgrund för HTML och en annan för BODY.
Men hur får jag det att fungera rent praktiskt utan att bli sinnesrubbad???
Så här har jag provat
body {
background: #d9e8f4 url(bilder/bgr/body_bgr_vit.png) repeat-y 7.5em top;
}
html {
background: url(bilder/bgr/right_bgr.png) repeat-y 39.5em top;
}
bakgrunden i body är en vanlig vit rektangel, det funkar perfekt, den hamnar precis där jag vill ha den. Bakgrunden i html är en blå sak, samma färg som bakgrundsfärgen i body-taggen.
Även om det är tillåtet att blanda värden med nyckelord för bakgrundsposition så är det riskfyllt eftersom vissa webbläsare har problem med det. Det är säkrare att bara köra med värden isf. :)
Dessutom... du får nog ange bakgrundsfärgen för HTML istället för BODY, annars så täcker ju bakgrundsfärgen för BODY bakgrundsbilden för HTML, vilket kanske inte var meningen.
body {
background: url(bilder/bgr/body_bgr_vit.png) repeat-y 7.5em 0;
}
html {
background: #d9e8f4 url(bilder/bgr/right_bgr.png) repeat-y 39.5em 0;
}
Liquid faux-columns
http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58