Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal bom dia. Estou com um problema sério no CSS de um site meu. Aliás, são 2 problemas:
1) A div conteudo não estica verticalmente de acordo com o tamanho do texto inserido;
2) A div de rodapé não "anda" seguindo o alinhamento. Gostaria que ela fosse automática no posicionamento, se comportando como um rodapé deve ser: na parte de baixo de um site. Já tentei clear: both; mas não resolveu onda nenhuma. Pra manter o layout apresentável, tive que deixar a div#rodape com position let e top fixos. Vou postar os codes.
Se alguém puder dar uma mão, ficarei muito grato. :)
---------------------------
CSS do Layout
body {
margin:0px;
padding:0;
text-align:center;
min-width: 800px; /* hack para bug do Netscape*/
background:#3a3a3a url(bg.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#tudo {
width: 784px;
margin:0 auto;
padding: 0px;
background:#FFFFFF;
text-align:left;
}
#conteudo {
width: 784px;
height: 1300px;
background:#FFFFFF;
position: relative;
}/ ------------------------------------------- /
/=Topo - referento ao conteudo do topo /
#topo {
width: 780px;
height: 127px;
position: absolute;
left: 0px;
top: 0px;
padding: 0px;
background-color: #FFFFFF;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}/---------------------------------------------/
/=Info - div com o conteudo completo /
#info {
width: 474px;
height: 89px;
position: absolute;
text-align: left;
left: 6px;
top: 170px;
margin-top: 0px;
margin-left: 0px;
background-color: #FFFFFF;
}/---------------------------------------------/
/=Texto - div completa /
#texto {
width: 470px;
position: absolute;
left: 6px;
top: 280px;
text-align: left;
background-color: #FFFFFF;
margin-top: 15px;
float: left;
}/---------------------------------------------/
/=Autor - div completa /
#autor {
width: 270px;
height: 150px;
position: absolute;
left: 510px;
top: 180px;
background-color: #EDECEC;
text-align: left;
}/----------------------------------------------/
/=Destaques - div completa /
#destaques {
width: 270px;
position: absolute;
top: 350px;
right: 4px;
left: 510px;
background-color: #F4F4EA;
text-align: left;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #808040;
float: right;
}#destaques .clear {
clear: both
}
/ capitulador da div "destaques" /
#destaques img {
text-align: left;
vertical-align: top;
margin: 0px;
}/ classe para o icone ao lado do titulo dos artigos em destaque /
#destaques .artigo {
background-image: url(icon_artigo.gif);
background-repeat: no-repeat;
background-position: left 3px;
padding-left: 18px; /* espacamento entre o icone e o texto */
margin-left: 21px !important;
margin-left: 21px;
float: left;
}/----------------------------------------------/
/=Ferramentas/
#ferramentas {
width: 452px;
height: 43px;
position: absolute;
left: 10px;
top: 1100px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #949449;
}/ estilo da lista /
#ferramentas ul {
/width: 452px; /
height: 30px;
padding: 0px;
list-style: none;
text-align: center;
margin-top: 10px;
margin-left: 20px; /* faz o IE entender melhor a margem esquerda */
}/ estilo do texto presente na lista /
#ferramentas ul li {
font-size: 12px;
text-decoration: none;
float: left;
margin-right: 20px;
margin-left: 0px;
}/ icone imprimir /
#ferramentas .imprimir {
background-image: url(icon_imprimir.gif);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFFFFF;
padding-right: 0px;
padding-left: 25px;
height: 18px; /* hack para o IE centralizar verticalmente o icone */
}/ icone voltar /
#ferramentas .voltar {
background-image: url(icon_setaesq.gif);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFFFFF;
padding-right: 0px;
padding-left: 18px;
height: 16px; /* hack para o IE centralizar verticalmente o icone */
}/ icone topo /
#ferramentas .topo {
background-image: url(icon_topo.gif);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFFFFF;
padding-right: 0px;
padding-left: 20px;
height: 18px; /* hack para o IE centralizar verticalmente o icone */
}/ ------------------------------------------- /
/=Rodape - referente a div rodape /
#rodape {
width: 784px;
height: 100px;
background-color: #FFFFFF;
position: absolute;
left: 0px;
top: 1200px;
margin: 0px;
padding: 0px;
clear: both;
}CSS Style
/ formato do link geral /
a:link {
color: #3F3F3F;
text-decoration: none
} color: #3F3F3F;
text-decoration: none
} color: #292914;
text-decoration: underline
} color: #3F3F3F;
text-decoration: none
}/---------------------------------------------/
/=Info - div completa /
/ estilo do capitulador "artigos" /
#info h1 {
background-color: #FFFFFF;
text-indent: 6px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
margin-top: 5px;
padding-bottom: 5px;
margin-left: 2px;
margin-bottom: 15px;
}/ estilo de fonte das informacoes sobre o artigo /
#info p {
font-size: 12px;
color: #1F1F1F;
text-align: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 16px;
}#info h2 {
font-size: 12px;
color: #6B6B6B;
text-align: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
line-height: 16px;
font-weight: normal;
}/---------------------------------------------/
/=Texto - div completa /
/ estilo do titulo do artigo /
#texto h1 {
font-size: 19px;
color: #242424;
font-weight: normal;
font-style: normal;
font-variant: normal;
margin: 0px 10px 20px;
}/ estilo do texto /
#texto p {
font-size: 12px;
color: #1F1F1F;
text-align: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}/---------------------------------------------/
/=Autor - div completa /
/ estilo de fonte da descricao do autor /
#autor p {
font-size: 11px;
color: #484848;
line-height: 15px;
text-align: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 65px;
}/ estilo de borda da imagem do autor /
#autor .imgformato {
margin: 10px 7px 0px;
background-color: #FFFFFF;
padding: 2px;
border: 1px solid #CCCCCC;
float: left;
}/---------------------------------------------/
/=Destaques - div completa /
/ estilo do titulo dos artigos em destaque /
#destaques p {
font-size: 12px;
color: #666666;
line-height: 16px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
float: left;
text-align: left;
display: inline;
width: 80% !important;
width: 85%; /*faz o IE entender melhor o espacamento do titulo do texto */
}/ texto do autor dos artigos em destaque /
#destaques h1 {
font-size: 11px;
color: #996600;
font-weight: normal;
margin-bottom: 15px;
margin-right: 10px;
margin-top: 0px;
padding-left: 40px; /* faz o IE entender o espaçamento*/
float: left;
}/texto do "ver todos os artigos" /
#destaques h2 {
font-size: 13px;
color: #494925;
font-weight: bolder;
width: 270px;
background-color: #DDDDBD;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
margin-top: 30px;
margin-bottom: 0px;
text-align: left;
text-indent: 100pt;
padding-top: 6px;
padding-bottom: 6px;
}XHTML
<!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"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>
<title>Titulo do artigo - Meu Site</title>
<meta name="resource-types" content="document" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="classification" content="education" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="descricao do site" />
<meta name="keywords" content="palavras chave" />
<meta http-equiv="page-enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=1)" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="ALL" />
<meta name="distribution" content="Global" />
<meta name="rating" content="General" />
<meta name="language" content="pt-br" />
<meta name="doc-class" content="Completed" />
<meta name="doc-rights" content="Public" />
<meta name="doc-type" content="Web Page" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" href="arquivos/style_artigos.css" />
<link rel="stylesheet" media="screen" type="text/css" href="arquivos/layout_artigos.css" />
<script language="javascript" type="text/javascript" src="arquivos/componentes.js"></script>
</head>
<body>
<div id="tudo">
<div id="conteudo"> <a name="anctopo" id="anctopo"></a>
<div id="topo">
<iframe name="topo" title="topo" src="topo.asp" marginwidth="0" marginheight="0" scrolling="no" width="780" frameborder="0" height="126"></iframe>
</div>
<div id="info">
<h1><img src="arquivos/titulo_artigos.gif" alt="" width="64" height="18" /></h1>
<p>Sexta-feira, 10 de julho de 2008 - <strong>Por Fulano de Tal</strong></p>
<h2>Seção correspondente: X</h2>
</div>
<div id="texto">
<h1>Titulo do artigo aqui</h1>
<p>Texto completo do artigo </p>
</div>
<div id="autor"> <img src="arquivos/titulo_autor.gif" alt="" width="270" height="18" />
<img src="arquivos/foto_autor.jpg" alt="" width="44" height="54" class="imgformato" />
<p><strong>Fulano de Tal</strong> é formado em...</p>
</div>
<div id="destaques"> <img src="arquivos/barra-artigos_destaque.gif" alt="" width="270" height="61" />
<p class="artigo"><a href="#">Algum titulo aqui</a></p>
<h1>Por: Fulano de Tal</h1>
<div class="clear"></div>
<h2><a href="todosartigos.asp" target="_parent">Ver todos os artigos</a></h2>
</div>
<div id="ferramentas">
<ul>
<li><a href="impressao_modelo.asp" class="imprimir" target="_parent">Verssão
para Impressão</a></li>
<li><a href="index_css.asp" class="voltar" target="_parent">Voltar para
página inicial</a></li>
<li><a href="#anctopo" class="topo" target="_parent">Topo</a></li>
</ul>
</div>
<div id="rodape">
<iframe name="rodape" title="topo" src="rodape.asp" marginwidth="0" marginheight="0" scrolling="no" width="784" frameborder="0" height="100"></iframe>
</div>
</div>
</div>
</body>
</html>Carregando comentários...