Ir para conteúdo

POWERED BY:

Arquivado

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

pedrocaminha

[Resolvido] div gera espaço quando inserido por include

Recommended Posts

Boa noite a todos,

 

1º post.

 

Seguinte, sempre costumo fazer toda a página principal para depois "fatiar" e criar arquivos .php separados. Exemplo: topo.php, meio.php, rodape.php.

 

A página está perfeita e não possui erros com o CSS.

 

O problema é que ao inserir as partes via include surge um espaço abaixo da div.

 

Já testei no FF5 e IE9. O problema é o mesmo nos dois.

 

Me ajudem a resolver esse mistério.

 

site.css:

body {
margin: 0px;
padding: 0px;
background-color: #9B9B9B;
font-family:"Trebuchet MS", Arial, Verdana;
color: #000;
background-image: url(../img/bg_body.gif);
background-repeat: repeat-x;
}

#site {
width: 1024px;
margin: 0px auto;
}

#topo {
position: relative;
width: 1024px;
height: 125px;
margin: 0px auto;
background-image: url(../img/bg_topo.gif);
background-color: #EFEFEF;
}

#logo {
float: left;
margin: 0px auto;
width: 390px;
height: 125px;
}

#etopo {
float: left;
margin: 0px auto;
width: 634px;
height: 62px;
}

#home {
float: left;
width: 70px;
height: 37px;
}

#menu {
float: left;
width: 564px;
height: 37px;
}

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu ul li a{
position: relative;
height: 25px;
display: inline;
float: left;
display: block;
border-right: 1px solid #555;
padding: 12px 16px 0px 16px;
text-decoration: none;
color: #FFF;
font-size: 12px;
font-weight: bold;
}

#menu ul li a:hover{
background-image: url(/infosun/img/bg_menu.gif);
}

#navega {
float: left;
margin: 0px auto;
width: 634px;
height: 26px;
}


#util {
width: 1024px;
min-height: 400px;
background-color: #FFF;
}

#pub {
width: 1024px;
height: 240px;
background-color: #EFEFEF;
padding-top: 10px;
padding-bottom: 10px;
}

#box {
width: 1024px;
height: 240px;
background-image: url(/infosun/img/bg_pub.gif);
}

#solut {
width: 159px;
height: 220px;
float: left;
margin-left: 10px;
background-image: url(/infosun/img/box_solut.png);
background-position: center;
background-repeat: no-repeat;
}

#listasolu {
height: 100px;
color: #000;
font-size: 11px;
list-style-image: url(/infosun/img/marcador.png);
}

.maisinfo {
margin-left: 10px;
font-size: 11px;
text-align: right;
margin-right: 10px;
font-weight: bold;
}

.maisinfo a{
color: #556aae;
}

.maisinfo a:hover{
color: #b44718;
}

#more {
width: 1024px;
min-height: 300px;
}

#news {
width: 340px;
height: 300px;
float: left;
background-color: #EFEFEF;
}

#apresenta {
width: 514px;
height: 300px;
float: left;
background-color: #D8D8D8;
}

#parceiros {
width: 170px;
height: 300px;
float: right;
background-color:#C6C6C6;
}

#rodape {
margin: 0px;
width: 100%;
height: 200px;
background-color: #000;
}

#rodape_item {
margin: 0px auto;
width: 1024px;
height: 200px;
}

#rodape_itema {
float: left;
width: 341px;
height: 200px;
font-size: 13px;
list-style-image: url(/infosun/img/marcador2.png);
line-height: 25px;
}

#rodape_itema a {
color: #FFF;
text-decoration: none;
}

#rodape_itema a:hover {
color: #df8b1e;
text-decoration: none;
}

#rodape_itemb {
float: left;
color: #FFF;
font-size: 12px;
width: 342px;
height: 200px;
}

#rodape_itemc {
float: right;
width: 341px;
height: 200px;
color: #FFF;
font-size: 12px;
text-align: right;
}

.copyright {
color: #df8b1e;
font-style: italic;
}

 

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>

<link href="inc/site.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="site">

<div id="topo">
	<div id="logo"><img src="img/logo.png" alt="InfoSun" width="372" height="120" title="A solução em TI completa para a sua empresa"/></div>
	<div id="etopo"></div>
		<div id="home"><a href="index.php" target="_parent"><img src="img/home.gif" alt="Home" width="70" height="37" border="0"/></a></div>
		<div id="menu">
			<ul>
				<li><a href="index.php" target="_parent">Quem Somos</a></li>
				<li><a href="index.php" target="_parent">Soluções</a></li>
				<li><a href="index.php" target="_parent">Clientes</a></li>
				<li><a href="index.php" target="_parent">Downloads</a></li>
				<li><a href="index.php" target="_parent">Contato</a></li>
			</ul>
		</div>
	<div id="navega"></div>
</div>

<div id="util">
	<div id="pub"><img src="img/banner.jpg" alt="InfoSun" width="1024" height="220" title="A solução em TI completa para a sua empresa"/>
       	<img src="img/title_destaques.png" alt="Destaques" width="110" height="30"/>
       </div>

	<div id="box"></div>

	<div id="more">
       	<div id="news"><img src="img/title_news.png" alt="Novidades" width="110" height="30"/></div>
           <div id="apresenta"><img src="img/title_apresenta.png" alt="Apresentação" width="110" height="30"/></div>
           <div id="parceiros">
			<img src="img/title_parceiros.png" alt="Parceiros" width="110" height="30"/>
               <p><img src="img/logo_kaspersky.png" alt="Kaspersky" width="170" height="35"/></p>
               <p><img src="img/logo_microsoft.png" alt="Microsoft" width="170" height="35"/></p>
           </div>
	</div>
</div>

</div>

<? include ('rodape.php'); ?>

</body>
</html>

 

rodape.php

<div id="rodape_item">
	<div id="rodape_itema">
		<ul>
			<li><a href="index.php" target="_parent">Quem Somos</a></li>
			<li><a href="index.php" target="_parent">Soluções</a></li>
			<li><a href="index.php" target="_parent">Clientes</a></li>
			<li><a href="index.php" target="_parent">Downloads</a></li>
			<li><a href="index.php" target="_parent">Contato</a></li>
		</ul>
       </div>
   	<div id="rodape_itemb"></div>
   	<div id="rodape_itemc">
		<p>Endereço</p>
           <p><img src="img/fone.png" align="absmiddle"/> <b>55</b></p>
       	<p class="copyright">Copyright© 2011 Empresa</p>
       </div>
</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui resolver.

 

As divs que serão inseridas por include devem estar com a opção float: left ou right no CSS para não afetar o layout.

 

Exemplo:

 

#rodape {
       float: left;
       margin: 0px;
       width: 100%;
       height: 200px;
       background-color: #000;
}

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.