Ir para conteúdo

POWERED BY:

Arquivado

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

Leo Morais

Rodape nao acompanha o conteudo

Recommended Posts

Ola galera,

Meu rodape nao esta acompanhado o conteudo,

como vcs podem ver o layout do meu site é esse:

 

 

 

site.jpg

 

 

 

O codigo do html( nao levem em consideracao o php)

tente entender o layout.

include_once("header.php");?>

	<div id="meio">
<?php
  include_once("menulateral.php");
?>

    <div id="nav">

<?php
include("nav/menu/home.php");

 ?>

     </div>  <!-- nav -->  
            

       <?php
  include_once("footer.php");
?>         
        
       
	</div><!-- meio -->

</div><!-- all -->

css

/* pricipais div */
* {
margin: 0;
padding: 0;
}
body{
background-image: url(../images/listra.png);
background-color:#000;
}
#all{
width:930px;
height: 100%;
min-height: 100%;
margin-left:auto;
margin-right:auto;
margin-bottom: 0;
padding: 0;
position: relative;
}

#header{
width:930px;
height:256px	
}
#meio{
	width:930px;
	margin-bottom: 0;
	
}

/* Fim pricipais div */

/* header */
#logo{
vertical-align:top;
background-image:url(../images/topo.jpg);
}
#menu{
width:700px;
height:52px;
font:bold 16px Georgia, Times New Roman, Times, serif;
line-height:3em;
vertical-align:bottom;
text-align:center;
background-color:#000;
padding-left:115px;
padding-right:115px;
border-bottom:3px solid #999;
}
#menu ul {
padding:0px;
margin:0px;
float: left;
background-color:#000;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
background-color:#000;
color: #999;
text-decoration: none;
border-bottom:3px solid #999;
padding: 2px 10px;
float:left;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #000;
border-bottom:3px solid #810A1C;
}
/* FIM header */
/* Meio */
#nav{
	width:700px;
	float:left;
	border-radius:20px;
	padding-bottom:20px;
	background-color:#FFF;
	vertical-align:top;
	mini-height: 100%;
}
.titulo{
font-family:Comic Sans, Comic Sans MS, cursive;
font-size:22px;
color: #FFF;
background-color:#810A1C;
height:30px;
border-top-left-radius:20px;
border-top-right-radius:20px;
width: 700px;
float:left;
}
.titulo img{
padding-left: 40px;
}
.conteudo{
	width:700px;
	float:left;
	padding-top:5px;
	padding-left:5px;
	padding-right:5px;
	
	
}

#menu_lateral {
width: 200px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 14px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
color: #333;
float:right;
top: 0;
}
#menu_lateral ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}	
#menu_lateral li {
border-bottom: 1px solid #FFF;
margin: 0;
width: auto;
}
#menu_lateral li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #FFF;
background-color: #333;
color: #fff;
text-decoration: none;
width: auto;
}
#menu_lateral li a:hover {
border-left: 5px solid #810A1C;
background-color: #CCC;
color: #000;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 10px; 
text-align : left; 
font-weight : bold; 
color : #ffffff; 
background-color : #810A1C; 
padding-top : 3px; 
padding-bottom : 4px; 
padding-left : 4px; 
border-left: 5px solid #FFF;
display : block; 
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bt2 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif; 
font-size : 10px; 
text-align : left; 
font-weight : bold; 
color : #ffffff; 
background-color : #810A1C; 
padding-top : 3px; 
padding-bottom : 4px; 
padding-left : 4px; 
border-left: 5px solid #FFF;
display : block; 
}
.ht11 {
font-size : 10px; 
font-weight: bold;
color : #000; 
font-family : Verdana, Arial, Helvetica, sans-serif; 
text-decoration : none; 
} 
.hw12 {
font-size : 14px; 
font-weight : bold; 
color : #ffffff; 
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}


.produtos{
padding-top:5px;
background-color:#FFF;
max-width:700px;
}
#footer {
width: 700px;
height:30px;
float:left;
margin-top:30px;
position:absolute;
bottom:0;
text-align:center;
color: #CCC; 
font-size: 14px;
font-family:Helvetica;
clear:both;
}
#footer a { 
color: #FFF;
font-weight:bold; 
}


.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }

o layout esta assim:

 

layout.jpg

 

agradeco desde ja!

Compartilhar este post


Link para o post
Compartilhar em outros sites

retire esse position absolute e o float left do teu rodape.

Compartilhar este post


Link para o post
Compartilhar em outros sites

<div id="meio">

<div id="nav">

</div>

 

<div id="footer">

</div>

</div>

ja esta assim =/

só tem o menu lateral

<div id="meio">

 

<div id="menu_lateral">

</div>

 

<div id="nav">

</div>

 

<div id="footer">

</div>

</div>

 

e o css

#meio{

width:930px;

margin-bottom: 0;

 

}

#menu_lateral {

width: 200px;

padding: 0 0 0 0;

margin-bottom: 1em;

font-size: 14px;

font-weight: normal;

font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;

color: #333;

float:right;

top: 0;

}

#nav{

width:700px;

float:left;

border-radius:20px;

padding-bottom:20px;

background-color:#FFF;

vertical-align:top;

mini-height: 100%;

}

#footer {

width: 700px;

height:30px;

margin-top:30px;

bottom:0;

text-align:center;

color: #CCC;

font-size: 14px;

font-family:Helvetica;

clear:both;

}

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu tiraria o menu lateral de dentro da div meio..

 

#meio{

float: left;

}

 

#menu_lateral{

float: right;

}

Tirei o menu lateral

e mudei o tamanho da div meio

pra 700px, porem nao mudo nada!

=/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tudo errado o que falaram, nao faz nada disso acima...

 

Eh simples, em cima da div footer, crie um div chamada clear

 

E o css da div clear coloque: {clear:both;}

Dizer que o modo que você postou é (talvez) mais simples,normal, porém dizer que não funciona?

Existem n maneiras de resolver um problema e não apenas singularmente.

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.