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

Por , em Desenvolvimento frontend

Recommended Posts

islanilton    0

islanilton
Postado

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

islanilton    0

islanilton
Postado

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

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

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

angelorubin    142

angelorubin
Postado

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

Henrique Barcelos    290

Henrique Barcelos
Postado

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
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito