Avrundet body med css

Avrundet body med css

Innleggav espenhogbakk » tor 15.05.2008 18:28

Jeg har et lite problem, jeg prøver og finne ut av hvordan man på best mulig måte kan legge inn et bilde i hvert hjørne av en nettside. Det blir nesten som de vanlige runde hjørne løsningene, men ikke i en liten boks, men i "body".

Ideen er at det skal være 4 bilder, med en grunge effekt i hvert hjørne. Top-left og top-right skal ytterst i bildet hele tiden og flytte seg hvis brukeren endrer størrelse på vinduet i bredden.

bottom-left og bottom-right skal ligge nederst, men her er det litt tricky, for de skal ligge nederst i nettleservinduet hvis innholdet på siden ikke er høyere enn nettleservinduet. Altså hvis det ikke er noen scrollbar skal de ligge klistret i de nederste hjørnene. Hvis det er scrollbar så skal de ligge nederst på siden, altså følge innholdet.

Regner med at jeg må lage 4 diver som jeg legger css koden på, og det er ikke noe problem, men jeg klarer ikke og finne en løsning som fungerer tilfredstillende, og i hvertfall som fungerer i IE6...

Noen som har en ide?

Bilde
medlem i 223 måneder
 

Re: Avrundet body med css

Innleggav martin » tor 15.05.2008 20:54

Det enkleste tror jeg ville være å benytte en såkalt "sticky footer"-teknikk, i kombinasjon med en av de vanlige teknikkene for runde hjørner.

Et kjapt eksempel her:

Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>XHTML Document</title>
      <style type="text/css">
         * {
             margin: 0;
         }
         html, body {
             height: 100%;
         }
         .wrapper {
             min-height: 100%;
             height: auto !important;
             height: 100%;
             width: 100%;
             background: #eee url(images/top-left.png) no-repeat top left;
             margin: 0 0 -50px;
         }
         .corner {
            float: right;
            height: 50px;
            width: 50px;
         }
         .wrapper .corner {
            background: url(images/top-right.png) no-repeat top right;
         }
         .footer, .push {
             height: 50px;
         }
         .footer {
            background: url(images/bottom-left.png) no-repeat bottom left;
         }
         .footer .corner {
            background: url(images/bottom-right.png) no-repeat bottom right;
         }
         
         .container {
            position: relative;
            margin: 0 auto -50px;
            height: 600px;
            width: 800px;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <div class="corner"></div>
         <div class="container">
            <!-- PUTT INNHOLD HER -->
         </div>
         <div class="push"></div>
      </div>
      <div class="footer">
         <div class="corner"></div>
      </div>
   </body>
</html>

Sticky footer teknikken har jeg hentet herfra:
http://ryanfait.com/resources/footer-st ... m-of-page/

Jeg har ikke brukt mye tid på eksempelet over, så det er viktig at du går gjennom koden og finner din egen løsning som du kan være komfortabel med.

Administrator
Brukerens avatar
medlem i 249 måneder
 

Re: Avrundet body med css

Innleggav espenhogbakk » fre 16.05.2008 0:12

Takk for tipset! Det gjorde susen! Da var de to nederste hjørnene på plass, og det fungerer ie IE6, fantastisk.

Da er det bare og finne en god løsning på de to øverste som fungerer med resten av layouten, burde ikke være for vanskelig...

Tusen takk.
medlem i 223 måneder
 

Re: Avrundet body med css

Innleggav martin » fre 16.05.2008 12:32

Godt at teknikken fungerte som ønsket. Bare spør hvis det er mer du lurer på ;)

Administrator
Brukerens avatar
medlem i 249 måneder
 


Returner til CSS



Hvem er i Forumene

Registrerte brukere: Ingen registrerte brukere