passei o dia todo tentando resover isso e não consegui, alguem poderia me mostrar onde esta o erro? já fiz, refiz e nada, preciso que as divs "pai,mae,filho1,filho2,filho3" fiquem alinhadas uma emcima da outra dentro da div content, porem se vcs perceberem o texto passa por cima da div footer e entre elas fica um espaçamento separando-as .segue o codigo a baixo:
CSS
body {
font: 11px Tahoma, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0px;
padding: 0px;
}
#display {
width:100%;
height:100%;
margin: 0px auto;
text-align: center;
background-color:#e7e4ee;
}
#bg_color_main {
width:100%;
height:100%;
background-color:#e7e4ee;
}
#main {
width:100%;
height:auto;
background-image:url(imgs/bg_main.png);
background-repeat:repeat-x;
}
#footer {
width:100%;
height:107px;
margin:0px;
margin-top:0px;
background-image:url(imgs/bg_footer.png);
background-repeat:repeat-x;
text-align:center;
clear:both;
background-color:#FFF;
}
#topo {
width:960px;
margin: 0px auto;
text-align: center;
}
#content {
width:960px;
height:auto;
margin: 0px auto;
text-align: center;
background-color:#e7e4ee;
clear:both;
}
#footer_content {
width:960px;
height:107px;
margin: 0px auto;
text-align: center;
}
#logo {
width:421px;
height:109px;
float:left;
display:block;
background-image:url(imgs/logo.jpg);
}
/* -------------------------AREA INTERNA ----------------------------------------------*/ /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< daqui pra baixo esta o probema, acho eu */
#bg_degrade {
width:100%;
margin:auto;
background-image:url(imgs/bg_interna_degrade_roxo.jpg);
background-repeat:repeat-x;
}
#titulo_interna{
width:893px;
height:33px;
text-align:left;
margin-left:15px;
padding-top:17px;
padding-left:40px;
background-image:url(imgs/bg_titulo_interna.png);
}
#conteudo_interna{
width:893px;
text-align:left;
margin-left:23px;
margin-top:0px;
padding-top:17px;
padding-left:32px;
background-color:#eaeaea;
}
#footer_bg_interna
{
float:left;
width:100%;
height:50px;
background-image: url(imgs/bg_footer_degrade_roxo.jpg);
background-position:top;
background-repeat:no-repeat;
}
#pai {
background-color:#9c93b0;
}
#mae {
background-image:url(imgs/bg_interna_degrade_roxo.jpg);
background-repeat:repeat-x;
}
#filho1 {
width:933px;
height:50px;
margin:0;
background-image:url(imgs/bg_titulo_interna.jpg);
float:left;
}
#filho2 {
background-image: url(imgs/bg_conteudo.png);
width:923px;
margin:0;
margin-left:10px;
float:left;
}
#filho3 {
background-image: url(imgs/bg_footer_degrade_roxo.jpg);
background-position:top;
background-repeat:no-repeat;
margin: 0;
margin-left:10px;
width:923px;
height:25px;
float:left;
}
/* -------------------------FOOTER ----------------------------------------------*/
a.menu_footer {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #666666;
}
a.menu_footer:link {
color: #666666;
text-decoration: none;
}
a.menu_footer:visited {
color: #666666;
text-decoration: none;
}
a.menu_footer:hover {
color: #9c8cc5;
text-decoration: none;
}
a.menu_footer:active {
color: #666666;
text-decoration: none;
}
#footer_links {
margin-top:16px;
text-align:left;
float:left;
width:680px;
}
#footer_contatos {
margin-top:16px;
text-align:left;
float:left;
width:280px;
text-align:right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #999999;
}
#footer_awm {
width:960px;
height:29px;
margin-top:15px;
text-align:center;
padding-top:15px;
clear:both;
}
#footer_copyright {
width:960px;
margin-top:12px;
text-align:center;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
color:#666;
padding-top:10px;
}
/* -------------------------FOOTER ----------------------------------------------*/
/* --------------------- INICIO MENU ------------------------------ */
#menu {
margin:0;
}
#menu li {
display: inline;
}
#menu li a {
background: url(imgs/menu.jpg);
float: left;
height: 109px;
margin-right: 0px;
margin-top:0px;
text-indent: -10000px;
}
#menu .home {
background-position: 0px 0px;
width: 91px;
}
#menu .home:hover {
background-position: 0px -109px;
}
/*#menu .home:active { {background-position: 0px -109px;}*/
#menu .empresa {
background-position: -91px 0px;
width: 93px;
}
#menu .empresa:hover {
background-position: -91px -109px;
}
/*#menu .empresa:active {background-position: -91px -109px;}*/
#menu .servico {
background-position: -190px 0px;
width: 91px;
}
#menu .servico:hover {
background-position: -190px -109px;
}
/*#menu .servico:active {background-position: -190px -109px;}*/
#menu .produto {
background-position: -280px 0px;
width: 93px;
}
#menu .produto:hover {
background-position: -280px -109px;
}
/*#menu .produto:active {background-position: -280px -109px;}*/
#menu .duvida {
background-position: -380px 0px;
width: 91px;
}
#menu .duvida:hover {
background-position: -380px -109px;
}
/*#menu .duvida:active {background-position: -380px -109px;}*/
#menu .contatos {
background-position: -480px 0px;
width: 80px;
}
#menu .contatos:hover {
background-position: -480px -109px;
}
/*#menu .contatos:active {background-position: -480px -109px;}
/* -------------------- FIM MENU ------------------------------ */
HTML
<!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>Untitled Document</title>
<link rel="stylesheet" href="style_ff_op_chrome_interna.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="display">
<div id="bg_color_main">
<div id="main">
<div id="topo">
<div id="logo"></div>
<div id="navbar_menu">
<ul id="menu">
<li><a class="home" href="#">Home</a></li>
<li><a class="empresa" href="#">empresa</a></li>
<li><a class="produto" href="#">produtos</a></li>
<li><a class="servico" href="#">servico</a></li>
<li><a class="duvida" href="#">duvida1</a><a class="contatos" href="#">contatos</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="pai">
<div id="mae">
<div id="filho1">f1
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div id="filho2">f2
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div id="filho3">f3
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_content">
<div id="footer_links"><a href="#" class="menu_footer">Home </a>| <a href="#" class="menu_footer">A Empresa</a> | <a href="#" class="menu_footer">Serviços</a> | <a href="#" class="menu_footer">Produtos</a> | <a href="#" class="menu_footer">Dúvidas</a> | <a href="#" class="menu_footer">Contato</a></div>
<div id="footer_contatos"><img src="imgs/icone_telefone.png" width="19" height="14" alt="icone_telefone" />+55 (21) 2222-2222 <img src="imgs/icone_email.png" width="18" height="12" alt="icone_email" /> contato@contato.com.br </div>
<div id="footer_logo"><a href="d" target="_blank"><img src="imgs/logo_awm.png" alt="logo" width="130" height="29" border="0" /></a></div>
<div id="footer_copyright">© Todos os Direitos Reservados</div>
</div>
</div>
</div>
</div>
</body>
</html>Obrigado a todos pela colaboração
Edição feita por: Rodrigo P, 03/12/2009, 19:25.
