Espaço sobrando na pagina top e rodape com width 100%

Allan santanna reis · Março 4, 2013

Ola Galera...

To tomando uma surra braba, defini o topo e rodapé em width 100% e sobra uma espaço do lado direito na pagina, ja usei min-width e mesmo nao consegui....

Segue codigo:

HTML.....................

<body>







<div id="topo">




<div id="cabeçalho">


    <div id="logo"> 
    
    <h1> <a href="../index.html"> <span> Infinito  </span> </a>
    </h1>
    
    </div>
    
  
       <div id="face">


   <iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/infinidesignstudio" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 200px; height:40px;"></iframe>  


 </div> <!--face-->
    
  <div id="menu">
    
    <ul>
            
             <li> <a href="../index.html" > HOME    </a></li>
            <li> <a href="sobre.html" > SOBRE </a>  </li>
            <li> <a href="../contato/contato.html" > CONTATO  </a> </li>
            <li> <a href="../quemfez/quemfez.html" > QUEM FEZ </a>  </li>
            
            </ul>
            </div>


    </div>
   


    </div> <!--FIM MENU-->






</div> <!-- fim div cabeçalho-->






</div> <!--fim div topo-->




<div id="conte">




 <div  id="sobre"> 
                  
                    <p>A infinito busca levar um conceito criativo e inovador a respeito de comunicação e design, sempre com o objetivo de executar um projeto unico e exclusivo para cada um de seus clientes.
                    Buscamos sempre criar formas de satisfazer e tornar os nossos clientes o mais satisfeitos o possível, assim a infinito design entra no mercado pra se tornar a maior empresa de design do planeta.</p>
                  <br />
                        <p>Adriano Reis / Allan Reis</p>
                        
                        
                    </div>     
  
  <div id="slide">


<div id="featured" class="sl"> 
    <img src="Screen Shot 2013-02-13 at 8.04.44 PM copy.png" alt="showdebola" />
    <img src="Screen Shot 2013-02-13 at 8.04.44 PM copy.png"  alt="Nova" />
    <img src="Screen Shot 2013-02-13 at 8.04.44 PM copy.png" alt="vibe" />


                 
          </div>    
</div>
            


</div> <!--fim conteudo-->


<div id="rodapé">
<h1> </h1>
    
    <address>
   
            <strong id="mail">  Contato@infinitostudio.com.br </strong>
            
            <br/>
           <br />
            
            <strong id="tel"> (21) 8218-5429 / 8157-8690 </strong>
    
    
    </address>






</div> <!--fim div rodape-->




</body>






</html>

...............................................................

CSS

* {

margin: 0;
padding: 0;
}




body {
background-image:url(../img/dust/dust_@2X.png);


}


/************************************************************************************************************************************************************/


div#total {


}


/************************************************************************************************************************************************************/




div#topo {
background-color:#DF5356;
width: 100%;
height: 200px;
margin: 0 auto;
box-shadow: 3px 3px 3px #888;
-webkit-transition: padding 1s;
-moz-transition: padding 1s;
}






div#cabeçalho {
width: 1024px;
height:100px;
margin: 0 auto;
padding: 0 30px;
position:relative;
}




div#face {
width: 100px;
height: 50px;
padding: 10px;
}








div#menu {
width: 400px;
padding: 0px 600px;


}




ul li {
margin: 0 13px;
padding: 0 0 10px;
float:left;
list-style:none;
}


 ul li a {
text-decoration:none;
color:#FFF;
text-shadow:  2px 2px 2px  #333;
font-family:'Oxygen Mono', sans-serif;
font-size: 16px;
-webkit-transition: color 1s ease-in;
-moz-transition: color  1s ease-in;
}


ul li a:hover {
border: 1px dashed #FFF;
color:#FFD2E9;
-webkit-transition: #FFD2E9;
-moz-transition: #FFD2E9;
}




/************************************************************************************************************************************************************/


div#logo {
margin: 0px 0px;
width: 300px;
height: 90px;
z-index:auto;
}


.li {
float:left;
list-style-type:none;
}


div#logo h1 {
width: 300px;
height: 70px;


}


div#logo h1 a {
background-image:url(../img/logo2.jpg);
background-repeat:no-repeat;
height: 95px;
display:block;
}


div#logo h1 a span {
display:none;
}

douglasdeodato · Março 4, 2013

cara abri teu codigo aqui mais nao to entendo o que voce quer.

que espaco na direita voce fala? to vendo que esta centralizado a div e tem espaco na direta e esquerda.

manda um print srcreen ae pra entender

abraco

Giovani · Março 4, 2013

Poste um link que ficará mais fácil pra visualizar o problema e tentar resolver ;)

Allan santanna reis · Março 5, 2013

Entao galera, o topo em algumas resoluçoes de monitores ele quebra e nao fica 100% , eu consegui amenizar com min-width, mas nao funciona no mozila e quando vc redimensiona em qualquer navagador vai se criando um espaço no lado direito..... Segue link abaixo com o print

http://imageshack.us/photo/my-images/802/screenshot20130304at726.png/

charleskx · Março 12, 2013

Da um float na div topo

div#topo{
    background-color:#DF5356;
    float:left;
    width:100%;
    height:200px;
    margin:0 auto;
    box-shadow:3px 3px 3px #888;
    -webkit-transition:padding 1s;
    -moz-transition:padding 1s;
}

Entrar

Arquivado

Espaço sobrando na pagina top e rodape com width 100%

Recommended Posts

Allan santanna reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglasdeodato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Allan santanna reis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

charleskx 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante