Estou desenvolvendo um layout de um e-Commerce e preciso que a minha div que irá exibir os produtos tenha a largura de 100% par aproveitar o espaço da janela, e também uma largura mínima definida pra avitar a bagunça caso a janela seja redimencionada e fique muito pequena.
O que ocorre é: quando eu redimenciono a janela do navegador a div desce e fica em baixo da div de navegação (departamentos e categorias da loja) que fica do lado esquerdo, só que eu não quero que isso aconteça!
Um exemplo é o site da Americanas. Preciso que o meu funcione da mesma forma, ou seja, quando ao redimencionar a janela e a div que exibe os produtos cehegar à largura mínima a janela simplesmente cubra a div, e não a empurre para baixo. Façam um teste, acessem o site e redimencionem a janela pra ver como a div se comporta! O meu layout é bem parecido tem praticamente a mesma estrutura.
Se alguém puder me ajudar a resolver isso, eu fico muito agradecido.
Estou postando os códigos a baixo(no css tem alguns que não estão sendo utilizados no html pois fiz uma adaptação pra mandar pra vocês)
<!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" />
<!--=============INCLUDES==============-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="tudo">
<div id="topo">
TOPO
</div><!--===topo===-->
<!--====NAVEGAÇAO ESQUERDA DE DEPARTAMENTOS====-->
<div id="navegacao">
DEPARAMENTOS E CATEGORIAS DA LOJA
</div><!--===navegacao===-->
<!--===DIV CONTEÚDO PRA PREENCER O CONTEÚDO CENTRAL [BANNER - VITRINE...]===-->
<div id="conteudo">
<!--=====BANNER FULL=====-->
<div id="container_banner_full">
BANNER PRINCIPAL<br />
PRECISO QUE ESTA DIVE TENHA A LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA
</div><!--===container_banner_full===-->
<!--=====VITRINE=====-->
<div class="container_titulo_vitrine">
PRODUTOS EM OFERTA<br />
ESTA DIVE DEVERÁ TER LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA
</div>
<!--=====EXIBIÇÃO DOS PRODUTOS=====-->
<div class="vitrine">
<br />EXIBIÇÃO DOS PRODUTOS<br />
PRECISO QUE ESTA DIVE TENHA A LARGURA DEFINIDA COMO 100% E TAMBÉM UMA LARGURA MÍNIMA
</div><!--===vitrine===-->
<!--=====CONTEÚDO AUXILIAR DIREITO=====-->
<div id="auxiliar_direita">
CONTEÚDO AUXILIAR DA DIREITA [PUBLICIDADES E PROMÇÕES]
</div><!--===auxiliar_direita===-->
</div><!--===conteudo===-->
<!--===============RODAPE===============-->
<div id="rodape">
Rodape
</div><!--===rodape===-->
</div><!--===tudo===-->
</body>
</html>
Pergunta
+.jr_Designer.+
Boa noite moçada!
Estou desenvolvendo um layout de um e-Commerce e preciso que a minha div que irá exibir os produtos tenha a largura de 100% par aproveitar o espaço da janela, e também uma largura mínima definida pra avitar a bagunça caso a janela seja redimencionada e fique muito pequena.
O que ocorre é: quando eu redimenciono a janela do navegador a div desce e fica em baixo da div de navegação (departamentos e categorias da loja) que fica do lado esquerdo, só que eu não quero que isso aconteça!
Um exemplo é o site da Americanas. Preciso que o meu funcione da mesma forma, ou seja, quando ao redimencionar a janela e a div que exibe os produtos cehegar à largura mínima a janela simplesmente cubra a div, e não a empurre para baixo. Façam um teste, acessem o site e redimencionem a janela pra ver como a div se comporta! O meu layout é bem parecido tem praticamente a mesma estrutura.
Se alguém puder me ajudar a resolver isso, eu fico muito agradecido.
Estou postando os códigos a baixo (no css tem alguns que não estão sendo utilizados no html pois fiz uma adaptação pra mandar pra vocês)
default.css
body{ margin:0px; padding:0px; } *{ font-family:Arial, Helvetica, sans-serif; font-size:10px; } #tudo{ position:absolute; width:100%; height:auto; } #topo{ width:100%; height:146px; min-width:1000px; background:#CCC; } #login_topo{ position:relative; width:804px; height:43px; float:right; margin:0px 0px 0px 0px; background:url(../imagens/bg_topo_login.png) no-repeat; } #logo{ position:relative; width:240px; height:66px; background:url(../imagens/logo.png) no-repeat; cursor:pointer; margin:0px 0px 0px 10px; top:15px; } #busca_topo{ width:595px; height:23px; background:#099; clear:both; margin:50px 0px 0px 180px; } .carrinho{ width:165px; height:46px; margin:0px 0px 0px 30px; background:#099; float:left; } #topo_navegacao{ width:174px; height:41px; background:url(../imagens/topo_navegacao.png) no-repeat; margin:-55px 0px 0px 0px; } .titulo_navegacao{ position:relative; width:163px; height:32px; top:3px; left:3px; background:url(../imagens/bg_titulo_navegacao.png) } #navegacao{ float:left; width:174px; height:auto; min-height:500px; margin:-18px 0px 0px 0px; background:#999; } #conteudo{ float:left; width:auto; height:auto; min-width:800px; min-height:250px; margin-top:5px; background:#FFF; } #container_banner_full{ position:relative; width:600PX; height:220px; min-width:600px; border-top:1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; margin:0px 0px 0px 5px; background:#CCC; } .container_titulo_vitrine{ clear:both; width:600px; height:24px; min-width:675px; background:#CCC; margin: 10px 0px 0px 5px; } .container_vitrine{ float:left; width:auto; height:auto; min-height:400px; min-width:640px; background:#FFF; } .canto_esquerdo_vitrine{ width:16px; height:24px; background: url(../imagens/canto_esq_vitrine.jpg) no-repeat; margin:15px 0px 0px 5px; float:left; } .canto_direito_vitrine{ width:16px; height:24px; background:url(../imagens/canto_dir_vitrine.jpg) no-repeat; margin:15px 0px 0px 0px; float:left; } .centro_vitrine{ position:relative; width:auto; height:24px; min-width:643px; background:url(../imagens/centro_vitrine.jpg) repeat-x; margin:15px 0px 0px 0px; float:left; color:#FFF; font-size:13px; } .vitrine{ float:left; width:auto; height:auto; min-height:400px; min-width:675px; margin-left:5px; border-top:2px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:2px solid #d6d6d6; border-left:1px solid #d6d6d6; background:#FFF; } #auxiliar_direita{ width:130px; height:auto; min-height:130px; margin:0px 5px 0px 5px; border:1px solid #d6d6d6; float:left; } #rodape{ clear:both; width:100%; height:205px; background:#CCC; }default.htmlLink para o comentário
Compartilhar em outros sites
3 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.