7 svar · 794 visningar · startad av bassebhu
Hej alla glada!
Har fått en design av en polare som jag ska splitta upp och göra en site av. Hur tycker ni att jag ska dela upp den?
Trädet tänkte jag ska vara top-centrerad bakgrundsbild och den gula boxen ska kunna anpassas i höjdled. Jag tänker mig att boxen har en fast position i förhållande till bakgrunden, men om man ändrar fönsterstorlek så vill jag inte få horisontell scroll.
Kruxet är däremot att jag vill att den gula stripan till vänster ska gå ut så långt det går till vänster och den svarta streckade linjen ska kunna gå från topp till botten. Jag tänker mig det gula som transparent png-24 så jag har en del problem att lösa.
Förslag bild bildsplit och divning? Tack!
edit/ för att förtydliga med den gula stripan så menar jag att jag vill att dennes bredd ska kunna kapas beroende på fönsterstorlek. Minskar man fönstret så ska mindre av den synas. Som en div med "rightad" bakgrundsbild. Är det ens möjligt?
Det är väl inte så svårt att lösa? centrera ditt content och sen ha en absolut positionerad div inne i det centrerade innehållet med en absolut positionering relative.
det svarta ringarna få du nog lösa med en större bakgrund, eller med javascript för att sätta dess höjd lika hög som den högsta elementet (menyn eller content).
hehe, jo jag tycker att det är lite lurigt. Orkar du rita lite på den hur du menar att jag ska dela upp bilden? ;) :f
ta så mycket gult du kan + det svarta och ha det som en bakgrund för din main content(det är väl ändå där mest innehåll kommer finnas, altenativt struntar i den som bakgrund och ha en border-right: dotted på content-wrappen (?). I så fall behöver du 3 bakgrunder för det gula: den gula, den vänstra gula kanten och botten i höger hörn. men jag hade nog funderat på om det är värt 3 anrop för att hämta 3 bilder för att få den effekten...
Åhå, det var ju faktiskt inte supersvårt. Gjorde som du sa. Tänkte att om jag relar bort stripen till vänster så får jag horisontal scroll, men det fick jag inte. I alla fall inte i de mac-läsare jag har testat hittills.
Men däremot så måste jag lura ut hur jag får menyn och content i samma höjd. Det är väl det som brukar kallas faux-columns eller nåt sånt? #main innehåller #content och #nav som är floatade left båda två. Jag hade ju kunnat sätta bakgrund på hela #main, men eftersom det där transparenta hörnet ska vara där nere så går ju inte det. I #nav så har jag nu #menu och #corner där jag har satt samma bakgrund i #menu som i #content och i #corner har jag en egen bild. Hur får jag nu #corner att hamna i botten av #main/#nav samt #menu att ta upp resterande höjdplats?
:e
edit/ luddigt beskrivet, men kolla på bifogad bild. Allt funkar förutom att #menu inte går hela vägen ner och #corner inte är längst ner.
det är #content vs (#menu - #corner) du är intresserad över att veta vilken av som har det högsta värdet, detta kan du inte lösa med bara css (du kan med display table-cell förmodligen men det stödet är inte så stort). finns en hel del javascripts plugin för att ta reda på höjden av element och sätta kollektionen till samma höjd.
Hur får jag nu #corner att hamna i botten av #main/#nav samt #menu att ta upp resterande höjdplats?
Tänk enkelt. Skit i #corner. Behövs inte. Gör en transparent gul png med rätt bredd som bakgrund till både content och nav och klipp av nedre högra hörnet. Men gör bilden hög som fan, så hög att ingen någonsin kommer att behöva högre bakgrund. Typ 2.000px. Lägg in den som bakgrund, align bottom right no-repeat.
Tänk enkelt. Skit i #corner. Behövs inte. Gör en transparent gul png med rätt bredd som bakgrund till både content och nav och klipp av nedre högra hörnet. Men gör bilden hög som fan, så hög att ingen någonsin kommer att behöva högre bakgrund. Typ 2.000px. Lägg in den som bakgrund, align bottom right no-repeat.
Fett, så gör vi!
