Ga naar inhoud

probleem met achtergrondkleuren

Elsnorry

Door Elsnorry
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

Elsnorry Groentje

Elsnorry

Geplaatst:
Geplaatst:

Als ik mn browserscherm kleiner maak en dan naar rechts scroll dan scaled de achtergrond kleur van de balk boven de header verkeerd, bij de footer is dit ook het geval.

Ik krijg het probleem niet opgelost, iemand die me kan helpen aub?


<!DOCTYPE html><html dir="ltr" lang="en"><head><meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head><body><div id="tlc">    <div id="tlc-wrapper">        <div class="lks"><img src="catalog/view/theme/default/image/home.png" alt="Home" /><a href="gcommon/home">gggg</a><a href="gaccount/wishlist" id="wishlist-total">nhnhnhnnh hh</a><a href="gaccount/account">ggg ghghhgg</a><a href="gcheckout/cart">jgkkglgggt</a><a href="gcheckout/checkout">dsgfii</a></div>        <div id="welcome"> <a href="gaccount/jjyjykr">fqdfff</a> hh <a href="gaccount/register">jhjhjhjhj h hhgghgh</a>.                    </div>    </div></div><div id="container"><div id="header">    <div id="logo"><a href="gcommon/home"><img src="g/upload/image/data/ghg.png" title="z" alt="z" /></a></div>    
 <div id="cart">  <div class="heading">    <h4>hhhhhhhhhh</h4>    <a><span id="cart-total">yyyyt ttt</span></a></div>  <div class="content">        <div class="empty">hththt tttt yyyyy!</div>      </div></div>  <div id="search">    <div class="button-search"><span class="bst">Search</span></div>        <input type="text" name="filter_name" onclick="this.value = '';" onkeydown="this.style.color = '#525252';" />      </div></div><div class="ribbon"><div class="ribbon-content"><div id="menu">  <ul>        <li><a href="gproduct/category&path=20">rerre</a>            <div>                <ul>                                                                    </ul>              </div>          </li>        <li><a href="gproduct/category&path=66">jgjgjgjgjg</a>          </li>        <li><a href="gproduct/category&path=18">,,g,g,g,g,</a>            <div>                <ul>                                                                    </ul>              </div>          </li>        <li><a href="gproduct/category&path=25">eeererr</a>          </li>        <li><a href="gproduct/category&path=34">ggfgffgg</a>            <div>                <ul>                                                             </ul>                <ul>                                                                  </ul>                <ul>                                                                    </ul>              </div>          </li>      </ul></div></div></div> <div id="content"><div class="slideshow">  <div id="slideshow0" class="nivoSlider" style="width: 980px; height: 400px;">            <a href="index.php?route=product/product&path=57&product_id=49"><img src="g/upload/image/cache/data/b" alt="" /></a>                <img src="g/upload/image/cache/data/bpg" alt="" />                <img src="g/upload/image/cache/data/pg" alt="" />                <img src="g/upload/image/cache/data/g" alt="" />          </div></div><script type="text/javascript"><!--$(document).ready(function() {    $('#slideshow0').nivoSlider({        effect: 'fade',        pauseTime: 3000    });});--></script><div class="featured">  <div class="featured-heading"></div>  <div class="featured-content">    <div class="featured-box">            <div>                <div class="image"><a href="gproduct/product&product_id=43"><img src="g/upload/image/cache/data/demo/o5.jpg" alt="" /></a></div>                <div class="name"><a href="gproduct/product&product_id=43"></a></div>                <div class="price">                               </div>              </div>            <div>                <div class="image"><a href="gproduct/product&product_id=40"><img src="g/upload/image/cache/data/demo/i485.jpg" alt="e" /></a></div>                <div class="name"><a href="gproduct/product&product_id=40"></a></div>                <div class="price">                                     </div>              </div>            <div>                <div class="image"><a href="gproduct/product&product_id=42"><img src="g/upload/image/cache/data/demo/ci.jpg" alt="gggf " /></a></div>                <div class="name"><a href="gproduct/product&product_id=42"></a></div>                <div class="price">                    <span class="price-old"></span> <span class="price-new"></span>                  </div>              </div>            <div>                <div class="image"><a href="gproduct/product&product_id=49"><img src="g/upload/image/cache/data/demo/s5.jpg" alt=" " /></a></div>                <div class="name"><a href="gproduct/product&product_id=49"></a></div>                <div class="price">                                    </div>              </div>            <div>                <div class="image"><a href="gproduct/product&product_id=46"><img src="g/upload/image/cache/data/demo/spg" alt="O" /></a></div>                <div class="name"><a href="gproduct/product&product_id=46"></a></div>                <div class="price">                                    </div>              </div>            <div>                <div class="image"><a href="gproduct/product&product_id=47"><img src="g/upload/image/cache/data/demo/5.jpg" alt="H65" /></a></div>                <div class="name"><a href="gproduct/product&product_id=47"></a></div>                <div class="price">                                    </div>              </div>          </div>  </div></div><h1 style="display: none;">jjgjgjgjjgjgjggjgjg/h1><div id="carousel0">  <ul class="jcarousel-skin">        <li><a href="gg5"><img src="g/upload/image/cache/data/demo/o-120x90.png" alt="" title="" /></a></li>        <li><a href="gg10"><img src="g/upload/image/cache/data/demo/sp-120x90.png" alt="" title="y" /></a></li>        <li><a href="gg7"><img src="g/upload/image/cache/data/demo/.png" alt="" title="s" /></a></li>        <li><a href="gg8"><img src="g/upload/image/cache/data/demo/0.png" alt="" title="n" /></a></li>        <li><a href="gg9"><img src="g/upload/image/cache/data/demo/90.png" alt=" title=g" /></a></li>        <li><a href="gg6"><img src="g/upload/image/cache/data/demo/p-120x90.png" alt="y" title="y" /></a></li>      </ul></div><script type="text/javascript"><!--$('#carousel0 ul').jcarousel({    vertical: false,    visible: 5,    scroll: 3});//--></script></div></div><div id="footer"><div id="info">    <div class="column">    <h3>bbbbbbb</h3>    <ul>            <li><a href="ginformation/information&information_id=4">ggg</a></li>            <li><a href="ginformation/information&information_id=6">ggggggggggggg</a></li>            <li><a href="ginformation/information&information_id=5">bbbbbbbbbbbbbb/a></li>          </ul>  </div>    <div class="column">    <h3>bbbbb</h3>    <ul>      <li><a href="ginformation/contact">ffffffff</a></li>      <li><a href="gaccount/return/insert">gggg</a></li>      <li><a href="ginformation/sitemap">ggggggg</a></li>    </ul>  </div>  <div class="column">    <h3>sgggg</h3>    <ul>      <li><a href="gproduct/manufacturer">ggg</a></li>      <li><a href="gaccount/voucher">ggggg</a></li>      <li><a href="gaffiliate/account">gggg</a></li>      <li><a href="gproduct/special">ggggggg</a></li>    </ul>  </div>  <div class="column">    <h3>gggggt</h3>    <ul>      <li><a href="gaccount/account">gggg</a></li>      <li><a href="gaccount/order">ggggg</a></li>      <li><a href="gaccount">gggg</a></li>      <li><a href="gaccount/>gggggg</a></li>    </ul>  </div>  <div class="column">    <h3 class="h3i">jgjgjgj</h3>    <ul class="nbul">      <li>123-456-7890</li>      <li>fffddfore</li>    </ul>      </div>


