Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Josano

ajuda!!! produtos ultrapassando paineis

10-09-2014 15:55

Pessoal,

Boa tarde. Tentei por varias vezes entender porque os produtos estão saindo fora dos paineis da apostila wd-43 da caelum porém não consegui :( peço desculpas por pedir ajuda postando o codigo mas é porque realmente não consegui por ter pouca experiência em css3

Segue abaixo o codigo da index e do css a imagem dos produtos esta com 140 x 140

Obrigado a todos pela ajuda!

--index--

<!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="css/reset.css">     <link rel="stylesheet" href="css/estilos.css">     <title>Mirror Fashion</title>     <meta charset="utf-8"> </head> <body>     <header class="container">         <h1><img src="img/logo.png" alt="Mirror Fashion"></h1>         <p class="sacola">             Nenhum item na sacola de compras         </p>         <nav class="menu-opcoes">             <ul>                 <li><a href="#">Sua Conta</a></li>                 <li><a href="#">Lista de Desejos</a></li>                 <li><a href="#">Cartão Fidelidade</a></li>                 <li><a href="sobre.html">Sobre</a></li>                 <li><a href="#">Ajuda</a></li>             </ul>         </nav>     </header>     <div class="container destaque">         <section class="busca">             <h2>Busca</h2>             <form>                 <input type="search">                 <input type="image" src="img/busca.png">             </form>         </section><!-- fim .busca -->         <section class="menu-departamentos">             <h2>Departamentos</h2>             <nav>                 <ul>                     <li><a href="#">Blusas e Camisas</a></li>                     <li><a href="#">Calças</a></li>                     <li><a href="#">Saias</a></li>                     <li><a href="#">Vestidos</a></li>                     <li><a href="#">Sapatos</a></li>                     <li><a href="#">Bolsas e Carteiras</a></li>                     <li><a href="#">Acessórios</a></li>                 </ul>             </nav>         </section><!-- fim .menu-departamentos -->         <img src="img/destaque-home.png" alt="Promoção: Big City Night">     </div>     <div class="container paineis">         <section class="painel novidades">             <h2>Novidades</h2>             <ol>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura1.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura2.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura3.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura4.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura5.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura6.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>             </ol>         </section>         <section class="painel mais-vendidos">             <h2>Mais Vendidos</h2>             <ol>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura7.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura8.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura9.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura10.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura11.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>                 <li>                     <a href="produto.html">                         <figure>                             <img src="img/produtos/miniatura12.png">                             <figcaption>Fuzz Cardigan por R$ 129,90</figcaption>                         </figure>                     </a>                 </li>             </ol>         </section>     </div> </body> </html>  

--css--

.sacola {     background: url(../img/sacola.png) no-repeat top right;     font-size: 14px;     padding-right: 35px;     text-align: right;     width: 140px; } .menu-opcoes ul {     font-size: 15px; } .menu-opcoes a {     color: #003366; } body {     color: #333333;     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .menu-opcoes ul li {     display: inline;     margin-left: 20px; } .sacola {     padding-top: 8px; } .container {     margin: 0 auto;     width: 940px; } header {     position: relative; } .menu-opcoes {     position: absolute;     bottom: 0;     right: 0; } .sacola {     position: absolute;     top: 0;     right: 0; } .busca, .menu-departamentos {     background-color: #dcdcdc;     font-weight: bold;     text-transform: uppercase;     margin-right: 10px;     width: 230px; } .busca h2, .busca form, .menu-departamentos h2 {     margin: 10px; } .menu-departamentos li {     background-color: white;     margin-bottom: 1px;     padding: 5px 10px; } .menu-departamentos a {     color: #333333;     text-decoration: none; } .busca input {     vertical-align: middle; } .busca input[type=search] {     width: 170px; } .busca, .menu-departamentos {     float: left; } .menu-departamentos {     clear: left; } .destaque {     margin-top: 10px; } .menu-departamentos {     margin-top: 10px;     padding-bottom: 10px; } .painel {     margin: 10px 0;     padding: 10px;     width: 445px; } .novidades {     float: left; } .mais-vendidos {     float: right; } .painel li {     display: inline-block;     vertical-align: top;     width: 140px;     margin: 2px;     padding-bottom: 10px; } .painel h2 {     font-size: 24px;     font-weight: bold;     text-transform: uppercase;     margin-bottom: 10px; } .painel a {     color: #333;     font-size: 14px;     text-align: center;     text-decoration: none; } .novidades {     background-color: #f5dcdc; } .mais-vendidos {     background-color: #dcdcf5; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

ajuda!!! produtos ultrapassando paineis

10-09-2014 16:18

Ficaria mais fácil entender olhando um imagem do layout.

De qualquer forma, basicamente você deve ter a estrutura, e a figura que irá dentro tem que estar dentro do limite de largura e altura da estrutura.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 7
Nome: Josano

ajuda!!! produtos ultrapassando paineis

10-09-2014 16:40

Olá Web,

Obrigado pro responder.
Consegui disponibilizar o projeto para download.
Segue o link se puder me ajudar já tentei de tudo quando é jeito e ate agora estou sem conseguir enquadrar.
mbf.me/..

Muito obrigado,
Josano
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

ajuda!!! produtos ultrapassando paineis

10-09-2014 16:56

Eu dei uma olhada no estilos.css, na class .painel li

Aparentemente, o width dela está interferindo. No caso está 140px, 3 fotos por linha. Se você colocar 200px, são duas fotos por linha.

Então acho que você ou aumenta ambos painéis, ou usa duas fotos por linha.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado