Hej Alle
Jeg har en lille udfordring, som jeg simpelthen ikke kan hitte ud af
Jeg har en side, som består af en gradient baggrund. Denne går fra hvid til grå. Under denne kommer en anden baggrund, som er hvid igen.
Indholdet i gradienten svinger i height. Men da jeg har brugt et baggrundsbillede, vil dette jo gentage sig. Jeg vil derfor gerne have at baggrunden blot forbliver grå indtil bundindholdet kommer
Mit html ser sådan ud
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <link href="underside2-css.css" rel="stylesheet" type="text/css" />
- </head>
-
- <body>
- <div id="wrapper">
- <div id="top-content">Til top indhold
- <div id="left-content">venstre indhold
- <div id="logo">Logo</div>
- </div>
- <div id="right-content">Højre indhold
- <div id="search">Søgning</div>
- <div id="flag">Flag</div>
- <div id="telefon">Telefon</div>
- <div id="menu">Menuen</div>
- </div>
- </div>
- <div id="topbillede">Topbillede</div>
- <div id="breadcrump">Brødkrumme</div>
- <div class="content">content
- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- hhhhhhh
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- <br /><br /><br /><br /><br /><br /><br />
- v
-
-
-
-
-
-
-
-
- </div>
- <!--<div id="bundwrapper"></div>-->
-
-
- </div>
- <div id="testfooter">
- <div id="content">Footer content</div>
- </div>
- </body>
- </html>
og mit css
- @charset "utf-8";
- /* CSS Document */
- body {margin: 0; padding: 0; background-image: url(images/forrside-bg.jpg);
- background-repeat:repeat-x; }
- #wrapper {margin:0 auto; width: 960px; left: 320px; background-color:#CCC; }
- #top-content {width: 960px; height: 123px; background-color: #333; }
- #left-content {width: 247px; height: 123px; float: left; background-color:#00C; position: absolute;top:0; }
- #right-content {width: 712px; height: 123px; float: right; background-color:#569; /*position: absolute;*/ top:0; }
- #logo {/*position: absolute;*/ width: 182px; height:64px; top: 45px; background-color: #F00; z-index:200;}
- #search {/*position: absolute;*/ float:right; height: 15px; width: 25px; top: 11px; background-color:#0F3; left: 860px;}
- #flag {/*position: absolute;*/ float:right; height: 15px; width: 25px; top: 47px; background-color:#656854; left: 860px;}
- #telefon {/*position: absolute;*/ float:left; height: 30px; width: 25px; top: 45px; background-color:#kjkhgf; left: 251px;}
- #menu {/*position: absolute;*/ float:right; height: 49px; width: 709px; top: 89px; background-color: #F00; left: 251px; z-index:200;}
- #topbillede {/*position: absolute;*/ float:right; height: 135px; width: 960px; top: 123px; background-color: #000; left: 320px;}
- #breadcrump {/*position: absolute;*/ float:left; height: 25px; width: 960px; top: 258px; background-color: #fff; left: 320px;}
- .content {/*position: absolute;*/ float:left; height: auto; width: 960px; top: 281px; background-color: #CCC; left: 320px; -moz-border-radius-bottomright: 15px;
- border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px;
- border-bottom-left-radius: 15px; -moz-border-radius-topright: 15px;
- border-top-right-radius: 15px; -moz-border-radius-topleft: 15px;
- border-top-left-radius: 15px; }
- #bundwrapper {/*position: absolute;*/ margin:0 auto; width: 100%; background:#000; top: inherit }
-
-
-
- /* Tilføjet af Martin */
-
-
- #testfooter {
- height:20px;
- width:100%;
- margin:0 auto;
- float:left;
- background-color:#333;
- /*position:absolute;*/
- }
-
- #testfooter #content {
- height:100%;
- width:960px;
- margin:0 auto;
-
- background-color:#FFF;
- /*position:absolute;*/
- }