</div></div></body></html>

css:

html {
   overflow: -moz-scrollbars-vertical;
   margin: 0;
   padding: 0;
}
body {
   background-color: #FFF;
   color: #555;
   font-family: Verdana, Helvetica, sans-serif;
   margin: 0px;
   padding: 0px;
}
body, td, th, a {
   font-size: 10px;
}
input, textarea, select {
   font-size: 11px;
}
h1, .welcome {
   color: #525252;
       margin-top:0px;
   margin-bottom: 10px;
   margin-left: 10px;
   padding-top: 10px;
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;

}
h2 {
   color: #525252;
   font-size: 10px;
   font-weight: bold;
   text-transform: uppercase;
   margin-top: 10px;
   margin-bottom: 10px;
}
p {
   margin-top: 0px;
   margin-bottom: 20px;
   line-height: 15px;
}
a, a:visited, a b {
   color: #636363;
   text-decoration: underline;
   cursor: pointer;
}
a:hover {
   text-decoration: none;
}
a img {
   border: none;
}




/* Layout
------------------------------------------------------------*/


#tlc {
   height: 27px;
    background: #556469;

}

#tlc #tlc-wrapper {
  margin: 0 auto;
  width: 980px;
}
#tlc-wrapper .lks {
   position: absolute;
   top: 7px;
   font-size: 10px;
   padding-right: 10px;
}
#tlc-wrapper .lks a {
   float: left;
   display: block;
   padding: 0 5px 0 0;
   color: #F4F9F7;
   text-decoration: none;
   font-size: 10px;
   font-weight: bold;
   -webkit-text-shadow: 0 1px 1px #3D5F83;
      -moz-text-shadow: 0 1px 1px #3D5F83;
           text-shadow: 0 1px 1px #3D5F83;
}
#tlc-wrapper .lks a:hover {
   color: orange;                                       
}
#tlc-wrapper .lks a + a {
   margin-left: 8px;
}
#tlc-wrapper .lks img {
   float: left;
   margin-right: 10px;
}
#tlc-wrapper #welcome {
   position: relative;
   top: 7px;
   float: right;
   z-index: 5;
   color: #F4F9F7;
   font-size: 10px;
   font-weight: bold;
   -webkit-text-shadow: 0 1px 1px #3D5F83;
      -moz-text-shadow: 0 1px 1px #3D5F83;
           text-shadow: 0 1px 1px #3D5F83;
}
#tlc-wrapper #welcome a {
   font-size: 10px;
   font-weight: bold;
   color: orange;                    
   text-decoration: none;
}
#tlc-wrapper #welcome a:hover {
   text-decoration: underline;
}
#container {
   width: 980px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
       background-color: grey;                                


}


