Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Edu3dna

[Resolvido] Rodapé complexo

Por , em Desenvolvimento frontend

Recommended Posts

Edu3dna    0

Edu3dna
Postado

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

====================================

 

como%20deve%20ficar.gif

 

 

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' 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" 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. */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edu3dna    0

Edu3dna
Postado

Oi André!

Obrigado pela resposta, só estou respondendo agora, pois estou sem computador em casa.

 

Então quanto efeito do lado esquerdo preciso que ele se ajuste à tela, por isto fiz ele separado da faixa azul a qual usei repeat.

 

Eu recortei a continuação do conteúdo, onde fica o desenho das flores de dandelion, pois ela precisa acompanhar o conteúdo, não sei se esta foi a forma correta de recordar o layout, sou cabeçudo pra estas coisas.

 

Grato,

Edu

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito