rodape estoura para o lado quando diminui a tela

EduardoAugustoPHP · Abril 11, 2013

Cara, seguinte.

Eu vi aqui seu código bem rapido, mas percebi que você atribuiu "style" dentro do link..

<li> <a href="http://teste.com.br/" style="width:183px;height:132px;"  target="_blank"><img src="i/img5.png" /></a></li>

Atribua o tamanho das imagens na própria img, altere seu tamanho ou defina no css...

nao entendi pq colocou tamanho nos "a".

Crie uma div global que encorpe todo conteudo do site e defina seu tamanho.

Dentro dela vc coloca todo conteúdo do site entendeu?

Tipo assim:

<html>
<body>
 <div id="global">
   <div id="topo"></div>
   <div id="corpo"></div>
   <div id="rodape">
     <ul>
        <li></li>
     </ul>
   </div>

 </div>

Faz ai e posta para vermos como está ficando.

Heitor Sousa · Abril 12, 2013

alterei o código, veja se eh necessário para oq vc precisa, lembrando que eu aconselharia você a criar um layout em html css puro para organizar melhor, o código está meio bagunçado.

a largura da div eu costumo fazer sempre 970px; justamente para que na resolução 1024px continue centralizado e só não apareça o body.

<html>
    <head>
        <script type="text/javascript" src="js/jquery.tools.min.js" ></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js" ></script>
        <!--[if lt IE 9]>
        <script src="js/IE9.js">IE7_PNG_SUFFIX=".png";</script>
        <![endif]-->
        <script type="text/javascript" src="js/swfobject.js" ></script>
        <script type="text/javascript" src="js/calendar.js?v=5"></script>
        <style type="text/css">
            * {padding:0; margin:0; border: 0; font-family: "Trebuchet MS", Arial; color:#545454}
            img { border: 0; }
            #menuB {
                /*background:url(i/fundo-topo-menu.jpg) repeat-x #fff; color:#545454;*/
                text-align: center;
            }
            #menu {
               height:40px;
              width:1200px;
               padding-bottom:10px;
               margin:auto;
               border:none;
            }
           /* #menu ul {
                list-style-type: none;
            }
            #menu ul li {
                float: left;
            }
            #menu li a {
                display: block;
                width: inherit;
                height: inherit;
            }
            #menu span {
                display: none;
            }
            #menu #home {
                width: 91px;
                height: 60px;
            }
            #menu #missao {
                /* background:url(i/menu-missao.png); */
                width: 176px; /* 156 */
                height: 59px;
            }
            #menu #pedido {
                /* background:url(i/menu-pedido.png) no-repeat center; */
                width: 278px; /* 278 */
                height: 63px;
            }
            #menu #opine {
                /* background:url(i/menu-opine.png) no-repeat center; */
                width: 121px; /* 91 */
                height: 60px;
            }
            #menu #downloads {
                width: 156px; /* 156 */
                height: 59px;
            }
            #menu #contato {
                /* background:url(i/menu-contato.png); */
                width: 141px; /* 121 */
                height: 55px;
            }
                       
                         #menu #teens {
                /* background:url(i/menu-teens.png); */
                width: 278px; /* 121 */
                height: 55px;
            }
                       
                       
            */
            #cabecalhoB {
                text-align: center;
            }
            #cabecalho {
                width: 940px;
                margin: 0 auto;
                line-height: 14px;
                text-align: left;
            }
            #cabecalho h2 {
                color: #1C3326;
            }
            #cabecalho #esq {
                padding-top:30px;
                padding-right:30px;
                float:left;
                width: 240px;
            }
            #cabecalho a {
                text-decoration: none;
            }
            #cabecalho a:hover {
                text-decoration: underline;
            }
            #cabecalho #dir {
                padding-top:30px;
                padding-left:50px;
                float:left;
                width: 220px;
            }
            #cabecalho #centro {
                float:left;
                /* background:url(i/eja.gif) no-repeat; */
                height: 106px;
                width: 399px;
            }
            #cabecalho #centro a {
                display: block;
                width: inherit;
                height: inherit;
            }
            #cabecalho #centro a span {
                display: none;
            }            
            #bannerB {
                text-align: center;
            }
            #banner {
                clear:both;
                padding-top: 10px;
                width: 936px;
                margin: 0 auto;
                height: 255px;
            }
            #conteudoT {
                background:url(i/fundo-topo-conteudo.jpg) repeat-x #fff; color:#fff;
                padding-top: 50px;
            }
            #conteudoB {
                background:url(i/fundo-conteudo.jpg);
                text-align: center;
            }
            #conteudo {
                width: 860px;
                margin: 0 auto;
                overflow: auto;
                text-align: left;
                padding-bottom: 60px;
                text-align: justify;
                position: relative;
                min-height: 100%;
            }
            #conteudo #esq {
                width: 480px; /* 476 */
                float: left;                
            }
            #conteudo #dir  {
                width: 300px; /* 430 */
                float: right;
            }
            #conteudo #unico {
                width: 860px;
                float: left;
            }
            #conteudo ul, #conteudo ol {
                padding-left: 50px;
            }
            #conteudo ul {
                list-style-type: disc;
            }
            #conteudo ol {
                list-style-type: decimal;
            }
            #conteudo p, #conteudo b, #conteudo i, #conteudo li, #conteudo a { color: #ccc; text-decoration: none; }
            #conteudo a:hover { text-decoration: underline; }
            #conteudo #cal * {
                color: #545454;
            }
            #conteudo table td {
                color: #ccc;
            }
            #conteudo h2 {
                color: #D1EF5A;
                padding-bottom: 20px;
            }
            #conteudo .agenda {
                font-size: 14px;
                clear: both;
                padding-bottom: 25px;
            }
            #conteudo .agenda .data {
                color: #8F9999;
            }
            #conteudo .agenda .titulo {
                color: #fff;
                font-size: 16px;
            }
            #conteudo .agenda .cidade {
                color: #ccc;
                text-align: right;
            }
			#rodape{
			width:970px;
				background:url(i/fundo-rodape.jpg) repeat-x #1E1C1C;
				height: 300px;
            	position:absolute;
				left:50%;
				margin-left:-485px;
			}
            
            #pastoral p { text-indent:25px; }
            /* banner */
            #nav { z-index: 50; position: absolute; bottom: 10px; right: 5px }
            #nav a { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #cff; text-decoration: none }
            #nav a.activeSlide { background: #aaf }
            #nav a:focus { outline: none;}
        </style>
        <!-- VIDEOS -->
        <script type="text/javascript">
            function vPlayer(url) {
                //var objeto = '<object type="application/x-shockwave-flash" data="'+url+'" width="277" height="233"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="'+url+'"><param name="wmode" value="transparent"></object>';
                var objeto = '<object width="396" height="248"><param name="movie" value="http://www.youtube.com/watch?v='+url+'?fs=1&hl=pt_BR&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/watch?v='+url+'?fs=1&hl=pt_BR&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="396" height="248"></embed></object>';
                document.getElementById("vPlayer").innerHTML = objeto;
            }
            $(document).ready(function() {
                //$("#vPlayerMini").scrollable().navigator();
                //$(".scrollable").scrollable({circular: true, mousewheel: true}).autoscroll({ interval: 3000 });
                //$("#browsable").scrollable().navigator();
                // videos
                $("#browsable").scrollable({circular: true, mousewheel: true}).autoscroll({ interval: 4000 });
                // banner
                $('#banner').cycle({
                    fx:     'shuffle',
                    speed:  'slow',
                    timeout: 6000,
                    pager:  '#nav',
                    slideExpr: 'img'
                });
            });
        </script>
        <!-- slide -->
        <link rel="stylesheet" type="text/css" href="js/scrollable/css/scrollable-horizontal.css" />
        <link rel="stylesheet" type="text/css" href="js/scrollable/css/scrollable-buttons.css" />
        <link rel="stylesheet" type="text/css" href="js/scrollable/css/scrollable-navigator.css" />
        <style type="text/css">
            /* videos */
            .scrollable {
                width: 396px; /* 396 */
                height: 105px; /* 165 */
                /* background: none; border: none; */
            }
            .scrollable img {
                width: 96px; /* 160 */
                height: 60px; /* 120 */
                /* margin:20px 5px 20px 21px;*/
            }
            .scrollable img.hover {
                background-color:#123;
            }
        </style>
     
    </head>
    <body>
       
        <div id="menuB">
            <div id="menu"> <a href="index.php"><img src="images/menu_novo/home.jpg" alt="home" width="110" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="missao.php"><img src="images/menu_novo/nossamissao.jpg" alt="missao" width="176" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="pedido.php"><img src="images/menu_novo/pedido.jpg" alt="pedido" width="196" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="opine.php"><img src="images/menu_novo/opine.jpg" width="117" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="downloads.php"><img src="images/menu_novo/downloads.jpg" alt="download" width="162" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="downloads.php"><a href="/blog/index.html"><img src="images/menu_novo/blog.jpg" alt="download" width="99" height="40" border="0" /></a><img src="images/menu_novo/meio.jpg"/><a href="teens.php"><img src="images/menu_novo/teens.jpg" width="186" height="40" border="0" /><a href="contato.php"><img src="images/menu_novo/contato.jpg" width="137" height="40" border="0" /></a></div>
