Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi gente,
tentei mandar o post, mas acho que não foi, então lá vai ele novamente.
To fazendo um site, que o box do conteúdo sobrepõe parte do rodapé, consegui fazer com que ele fique no final da página como pedido, mas quando eu mudo o tamanho da janela ele desloca a imagem que contem as curvas brancas e azuis do canto inferior esquerdo.
O rodapé é composto por divs que englobam (quadro branco que é continuação do conteúdo, curvas, faixa azul com padrão cinza que se repete, e dados de endereço e marca dágua.
Seguem imagens ilustrando o ocorrido.
html e css
====================================
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.comparotto.com.br/como%2520deve%2520ficar.gif&key=8b20a0df368da2b8e29670713724c19df2cd658387e3e1f293d528f8372cccc2" alt="como%20deve%20ficar.gif" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.comparotto.com.br/Erro.gif&key=abaaaab4f5e6cda0a9a6a491379164e95b42d3d3668d4b2511172cd572cbdb56" alt="Erro.gif" />
======================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href='[http://fonts.googleapis.com/css?family=Junge'](http://fonts.googleapis.com/css?family=Junge) rel='stylesheet' type='text/css'>
<link href="css/oneColFixCtr.css" rel="stylesheet" type="text/css">
<link href="file:///Z|/Arquivos Impacto/Papelaria/Site/Site/favicon.ico" type="image/x-icon" rel="shortcut icon">
<link href="file:///Z|/Arquivos Impacto/Papelaria/Site/Site/favicon.ico" type="image/x-icon" rel="icon">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Escritorio de consultoria tributaria e fiscal, Sao Paulo. Consultoria de negocios. Gestao tributaria, fiscal e contabil, Softwares fiscais, atuacao destacada em processos administrativos e judiciais." />
<meta name="keywords" content="Consultoria, Negocios Fiscais, Sao Paulo, Solucoes em Gestao tributaria, Orientacao Processual, Sistemas fiscais, Acompanhando o crescimento de nossos clientes" />
<title>IBRA - Instituto Brasil</title>
</head>
<div id="wrap">
<body id="body">
<div id="head-container">
<div id="header">
<div class="top-image">
<a href="[http://www.impactonegocios.com.br"](http://www.impactonegocios.com.br) target="_self"><img src="url(../../../../../Arquivos%20IBRA/Ibra/Site/imagens/topo.png" width="1068" height="204" border="0"></a>
</div>
</div>
</div>
<div id="content-container">
<div id="content-container2">
<div id="content-container3">
<div id="menu-content">
<div id="botao">
<ul>
<li class="link-instituto"><a href="#">Instituto</a></li>
<li class="linkobjetivo">Objetivo</li>
<li class="projetos">Projetos</li>
<li class="linkconvenios">Convênios</li>
<li class="linkinformacoes">Informações</li>
<li class="linkcontato">Contato</li>
</ul>
</div>
</div>
<div id="content">
<div id="titulo">
Instituto
</div>
<div align="justify">
<p>O <strong>Instituto Brasil - IBRA</strong>, é uma organização não governamental, sem fins lucrativos - Organização de Sociedade Civil de Interesse Público - OSCIP, registrada no Ministério da Justiça - Processo MJ nº 08015.000449/2003-71, parecer nº 1.666/2003 (publicado no DOU em 18 de março de 2003).</p>
<p>O <strong>IBRA</strong> visa captar recursos, no Brasil e no exterior, para serem aplicados nas seguintes áreas:</p>
• saúde;<br>
• meio ambiente;<br>
• nutrição;<br>
• esporte;<br>
• cultura;<br>
• educação;<br>
• assistência social;<br>
• melhoria de emprego e renda;<br>
• parceria com órgãos públicos.
<p>Todas estas ações buscam um impacto na sociedade que abriga nossos projetos, criando um horizonte de opções na vida dos seus cidadãos. O <strong>Instituto Brasil - IBRA</strong>, é uma organização não governamental, sem fins lucrativos - Organização de Sociedade Civil de Interesse Público - OSCIP, registrada no Ministério da Justiça - Processo MJ nº 08015.000449/2003-71, parecer nº 1.666/2003 (publicado no DOU em 18 de março de 2003). </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-container"><div id="onda">
<div id="dandelion-container">
<div id="dandelion-container2">
<div id="dandelion-conteiner3">
<div id="dandelion">
</div>
</div>
</div>
</div>
<img src="imagens/ondas.png" width="425" height="364">
</div>
<div id="endereco"><img src="imagens/endereco_rodape.png" width="1280" height="78">
</div>
</div>
</body>
<div class="clearfloat">
</div>
</html>==============================
@charset "utf-8";
html, body, #wrap {
height: 100%;
background-image:url(../imagens/padrao.jpg);
}
#wrap {
height: auto;
min-height: 100%;
}[if IE 8]>
#wrap {
display:table;
}body {
font: 100% 'junge', Arial, sans-serif;
margin: 0;
padding: 0;
}
#head-container {
height: 204px;
text-align: center;
}
#header {
height: 204px;
width: 1004px;
margin-right: auto;
margin-left: auto;
}
#menu-content {
display: block;
float: left;
width: 172px;
margin: 0;
padding: 0;
}
#content {
float: right;
width: 655px;
padding: 10px 30px 0 30px;
margin: 0 60px 0 0;
background-color: #FFF;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #b7b7b7;
border-radius: 0 5px 0 0; /*valores geram bordas arredondadas */
z-index: 50;
}
#content-container {
text-align: center;
font-family: 'Junge', Tahoma, Verdana, Arial, serif;
width: 100%;
}
#content-container2 {
margin: 0 auto;
width: 895px;
z-index:15;
}
#content-container3 {
clear: both;
overflow: visible;
height: 100%;
float: right;
width: 949px;
z-index:16;
}p {
color: rgba(34,34,34,1);
}
#titulo {
text-align: left;
font-size: 24px;
width: 100%;
padding: 40px 0 10px 0;
margin: 0 0 10px 0;
color: rgba(102,153,0,1);
border-bottom: dotted #999999 thin;
}
#sub-titulo {
font-size: 18px;
float: left;
width: 100%;
padding: 15px 0 10px 0;
margin: 0;
color: rgba(102,153,0,1);
}
#onda {
height: 364px;
width: 100%;
background-image: url(../imagens/rodape_repeat.png);
background-repeat: repeat-x;
z-index: 20;
}
#footer-container {
margin-top: -200px; /*valor negativo da altura do rodapé */
height: 364px;
}
#endereco {
margin-top: -78px;
height: 78px;
width: 100%;
text-align: center;
z-index: 30;
}
#dandelion-conteiner {
margin-top: -360px;
height: 274px;
text-align: right;
width: 100%;
}
#dandelion-container2 {
width: 895px;
margin-right: auto;
margin-left: auto;
}
#dandelion-conteiner3 {
float: right;
width: 949px;
z-index:25;
}
#dandelion {
width: 880px;
height: 274px;
background-image:url(../imagens/dandelions.png);
background-repeat: no-repeat;
background-position: bottom;
background-color: #FFF;
border-style: solid;
border-width: 0 2px 2px 2px;
border-color: #b7b7b7;
border-radius: 0 0 5px 5px; /*valores geram bordas arredondadas */
margin-right: 60px;
margin-bottom: 3;
margin-left: 0;
clear: both;
float: right;
text-align: right;
}a img {
border: none;
}/ esse seletor remove a borda azul padrão exibida em alguns navegadores ao redor de uma imagem circundada por um link. /
.content {
margin-right: -1px;} /essa margem negativa de 1px pode ser colocada em qualquer uma das colunas nesse layout com o mesmo efeito corretivo. /
Carregando comentários...