#content {
   min-height: 687px;                                  
   margin-bottom: 0px;                                                
}




/* Header
------------------------------------------------------------*/   


#header {
   height: 112px;
   margin-bottom: 0px;                                           
   padding-bottom: 4px;
   position: relative;
   z-index: 99;
       background-color: yellow;
}
#header #logo {
   position: absolute;
   top: 2px;
   left: 40px;
}








/* Header Search
------------------------------------------------------------*/


#header #search {
   position: absolute;
   top: 118px;
   right: 30px;
   width: 298px;
   z-index: 15;

}
#header .button-search {
   position: absolute;
   right:-10px;
   width: 69px;
   height: 27px;
   margin-top: 2px;
   margin-bottom: 4px;
   margin-right: 10px;
   cursor: pointer;
   background: #E2E2E2 url('../image/button-search.png') 90% center no-repeat;
   border: 1px solid #D2D2D2;
   -webkit-border-radius: 3px 3px 3px 3px;
      -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
           border-radius: 3px 3px 3px 3px;
   -webkit-box-shadow: inset 0 2px 0 -1px #EDEDED;
      -moz-box-shadow: inset 0 2px 0 -1px #EDEDED;
           box-shadow: inset 0 2px 0 -1px #EDEDED;
}
#header .bst {
   color: #626262;
   font-size: 10px;
   font-weight: bold;
   line-height: 27px;
   padding-left: 6px;
   -webkit-text-shadow: 0px -1px 0 #E6E6E6;
   -moz-text-shadow: 0px -1px 0 #E6E6E6;
   text-shadow: 0px -1px 0 #E6E6E6;
}
#header #search input {
   background: #FFF;
   padding: 1px 33px 1px 5px;
   width: 262px;
   height: 30px;
   font-size: 14px;
   -webkit-border-radius: 3px 3px 3px 3px;
      -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
           border-radius: 3px 3px 3px 3px;
   -webkit-box-shadow: inset 0px 2px 2px -2px #DEDEDE;
      -moz-box-shadow: inset 0px 2px 2px -2px #DEDEDE;
           box-shadow: inset 0px 4px 4px -4px #DEDEDE;
}
#header #search input:hover, #header #search input:focus {
   border-top: 1px solid #c2c2c2;
   border-left: 1px solid #c2c2c2;
   border-bottom: 1px solid #e1e1e1;
   border-right: 1px solid #e1e1e1;
}


/* Header Cart
------------------------------------------------------------*/


#header #cart {
   position: absolute;
   top: 28px;
   right: 15px;                              
   z-index: 16;       
}
#header #cart .heading {
   float: right;
   margin-right: 0px;
   padding-left: 50px;
   padding-right: 10px;
   padding-top: 8px;
   padding-bottom: 8px;
   background: #FCFCFC  
   position: relative;
   z-index: 1;

}
#header #cart .heading h4 {
   font-size: 10px;     
   font-weight: bold;
   color: #525252;
   text-transform: uppercase;
   margin-top: 0px;
   margin-bottom: 3px;
}
#header #cart .heading a {
   font-family: Georgia, serif;
   color: #626262;
   font-size: 12px;
   font-style: italic;
   text-decoration: none;
}




