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.png

但基本上：

    <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>

我需要的：

将背景 fundo-top.jpg 和 bg-menu.jpg 扩展至显示在示例图像 [2] 边框中的白边（左侧和右侧）

4

1 回答 1

1

我用 CSS 解决了这个问题，使用相对和绝对位置，除了注意 div 和 sub div 编码。

于 2013-02-18T14:42:59.170 回答