2013-02-09 115 views
0
.page { 
background: none; 
width: 1000px; 
margin: 0 auto; 
text-align: left; 
padding: 0px 0px 0px 0px; 
} 

.header-container { 
background-image: url("http://patolino.com/img/fundo-top.jpg"); 
width: 100%; 
height: 133px; 
} 

.header{ 
padding:0px 0px 0px 0px; 
width: 1000px; 
position: fixed; 
} 

.header .logo { float:left; 
margin-top:15px; 
width: 30%; 
} 

.header h1.logo { 
float:left; 
width: 30%; 
padding: 0; 
} 

.nav-container {background: url(http://www.patolino.com/img/bg-menu.jpg) repeat; 
width: 1000px; 
height: 43px; 
left: 0; 
padding: 0px 0px 0px 0px; 
} 

.header .welcome-msg { 
} 

.header .form-search { 
top-margin: 15px; 
} 

.header .links { 
} 

div.slidercontrolwr { 
top: 30px; 
} 

.quick-access{ 
height: 133px; 
} 

http://imageshack.us/photo/my-images/46/screenshot20130209at818.png/ http://img145.imageshack.us/img145/3022/screenshot20130209at817.pngCSS擴展背景

但基本上:

<div class="page"> 
     <div class="header-container"> 
    <div class="header"> 
       <h1 class="logo"><strong>Carol Baby</strong><a href="http://carolbaby.com.br/" title="Carol Baby" class="logo"><img src="http://carolbaby.com.br/skin/frontend/base/default/logo.png" alt="Carol Baby"></a></h1> 
       <div class="quick-access"> 
      <p class="welcome-msg">Seja bem vindo! </p> 
      <form id="search_mini_form" action="http://carolbaby.com.br/catalogsearch/result/" method="get"> 
    <div class="form-search"> 
     <label for="search">Buscar:</label> 
     <input id="search" type="text" name="q" value="" class="input-text" autocomplete="off"> 
     <button type="submit" title="Buscar" class="button"><span><span>Buscar</span></span></button> 
     <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div> 
     <script type="text/javascript"> 
     //<![CDATA[ 
      var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Procure na loja inteira aqui...'); 
      searchForm.initAutocomplete('http://carolbaby.com.br/catalogsearch/ajax/suggest/', 'search_autocomplete'); 
     //]]> 
     </script> 
    </div> 
</form> 
<ul class="links"> 
         <li class="first"><a href="https://carolbaby.lojablindada.com/customer/account/?SID=utnm23in5j98qahq3gmtmaiem7" title="Minha Conta">Minha Conta</a></li> 
           <li><a href="https://carolbaby.lojablindada.com/wishlist/?SID=utnm23in5j98qahq3gmtmaiem7" title="Minha Lista de Desejos">Minha Lista de Desejos</a></li> 
           <li><a href="http://carolbaby.com.br/checkout/cart/" title="Meu Carrinho" class="top-link-cart">Meu Carrinho</a></li> 
           <li><a href="http://carolbaby.com.br/checkout/" title="Fechar Compra" class="top-link-checkout">Fechar Compra</a></li> 
           <li class=" last"><a href="https://carolbaby.lojablindada.com/customer/account/login/?SID=utnm23in5j98qahq3gmtmaiem7" title="Entrar">Entrar</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div class="nav-container"> 
    <ul id="nav"> 
     <li class="level0 nav-1 level-top first"> 
<a href="http://carolbaby.com.br/bercos.html" class="level-top"> 
<span>Berços</span> 
</a> 
</li><li class="level0 nav-2 level-top"> 
<a href="http://carolbaby.com.br/roupeiros.html" class="level-top"> 
<span>Roupeiros</span> 
</a> 
</li><li class="level0 nav-3 level-top"> 
<a href="http://carolbaby.com.br/comodas.html" class="level-top"> 
<span>Cômodas</span> 
</a> 
</li><li class="level0 nav-4 level-top"> 
<a href="http://carolbaby.com.br/linhas-completas.html" class="level-top"> 
<span>Dormitórios Completos</span> 
</a> 
</li><li class="level0 nav-5 level-top last"> 
<a href="http://carolbaby.com.br/kits-para-bercos.html" class="level-top"> 
<span>Kits para Berços</span> 
</a> 
</li> </ul> 
</div> 

我需要什麼:

擴展的背景豐杜-top.jpg和延長BG-menu.jpg到在樣本圖像[2]邊框中出現的白色邊(左側和右側)

回答

1

我用CSS解決了它,除了關注div和sub divs編碼外,還處理相對位置和絕對位置。