/* Ribbon
------------------------------------------------------------*/


.ribbon {
   position: relative;
}


.ribbon:before {
   left: -23px;
   border-right-width: 15px;
   border-left-color: transparent;
}
.ribbon:after {
   right: -23px;
   border-left-width: 15px;
   border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {

   position: absolute;
   display: block;
   border-style: solid;
   border-color: #4F6174 transparent transparent transparent;
   bottom: -10px;
}
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 10px 0 0 10px;
}
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 10px 10px 0 0;
}


/* Menu
------------------------------------------------------------*/


#menu {
   height: 37px;
   margin-bottom: 0px;              
   border-top: 1px solid #BF9DD6;
   border-bottom: 1px solid #BF9DD6;
   background: red;                                        

}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#menu > ul > li {
   position: relative;
   float: left;
   z-index: 20;
   padding: 6px 5px 0 0;
   border-right: 1px solid red;                  

}
#menu > ul > li:hover {
   background: green;                                
}
#menu > ul > li > a {
   font-size: 11px;
   font-weight: bold;
   color: #fff;
   line-height: 14px;
   text-transform: uppercase;
   text-decoration: none;
   display: block;
   padding: 6px 15px 6px 15px;
   margin-bottom: 5px;
   z-index: 6;
   position: relative;
   -webkit-text-shadow: 0 1px 1px #3D5F83;
      -moz-text-shadow: 0 1px 1px #3D5F83;
           text-shadow: 0 1px 1px #3D5F83;
}
#menu > ul > li:hover > a {
}
#menu > ul > li > div {
   display: none;
   background: blue;                            
   position: absolute;
   z-index: 5;
   border-left: 1px solid white;                 
   border-right: 1px solid white;
   border-bottom: 1px solid white;
}
#menu > ul > li:hover > div {
   display: table;
}
#menu > ul > li > div > ul {
   display: table-cell;
}
#menu > ul > li ul + ul {
   padding-left: 20px;
}
#menu > ul > li ul > li > a {
   text-decoration: none;
   padding: 4px;
   font-size: 10px;
   font-weight: bold;
   color: #fff;
   display: block;
   white-space: nowrap;
   min-width: 120px;
   -webkit-text-shadow: 0 1px 1px #3D5F83;
      -moz-text-shadow: 0 1px 1px #3D5F83;
           text-shadow: 0 1px 0 #5D8EC4;
   -webkit-transition: background .1s;
      -moz-transition: background .1s;
           transition: background .1s;
}
#menu > ul > li ul > li > a:hover {
   background: orange;                                  
}
#menu > ul > li > div > ul > li > a {
   color: #FFFFFF;
}










/* Footer
------------------------------------------------------------*/

#footer #info{
  margin: 0 auto;
  width: 980px;
}
#footer {
   clear: both;
   overflow: auto;
   min-height: 100px;
   padding: 40px 40px 20px 40px;
   border-top: 1px solid #B3B3B3;
   border-bottom: 1px solid #B3B3B3;
   background: red;

}
#footer h3 {
   font-size: 10px;
   text-transform: uppercase;
   color: #525252;
   margin-top: 0px;
   margin-bottom: 8px;
   -webkit-text-shadow: 1px 1px 0 #FBFBFB;
      -moz-text-shadow: 1px 1px 0 #FBFBFB;
           text-shadow: 1px 1px 0 #FBFBFB;
}
#footer .column {
   float: left;
   width: 20%;
   min-height: 100px;
}
#footer .column ul {
   margin-top: 0px;
   margin-left: 2px;
   padding-left: 12px;
   color: #525252;
}
#footer .column ul li {
   margin-bottom: 3px;
}
#footer .column a {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   text-decoration: none;
   color: #555;
   -webkit-text-shadow: 1px 1px 0 #FCFCFC;
      -moz-text-shadow: 1px 1px 0 #FCFCFC;
           text-shadow: 1px 1px 0 #FCFCFC;
}
#footer .column a:hover {
   text-decoration: underline;
}
#footer .h3i {
   margin-left: 14px;
}
#footer .nbul {
   list-style: none;
}

 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.