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>Valeu cara pela dica. Vou fuçar o link que você me passou.
Estou iniciando no mundo CSS e Tableless, já peguei a manha da coisa mas tem uns pequenos detalhes que ainda estou me batento como layout e o tal pocisionamento por "empurrão".
Qualquer coisa volto aqui no tópico.
Um abraço.
:)
Poxa li o artigo... fiz até umas interferências no meu código mas n deu certo.
Novamente o rodapé não está legal. Vou resumir o XHTML pra vcs terem uma idéia. Vai em anexo o CSS também.
Saquei algumas coisas, mas estou me batendo feio com esse problema. Vejam aí
XHTML
<div id="tudo">
<div id="topo">
</div>
<div id="conteudo">
<div id="info">
</div>
<div id="texto">
<div id="ferramentas">
</div>
</div>
<div id="barradir">
<div id="autor">
</div>
<div id="destaques">
</div>
</div>
</div>
<div id="rodape">
</div>
</div>CSS
body {
margin:20px 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;
text-align:left;
position: relative;
}
#conteudo {
width: 784px;
height: 1300px;
background:#FFFFFF;
padding-bottom: 50px;
}/ ------------------------------------------- /
/=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;
}/---------------------------------------------/
/=Barradir - div completa /
#barradir {
width: 270px;
position: absolute;
left: 510px;
top: 180px;
text-align: left;
}
#autor {
background-color: #EDECEC;
padding-bottom: 10px;
}
#destaques {
margin-top: 25px;
background-image: url(bg_btextos.jpg);
background-repeat: repeat-x;
background-position: left bottom;
background-color: #F4F4EA;
float: right;
/* valores antigos
top: 350px;
right: 4px;
left: 510px; */
}#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;
margin-top: 50px;
margin-left: 10px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #949449;
}/ estilo da lista /
#ferramentas ul {
/width: 452px; valor antigo /
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;
margin: 0px;
padding: 0px;
clear: both;
}adicione isso no seu arquivo
html, body {
height: 100%;
}* html #tudo {height: 100%;}
#tudo {
min-height: 100%;
}Nada meu velho.... inseri o código CSS que você me passou mas quando vou testar.... não dá certo.
:(
>
Nada meu velho.... inseri o código CSS que você me passou mas quando vou testar.... não dá certo.
:(
Verifique o uso do position: absolute;
pode ser que ele esteja atrapalhando o layout!
poste um link também
abraço
Bom o site ainda não está na web, mas improvisei um upload aqui pra vcs terem uma idéia.
Confiram aí meu problema:
http://www.4shared.com/file/68881535/9d690...oblema_css.html
Não consegui identificar o problema ainda... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif
Testei no Firefox e no IE7, mas não vi nada de errado com o layout que você enviou. Pode ser mais específico?
Olha só o problema é na div do rodapé. Vou explicar.
A div #texto se expande na vertical de acordo com o tamanho do texto dentro dela. As divs #barradir, #autor e #destaques fazem a mesma coisa.
Existe uma a div #conteudo que emgloba quase tudo.... e a intenção é que ela se extenda verticalmente, forçando o rodapé a ficar na parte de baixo.
O problema é: a div #rodape n é forçada a descer automaticamente quando as divs anteriores mencionadas "engordam" entende?
:(
Não entendi ainda...
Não tem como você dar um printscreen de ambas as situações? Uma normal e uma com mais conteúdo? :mellow:
Outra coisa, leia este material aqui:
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Layout fixo 3 colunas
Seguindo os passos descritos neste tutorial, você deixa de utilizar position:absolute e passa a ter mais controle sobre seu layout.
Se for necessário, reveja toda sua estrutura, recomece. Muitas vezes perdemos mais tempo tentando resolver algo do que simplesmente recomeçando, só que de uma maneira mais adeqüada...
http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif
Bom tinha até esquecido de fazer as prints... bem lembrado.
Abaixo vão os links das prints. O primeiro link mostra um texto qualquer, respeitando o layout do site.
O segundo link, mostra um texto maior, não "respeitando" o layout do site. Eu gostaria que o rodapé do site se movesse de acordo com o tamanho do texto. O objetivo é deixar ele sempre abaixo do texto, e deixando o layout correto. É isso.
Vou ler o link que você mandou, pra ver se ilumina aqui, enquanto vcs olham as imagens que mandei.
:(
Link 1
http://www.4shared.com/file/69135197/f74bd...int_css_01.html
Link 2
http://www.4shared.com/file/69135239/e85aa...int_css_02.html
Como já foi dito anteriormente pelo nosso amigo Aprendiz CSS, o uso desnecessário da propriedade position:absolute realmente pode ser o problema. Se você seguir o tutorial que indiquei, irá resolver seu problema. Agora, tentando mudar o seu código mesmo, tente isso aqui:
>
/=Rodape - referente a div rodape /
#rodape {
width: 784px;
height: 100px;
background-color: #FFFFFF;
**position: absolute; «-- REMOVA ESTA LINHA!**
margin: 0px;
padding: 0px;
clear: both;
}Obs.: Eu não testei, ok?
Tente aí, qualquer coisa, volte a postar!
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Bom pessoal estou quase com o problema resolvido.
Li novamente os links que vcs me mandaram e fui estudando os códigos dos seus exemplos. Mexe aqui, mexe ali... consegui chegar onde queria. Só falta uma coizinha: a div #barradir fica desalinhada, então precisei deixar a margem de topo como negativa. Tentei deixar com margem 0, mas n deu certo.
Arranquei o position: absolute; de uma boa parte do CSS, realmente ele estava atrapanhando.
A alteção do CSS ficou assim
body {
margin:20px 0px;
padding:0;
text-align:center;
min-width: 800px; /* hack para bug do Netscape*/
background:#3a3a3a url(arquivos/bg.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}/ ------------------------------------------- /
/ codificacao nova, dica imasters /
html, body {
height: 100%;
}* html #tudo {height: 100%;}
#tudo {
min-height: 100%;
}#tudo {
width: 784px;
background:#FFFFFF;
margin:0 auto;
padding: 0px;
text-align:left;
position: relative;
}
#conteudo {
width: 784px;
text-align: left;
background-color: #FFFFFF;
float: left;
padding-bottom: 80px;
margin-top: 0px;
margin-left: 0px;
min-height: 1250px !important;
}/ ------------------------------------------- /
/=Topo - referento ao conteudo do topo /
#topo {
width: 780px;
height: 127px;
padding: 0px;
background-color: #FFFFFF;
border-top: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}/fim------------------------------------------- /
/---------------------------------------------/
/=Info - div com o conteudo completo /
#info {
width: 474px;
height: 89px;
text-align: left;
margin-top: 41px;
padding-left: 6px;
background-color: #FFFFFF;
float: left;
}/---------------------------------------------/
/=Texto - div completa /
#texto {
width: 465px;
text-align: left;
background-color: #FFFFFF;
margin-top: 36px;
padding-left: 6px;
float: left;
padding-bottom: 50px;
}/fim-------------------------------------------/
/---------------------------------------------/
/=Barradir - div completa /
#barradir {
width: 270px;
text-align: left;
float: right;
margin-top: -79px; /* aqui precisei colocar como negativo para alinhar corretamente o layout */
padding-right: 4px;
}
#autor {
background-color: #EDECEC;
padding-bottom: 10px;
}
#destaques {
margin-top: 25px;
background-image: url(arquivos/bg_btextos.jpg);
background-repeat: repeat-x;
background-position: left bottom;
background-color: #F4F4EA;
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(arquivos/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;
margin-top: 50px;
margin-left: 10px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #949449;
}/ estilo da lista /
#ferramentas ul {
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(arquivos/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(arquivos/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(arquivos/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;
margin: 0px;
padding: 0px;
clear: both;
}A alteção do XHTML ficou assim
<!-- inicio #tudo -->
<div id="tudo">
<!-- inicio #topo -->
<div id="topo">
</div>
<!-- fim #topo -->
<!-- inicio #conteudo -->
<div id="conteudo">
<!-- inicio #info -->
<div id="info">
</div>
<!-- fim #info -->
<!-- inicio #texto -->
<div id="texto">
<h1>titulo</h1>
<p>texto</p>
<!-- inicio #ferramentas -->
<div id="ferramentas">
</div>
<!-- fim #ferramentas -->
</div>
<!-- fim #texto -->
<!-- inicio #barradir -->
<div id="barradir">
<!-- inicio #autor -->
<div id="autor">
</div>
<!-- fim #autor -->
<!-- inicio #destaques -->
<div id="destaques">
</div>
<!-- fim #destaques -->
</div>
<!-- fim #barradir -->
</div>
<!-- fim #conteudo -->
<!-- inicio #rodape -->
<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>
<!-- fim #rodape -->
</div></body>
</html>Aqui vai o link com as alterações que fiz:
http://www.4shared.com/file/69262183/3a9ee..._resolvido.html
O problema é:
Regular a div #barradir para se alinhar corretamente, sem precisar da margem negativa.
Sim.... e aí pessoal tem algum problema?
Na div #barradir coloquei:
margin-top: -79px;
A margem negativa é pra ficar alinhada corretamente, pois quando eu coloco 0px ela fica por baixo e desalinhada.
E então tem algum problema em ficar assim ou tem um outra forma?
Um abraço
Eu até tentei encontrar o causador do problema, mas o código tá bastante confuso, e não consegui... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif
Problemas mesmo acredito que não há, mas isso acaba ficando mais ou menos como uma "gambs", manja? O ideal é encontrar exatamente o que causa esse espaçamento na parte superior...
Leia isso
http://aprendacss.wordpress.com/2008/10/13...e-da-resolucao/
Acho que resolverá os dois problemas
abraço