Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

islanilton

Problema ao diminuir o zoom em navegadores

Recommended Posts

Boa Noite Turma!

 

Estou começando agora com desenvolvimento web, e estou com um problemas nas minhas páginas, ao diminuir o zoom nos navegadores firefox e ghrome , o conteudo das divis estão saindo do lugar, como faço para que eles diminuam de acordo com a div?

 

Agradeço a colaboração.

 

o problema é no menu e na pagina quem somos.

 

Segue o css.

 

*{margin:0; padding:0; list-style:none;}
body{background:url(../img/body_bg.png)repeat-x #EBEBEB;}
#site{width:1000px; margin:0 auto;}


/*TOPO*/
#topo{width:1000px; height:110px; background:url(../img/bg_topo.png) repeat-x; margin:0 auto;}
#topo .logo{width:177px; height:70px; padding-top:25px;display:block; margin-left:10px;}

/*MENU*/

#menu{width:550px; height:40px;margin:0 auto; background:#171717; position:relative; margin-top:2px; bottom:55px; left:200px;}    
#menu ul{border-bottom:solid 5px background:#282828;}
#menu ul li{display:inline-block;}
#menu ul li a{text-decoration:none; padding:15px; display:block; color:#FFF; font:bold 12px Arial, Helvetica, sans-serif; text-transform:uppercase; border:none;}

/*LINE*/

#menu .line{display:block; position:absolute; width:65px; height:5px; background:#FF6000; bottom:0;}

/*CONTEUDO*/

#content{width:1000px; background:#EBEBEB; margin:0 auto; margin-top:5px; height:700px;}
#conteudo{ margin:0 15px 0 15px; background:#EBEBEB; height:700px;}
#pagina{width:970px; height:695px; background:#FFF; border-radius:4px;-moz-border-radius:4px; position:relative;}

/*BOX*/

.box{width:970px; margin:0 auto; position:relative;}

/*SLIDER*/

.slider{width:970px; height:400px; overflow:hidden;}
.slider_item{width:970px; height:400px; position:relative;}
.slider_item p{background:rgba(0,0,0,0.3); position:absolute; bottom:0;font:bold 18px Arial, Helvetica, sans-serif; color:#F3F3F3;width:970px; height:55px; padding-top:10px; text-align:center;}

/*PAGER*/

.pager{position:absolute; z-index:999; top:20px; right:20px;}
.pager a{display:block; width:10px; height:10px; border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%; background:#000; float:left; margin:0 3px; cursor:pointer;}
.pager a:hover{background:#FF6000;}
.pager a.sliderativo{background:#FF6000;}

/*HOME_CHAMADA*/

#chamada{width:970px; height:300px; background:#FFF;}
#chamada .chamada_um{width:280px; height:280px; background:#FFF; float:left; margin:10px;  border:solid 2px #BCBCBC;border-radius:4px;-moz-border-radius:4px; }
#chamada .chamada_um .rt{width:280px; height:146px; background:#FFF;}
#chamada .chamada_dois{width:280px; height:280px; background:#FFF; float:left; margin:10px; margin-left:45px;  border:solid 2px #BCBCBC;border-radius:4px;-moz-border-radius:4px;}
#chamada .chamada_dois .rt{width:280px; height:146px; background:#FFF;}
#chamada .chamada_tres{width:280px; height:280px; background:#000; float: right;margin:10px;4px;-moz-border-radius:4px;}

/*QUEM SOMOS*/

#pagina .descricao{width:660px; height:400px; background:#FFF; margin:20px; float:left; position:relative;}
#pagina .descricao p{font:15px Arial, Helvetica, sans-serif;color:#000; padding:10px; line-height: 20px; margin-bottom:20px; }
#pagina .balao_b{width:150px; height:120px; float:left; margin-top:100px;}        

/*SERVICOS*/




/*404*/

#conteudo .erro{padding:100px; background:#FFF; text-align:center;}
#conteudo .erro p{ font:bold 20px Myriad Pro; color:#000;}

/*CONTATO*/

#pagina .contato{width:900px; padding:5px; background:#FFF;}
#pagina .contato h1{font:25px Arial, Helvetica, sans-serif; color:#171717; margin-bottom:5px; padding:10px;}
#pagina .contato p{font:12px Verdana, Geneva, sans-serif; color:#171717; padding-left:10px; margin-bottom:5px;}
#pagina .fale{ padding:5px; background:#FFF; margin:0 5px; float:left; width:620px;}
#pagina .fale label{display:block; margin-bottom:2px; background:#FFF; padding:2px;}
#pagina .fale span{display:block; margin-bottom:2px; font:Tahoma, Geneva, sans-serif; color:#000;}
#pagina .fale input{ background:#EBEBEB; padding:2px; font: 14px Arial, Helvetica, sans-serif; color:#000; width:300px;border-radius:4px;-moz-border-radius:4px;}
#pagina .fale textarea { background:#EBEBEB; padding:2px; font: 14px Arial, Helvetica, sans-serif; color:#000; width:400px;border-radius:4px;-moz-border-radius:4px;}
#pagina .fale .btn{ width:60px;background:#F7F7F7; color:#000; font:14px Verdana, Geneva, sans-serif; color:#000; display:block; cursor:pointer;}
#pagina .fale .btn:hover{background:#242424; color:#FFF;}


/*RODAPÉ*/

#footer{width:100%; height:230px; background:url(../img/bg_rodape.png) repeat-x;}
#footer .rodape{width:1000px; height:230px; background:background:url(../img/bg_rodape.png) repeat-x; margin:0 auto;
                position:relative;}
#footer .rodape p{font:bold 12px Arial, Helvetica, sans-serif; color:#FFF; position:absolute; bottom:10px; left:30px;}
#footer .mapa_site{width:970px; height:200px; background:#303030;position:absolute; top:10px;
                 left:15px;border-radius:4px;-moz-border-radius:4px;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha ai o html.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="[url=http://localhost/bepp/tpl/estilo/style.css'>http://localhost/bepp/tpl/estilo/style.css]http://localhost/bepp/tpl/estilo/style.css'>http://localhost/bepp/tpl/estilo/style.css [/url]" rel="stylesheet" type="text/css" media="screen" />
    <link rel="shortcut icon"  href="[url=http://localhost/bepp/tpl/img/b.png'>http://localhost/bepp/tpl/img/b.png]http://localhost/bepp/tpl/img/b.png'>http://localhost/bepp/tpl/img/b.png [/url]" />
    <script type="text/javascript" src="[url=http://localhost/bepp/js/jquery.js'>http://localhost/bepp/js/jquery.js]http://localhost/bepp/js/jquery.js'>http://localhost/bepp/js/jquery.js [/url]"></script>
    <script type="text/javascript" src="[url=http://localhost/bepp/js/script.js'>http://localhost/bepp/js/script.js]http://localhost/bepp/js/script.js'>http://localhost/bepp/js/script.js [/url]"></script>
    <script type="text/javascript" src="[url=http://localhost/bepp/js/cycle.js'>http://localhost/bepp/js/cycle.js]http://localhost/bepp/js/cycle.js'>http://localhost/bepp/js/cycle.js [/url]"></script>
    <script type="text/javascript" src="[url=http://localhost/bepp/js/script_cycle.js'>http://localhost/bepp/js/script_cycle.js]http://localhost/bepp/js/script_cycle.js'>http://localhost/bepp/js/script_cycle.js [/url]"></script>
    <script type="text/javascript" src="[url=http://localhost/bepp/js/mascara.js'>http://localhost/bepp/js/mascara.js]http://localhost/bepp/js/mascara.js'>http://localhost/bepp/js/mascara.js [/url]"></script>
    <script type="text/javascript" src="[url=http://localhost/bepp/js/script_mascara.js'>http://localhost/bepp/js/script_mascara.js]http://localhost/bepp/js/script_mascara.js'>http://localhost/bepp/js/script_mascara.js [/url]"></script>
    
    


    <title>Quem Somos | Bepp - Design Gráfico</title>
<meta name="description" content="Quem Somos | Bepp Design Gráfico - Soluções em Design Gráfico.Trazendo pra você soluções para conquistar novos clientes" />
<meta name="keywords" content="Design Digital,Desenvolvimento de sites,Indentidade Visual" />

</head>

<body>
    <div id="site">
        <div id="topo">    
            <div class="logo">
                <a href="[url=http://localhost/bepp]http://localhost/bepp [/url]" title="Bepp - Design Gráfico | Home">
                    <img src="[url=http://localhost/bepp/tpl/img/logo1.png]http://localhost/bepp/tpl/img/logo1.png [/url]" border="0" alt="Logo" title="Bepp Design Gráfico" />
                </a>
            </div><!--/logo-->
            <div id="menu">
    <span class="line"></span>
           <ul>
              <li><a href="[url=http://localhost/bepp]http://localhost/bepp [/url]" title="Bepp - Design Gráfico | Início">Início</a></li>
              <li><a href="[url=http://localhost/bepp/pagina/quem-somos]http://localhost/bepp/pagina/quem-somos [/url]" title="Bepp - Design Gráfico | Quem Somos ">Quem Somos</a></li>    
              <li><a href="[url=http://localhost/bepp/pagina/servicos]http://localhost/bepp/pagina/servicos [/url]" title="Bepp - Design Gráfico | Serviços">Serviços</a></li>
              <li><a href="[url=http://localhost/bepp/pagina/portifolio]http://localhost/bepp/pagina/portifolio [/url]" title="Bepp - Design Gráfico | Portifólio">Portifólio</a></li>
              <li><a href="[url=http://localhost/bepp/pagina/contato]http://localhost/bepp/pagina/contato [/url]" title="Bepp - Design Gráfico | Contato">Contato</a></li>
         </ul>
</div><!--/menu-->        </div><!--/topo-->
        <div id="content">

      <div id="conteudo">
        <div id="pagina">
                <div class="descricao">
                         <p>
                                A <strong>BEPP</strong> nasceu do sonho e desejo de cinco colegas, do Curso de Design Gráfico, <br />
                             com imaginação, criatividade e filosofia inovadora e contemporânea, que está <br />
                             crescendo a cada dia. Para que esse sonho se tornasse realidade, formamos uma <br />
                             equipe que trabalha com seriedade e dedicação, totalmente concentrada no que <br />
                             faz. Somos uma agência de Design Gráfico que gera integração e resultados que <br />
                             satisfaçam as expectativas dos nossos clientes. Oferecemos flexibilidade, diversidade, <br />
                             velocidade, sintonia e eficiência, a fim de criar trabalhos originais, criativos e de sucesso.                                 <br />
                             <br />
                             Trabalhamos com metas, ética e personalidade para alcançar nossos objetivos que <br />
                             é ser referência nacional em Design Gráfico. Para isso buscamos por resultados, respeito<br />
                             aos nossos clientes, honestidade e agilidade. <br />
                             <br />
                             Somos uma equipe ousada e que ama o que faz, que se importa com os detalhes <br />
                             para alcançar um objetivo único: ser grande. Por isto, procuramos clientes e parceiros <br />
                             que pensam como nós e que estão dispostos a abandonar o obsoleto.
                         </p>
                </div><!--/descricao-->
                <div class="balao_b">
                    <img src="[url=http://localhost/bepp/tpl/img/balao-b.png]http://localhost/bepp/tpl/img/balao-b.png [/url]" title="Balão" />
                </div><!--/balao_b-->
            </div><!--/pagina-->
            <br style="clear: both" />
      </div><!--/conteudo-->
      <br style="clear: both" />            </div> <!--/conteudo-->
        </div><!--/content-->
    </div><!--/site-->
    <div id="footer">
        <div class="rodape">
            <div class="mapa_site">
                mapa do site
            </div><!--/mapa_site-->
        </div><!--rodape-->
    </div><!--/footer-->
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, não achei nenhum problema. Diminui e amentei o zoom e janela do browser e nenhum conteúdo extrapolou o tamanho da div. Bom... O código que você postou aqui (HTML + CSS) não apresentaram problema. Tira um print do problema ai!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia,

 

Posso estar errado em minha suposição, mas quando se refere ao zoom, creio que queira dizer resolução.

 

Se for este o caso, este link sobre layout fluído do alistapart (em inglês) pode lhe ajudar:

 

http://www.alistapart.com/articles/fluidgrids/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não é possível desabilitar o zoom em navegadores desktop.

Eu nem me preocuparia muito com isso. Na verdade, não há muito o que fazer, pois cada navegador tem uma maneira diferente de fazer isso. Se o site está normal com o zoom default, então beleza.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.