</body>
        </div>
        <div id="cabecalhoB">
            <div id="cabecalho">
                <div id="esq"><a href="sobre.php"><h2>Sobre</h2><br />TESTE</a></div>
                <div id="centro"><a href="/"><img src="i/eja.gif" /><span>TESTE</span></a></div>
                <div id="dir"><a href="localizacao.php"><h2>Onde</h2><br />TESTE</a></div>
            </div>
        </div>
        <p style="clear:both;"> </p>
        <div id="bannerB">
            <div id="banner">
                <div id="nav"></div>
                <?php echo $banners; ?>
            </div>            
        </div>
        <div id="conteudoT">
            <div id="conteudoB">
                <div id="conteudo">
                    <?php echo $conteudo; ?>
                </div>
            </div>
        </div>
       
<!--  TRECHO  SER ANALISADO -->
<div id="rodape">
             <ul>
                        <li><a href="http://teste.org.br/" style="width:188px;height:75px;"  target="_blank"><img src="i/img1.png?v=2" /></a></li>
                        <li><a href="http://teste.com.br/" style="width:182px;height:77px;"  target="_blank"><img src="i/img2.png" /></a></li>
                        <li> <a href="http://teste.com.br/" style="width:183px;height:131px;"  target="_blank"><img src="i/img3.png"/></a></li>        
                    <li> <a href="http://teste.com.br/" style="width:180px;height:154px;" target="_blank"><img src="i/img4.png"/></a></li>             
                    <li> <a href="http://teste.com.br/" style="width:183px;height:132px;"  target="_blank"><img src="i/img5.png" /></a></li>
                        </ul>
                                </div>
    </body>
</html>

fabio.aurelio · Abril 12, 2013

Resolvemos galera ..uffa!

Obrigado a todos mesmo, segui as dicas de vocês.

Em especial as dicas do EduardoAugustoPHP e do Heitor Sousa.

Limpei o codigo e distribui os divs separados(global, rodape.. ul..li)

abraço e bom fds galera!

EduardoAugustoPHP · Abril 12, 2013

Resolvemos galera ..uffa!

Obrigado a todos mesmo, segui as dicas de vocês.

Em especial as dicas do EduardoAugustoPHP e do Heitor Sousa.

Limpei o codigo e distribui os divs separados(global, rodape.. ul..li)

abraço e bom fds galera!

UFA!!!

Ainda bem que conseguiu! Fico feliz em ter podido ajudá-lo.

Um abraço e até a próxima.

Entrar

Arquivado

rodape estoura para o lado quando diminui a tela

Recommended Posts

EduardoAugustoPHP 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

Heitor Sousa 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabio.aurelio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

EduardoAugustoPHP 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante