Jump to content

  2. → Viewing Profile: Tópicos: Rodrigo P

Rodrigo P

Member Since 14/10/2007
Offline Last Active 28/12/2011, 14:24
-----

Topics I've Started

Css - Browser Desorganizado

03/12/2009, 19:11

Pessoal boa noite,alguem pode me ajudar?

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

  1. Fórum WMO
  2. → Viewing Profile: Tópicos: Rodrigo P
  3. Privacy Policy
  4. Regras ·
IPB Skin By Virteq