Problema ao centralizar DIVs no IE

mwebster · Março 2, 2010

Estou desenvolvendo um site para um consultório odontológico, e (pra variar) o IE não facilita a vida.

Pra centralizar os elementos do site, segui essa dica do Maujor: http://maujor.com/dicas/pg_centrada.php

MAS eu não botei a div correspondente ao fundo verde escuro dentro da div "tudo", porque assim ela não fica infinita pra direita (no FF).

No FF está perfeito, como deve ficar: http://img85.imageshack.us/img85/3746/firefoxt.jpg

Mas no IE tá assim: http://img6.imageshack.us/img6/7770/28523370.jpg

O que eu faço pra div "verde" ser exibida no IE como no FF??

 <html>

<body>	
	
		<div id="verde"></div>
			<div id="tudo">
<head><link rel="stylesheet" type="text/css" href="style.css" />

<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>

	<div id="topo"><img src="imagens/topo.png" />

		<div id="menu">
			<ul>
				<li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" border="0" /></a></li>	
				<li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/contato.png" alt="contato" border="0" /></a></li>
			</ul>
		</div>

	</div>

</head>


<div id="content"><img src="imagens/content.png" />

	<div id="dicas"> <img src="imagens/dicas.png" alt="dicas de saude bucal" /> 
		<div id="imagem-dicas"><img src="imagens/sorriso.jpg" /></div>
		<div id="titulo-dicas"><a class="titulo">DICAS DE SAÚDE BUCAL</a></div>
		<div id="texto-dicas"><a class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor commodo commodo. Mauris aliquam vestibulum orci, quis aliquet odio ultricies ut. Aliquam non blandit erat. Aenean semper quam non velit pretium posuere. Curabitur ac adipiscing leo. Duis non libero odio, at fringilla lacus. Duis eget mauris lectus, non lacinia ligula. Aliquam convallis sodales sem ut porta. </a></div>
	</div>

	<div id="convenios">
		<div id="titulo-convenios"><a class="titulo">CONVÊNIOS</a></div>
		<div id="texto-convenios"><a class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor commodo commodo. Mauris aliquam vestibulum orci, quis aliquet odio ultricies ut. Aliquam non blandit erat.<p></p>- Sindicato dos Sapateiros de Dois irmãos e Morro Reuter <br>- Sindicato dos Trabalhadores Rurais de Dois Irmãos</a></div>
	</div>

	

<div id="barra-h"><img src="imagens/barra-h.png" /></div>

<div id="barra-v"><img src="imagens/barra-v.png" /></div>


</div>

<div id="rodape">
	Dra. Gabriela R. Webster Dreher (2010) Todos os direitos reservados.<br>
	Site desenvolvido por Melissa Webster<p></p></a>
</div>

			</div>
		

</body>
</html>

body {
	background-color:#76b87a;
	text-align:center;
	margin:0px;
	border:0px;
	padding:0px;
	bottom:50px;

}


.titulo {
	font-family:Times;
	font-size:20;
	color:#212121;

}

.texto {
	font-family:Times;
	font-size:14;
	text-align:justify;
	color:#212121;
	
}



#verde {
	background-color:002d22;
	height:273px;
	width:100%;
	position:absolute;
	border:none;
	z-index:-1;
	border:0px;
	padding:0px;
}


#tudo {
	width:695px;
	margin:0 auto;
	text-align:left;
	
}


#topo {
	position:relative;
	top:50px;
	z-index:1;
	height:223px;
	width:695px;
	
}



#menu {
	list-style:none;
	position:absolute;
	padding:0px;
	border:0px;
	bottom:0px;
	width:800px;
	height:17px;
	top:182px;
	left:-38px;
	z-index:2;
	
}


#menu ul li{
	display:inline;
	list-style:none;
	padding:0px 3px 0px 3px;
}


#content {
	position:absolute;
	top:273px;
	padding-bottom:60px;

}

#dicas {
	position:absolute;
	top:25px;
	left:25px;
	
}


#titulo-dicas {
	position:absolute;
	top:25px;
	left:25px;
}


#texto-dicas {
	position:absolute;
	top:60px;
	left:25px;
	width:330px;
	text-align:justify;
}


#imagem-dicas {
	position:absolute;
	top:25px;
	right:25px;
	
}


#convenios {
	position:absolute;
	top:300px;
	left:0px;
	height:300px;
	width:500px;
}

#titulo-convenios {
	position:absolute;
	left:48px;
}

#texto-convenios {
	position:absolute;
	top:35px;
	left:48px;
	width:635px;
	
}
	

#barra-h {
	position:absolute;
	top:500px;
	left:0px;
}

#barra-v {
	position:absolute;
	top:530px;
	left:340px;
}

#rodape {
	position:absolute;
	top:1125px;
	width:695px;
	font-family:Times;
	font-size:12;
	text-align:center;
	color:#212121;
}

Obs: se alguém souber dizer o que está acontecendo com o menu no IE, fico muito agradecida!

William Bruno · Março 2, 2010

A estrutura está errada, você está dependendo muito de positions, sem necessidade.

Dá para trabalhar melhor se você fizer com float, margin, padding.. e não usar indiscriminadamente positions, assim. Eles são perigosos, é necessário um certo cuidado e controle para usar de tal forma. Refaça essa estrutura, evitando absolutes, relatives..

Comece teu documento sempre com um css reset

* { margin: 0; padding: 0; }

mwebster · Março 2, 2010

Certo, vou corrigir isso!

Sou iniciante em desenvolvimento (não sabia que os positions eram perigosos). Antes tava usando mais margins e paddings, mas por algum motivo os positions tavam funcionando melhor. Se algum problema continuar, vou postar aqui. Obrigada!

Pelos tutoriais que eu li, entendi como se fosse melhor utilizar positions pra posicionar uma div. Em que casos é melhor utilizar ou não positions?

To tirando os positions aqui, e substituindo por margins, paddings e afins. Mas surgiu um outro problema:

http://img696.imageshack.us/img696/204/menuho.jpg

Por algum motivo, o CSS tá interpretando o menu como algo fora da div "topo". Por que isso tá acontecendo agora?

<html>
<body>	
	
				<div id="verde">
			<div id="tudo">

<head><link rel="stylesheet" type="text/css" href="style.css" />

<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>

	<div id="topo"><img src="imagens/topo.png" />

		<div id="menu">
			<ul>
				<li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" border="0" /></a></li>	
				<li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/contato.png" alt="contato" border="0" /></a></li>
			</ul>
		</div>

	</div>
				</div>
</head>

* { margin: 0; padding: 0; }

body {
	background-color:#76b87a;
	bottom:50px;
}


.titulo {
	font-family:Times;
	font-size:20;
	color:#212121;

}

.texto {
	font-family:Times;
	font-size:14;
	text-align:justify;
	color:#212121;
	
}



#verde {
	background-color:002d22;
	height:273px;
	width:100%;
	z-index:-1;
}


#tudo {

}


#topo {
	padding-top:50px;
	margin:0px;
	z-index:1;
}


#menu ul{
	list-style:none;
	margin:0px;
	z-index:2;
}


#menu ul li{
	display:inline;
	padding:0px 3px 0px 3px;
	z-index:2;
}

William Bruno · Março 2, 2010

Vamos lá... troque:

<html>
<body>

por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
<head>

</head>
<body>

é muito importante ter um DOCTYPE no teu documento.

O IE é preguiçoso, se você não declarar um DTD, ele vai renderizar do jeito que ele quer, e não tentando seguir os padrões.

positions, devem ser usados com cautela, e em pequenos slices, salvos poucos casos, em que alguns efeitos só podem ser conseguidos com eles, mas é necessário ter um controle muito bom, antes de sair aplicando dessa forma. No teu caso, o melhor é estruturar com floats mesmo.

Isso aqui:

<div id="menu">
                        <ul>

é desnecessário, poderia fazer:

<ul id="menu">

<ul> já é um elemento nivel de bloco muito bom. Outra vez, salvos alguns casos, é desnecessária essa marcação extra.

Veja que aqui:

<head><link rel="stylesheet" type="text/css" href="style.css" />

<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>

você colocou tudo no lugar errado.

A linha verde, era melhor você aplicar como background do body. A tua marcação, feita corretamente seria assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
<head>
	<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>		
	<div id="tudo">

		<div id="topo">
			<img src="imagens/topo.png" alt=""/>
			<ul id="menu">
				<li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" /></a></li>
				<li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" /></a></li>
				<li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" /></a></li>        
				<li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" /></a></li>
				<li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" /></a></li>
				<li><a href="#"><img src="imagens/menu/contato.png" alt="contato" /></a></li>
			</ul><!-- /menu -->
		</div><!-- /topo -->
		
	</div><!-- /tudo -->
</body>
</html>

Centralizando corretamente:

#tudo {
	width: 800px;
	margin: 0 auto;
	border: 1px solid #fff;
}

e pode remover todos os

margin:0px;

pois já está no seletor global: *

mwebster · Março 2, 2010

Obrigada William ;]

- Mas por que botar 800px de width da div "tudo" se a largura é menor (uns 645px)? Ficou centralizado mais pra esquerda agora.

- E a div do fundo verde escuro? No HTML a div "topo" ficaria dentro dele?

- O menu continua sendo exibido fora da div "topo" :(

Thiago Retondar · Março 2, 2010

Como está o seu novo HTML e CSS?

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Evandro Oliveira · Março 3, 2010

moça, o "div do fundo verde-escuro" pode ir pro espaço =x

defina a cor de fundo do <body> como o verde mais claro, crie um filete verde-escuro da altura desejada, e poste como background do <body> ao topo, esquerda e repetido em X

http://img163.imageshack.us/img163/4354/53894317.jpg

body { background: green url('filete.jpg') top left repeat-x; }

vou além: este sombreado lateral pode ser o plano de fundo da <div>#tudo, repetido em Y

http://img27.imageshack.us/img27/4259/94233747.jpg

div#tudo { width: 697px; margin: 30px auto 0 auto; background: url('repete-pagina.jpg') top center repeat-y; }

ao invés de <div> como topo, utilze uma <h1>, com o dente ao fundo e o nome da Dentista posicionado no local desejado. para fazer o topo arredondado, basta adicionar um <span> dentro da <h1>

o resultado final fica mais ou menos assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
   <head>
       <title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>
       <link rel="stylesheet" type="text/css" href="style.css" />
   </head>

   <body>          
       <div id="tudo">
           <h1 class="topo"><span></span>Consultório Odontológico Dra. Gabriela R. Webster Dreher</h1>
           <ul id="menu">
               <li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" /></a></li>
               <li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" /></a></li>
               <li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" /></a></li>        
               <li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" /></a></li>
               <li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" /></a></li>
               <li><a href="#"><img src="imagens/menu/contato.png" alt="contato" /></a></li>
           </ul><!-- /menu -->
       </div><!-- /tudo -->
   </body>
</html>

e viva à marcação limpa \o/

William Bruno · Março 3, 2010

- Mas por que botar 800px de width da div "tudo" se a largura é menor (uns 645px)? Ficou centralizado mais pra esquerda agora.

deixei apenas de exemplo, eu não parei para 'medir' a largura exata. Ajuste à sua necessidade

- E a div do fundo verde escuro? No HTML a div "topo" ficaria dentro dele?

não precisa de div de fundo verde escuro, coloque como background apenas.

- O menu continua sendo exibido fora da div "topo" :(

Se você não mostrar como você fez, fica impossível lhe ajudar. Pela marcação que eu fiz, só se o teu CSS estiver ainda estruturado de forma errada, que esse problema aconteceria. Estude !

mwebster · Março 6, 2010

O que tá acontecendo e não achei ainda como resolver é que o CSS não tá exibindo o menu dentro da div "topo".

Tá sendo exibido assim:

http://img94.imageshack.us/img94/9536/consr.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
			
<head>

	<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>
	
<body>	
	
<div id="tudo">
	
	<div id="topo"><img src="imagens/topo.png" />

	
			<ul id="menu">
				<li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" border="0" /></a></li>	
				<li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" border="0" /></a></li>
				<li><a href="#"><img src="imagens/menu/contato.png" alt="contato" border="0" /></a></li>
			</ul>


	</div>

* { margin: 0; padding: 0; }


body {
	background: #76b87a url('imagens/filete.png') top left repeat-x;
	bottom:50px;
}


#tudo {
	width: 695px;
    margin: 0 auto;
}


.titulo {
	font-family:Times;
	font-size:20;
	color:#212121;

}


.texto {
	font-family:Times;
	font-size:14;
	text-align:justify;
	color:#212121;
}


#topo {
	padding-top:73px;
	z-index:1;
}


ul#menu {
	list-style:none;
	z-index:2;
}


ul#menu li{
	display:inline;
	padding:0px 3px 0px 3px;
	z-index:2;
}

Thiago Retondar · Março 6, 2010

Está correto.

A imagem que você está usando deixa esse espaço. Faça o seguinte:

#menu {
        list-style:none;
        margin: -25px 0 0 0;
}

O correto mesmo seria fatiar novamente a imagem.

E cuidado com o z-index. Nesse seu caso ele é totalmente desprezível e só funciona com position (diferente de static, que é default) declarado.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

mwebster · Abril 1, 2010

[desenterrando o tópico]

Fatiei a imagem, tudo ok ;]

Tá tudo certo, só não consegui descobrir porque o conteúdo da div "content" tá sendo exibida fora dela =[ Alguém me dá uma luz?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
			
<head>

	<title>Consultório Odontológico Dra. Gabriela R. Webster Dreher</title>

	<link rel="stylesheet" type="text/css" href="style.css" />

</head>
	
<body>	
	
<div id="tudo">
	
	<div id="topo"><img src="imagens/topo.png" />

		<div id="menu-fundo"><img src="imagens/menu.png" /></div>
				<ul id="menu">
					<li><a href="#"><img src="imagens/menu/inicio.png" alt="inicio" border="0" /></a></li>
					<li><a href="#"><img src="imagens/menu/formacao.png" alt="formação" border="0" /></a></li>
					<li><a href="#"><img src="imagens/menu/tratamentos.png" alt="tratamentos" border="0" /></a></li>	
					<li><a href="#"><img src="imagens/menu/estrutura.png" alt="estrutura" border="0" /></a></li>
					<li><a href="#"><img src="imagens/menu/localizacao.png" alt="localicação" border="0" /></a></li>
					<li><a href="#"><img src="imagens/menu/contato.png" alt="contato" border="0" /></a></li>
				</ul>


	</div>


	<div id="content"><img src="imagens/content.png">

		<div id="dicas"> <img src="imagens/dicas.png" alt="dicas de saude bucal" /> </div>
	
	</div>


	<div id="rodape">
		Dra. Gabriela R. Webster Dreher (2010) Todos os direitos reservados.<br>
		Site desenvolvido por Melissa Webster<p></p></a>
	</div>



</div>
		

</body>
</html>

 * { margin: 0; padding: 0; }


body {
	background: #76b87a url('imagens/filete.png') top left repeat-x;
	bottom:50px;
}


#tudo {
	width: 695px;
    margin: 0 auto;
}


.titulo {
	font-family:Times;
	font-size:20;
	color:#212121;

}


.texto {
	font-family:Times;
	font-size:14;
	text-align:justify;
	color:#212121;
}


#topo {
	padding-top:73px;
	z-index:1;
}


#menu-fundo {
	margin: -5px 0px 0px 0px;
	
}

ul#menu {
	list-style:none;
	margin: -27px 0px 0px 0px;
	z-index:2;
}


ul#menu li{
	display:inline;
	padding:0px 3px 0px 3px;
	z-index:2;
}


#content {
	border-bottom:50px;
}


#dicas {
	border-top:50px;

}




#rodape {
	font-family:Times;
	font-size:small;
	text-align:center;
	color:#212121;
	border-bottom:10px;
}

Thiago Retondar · Abril 1, 2010

Testei o seu código aqui e não conseguir entender o problema.

Ele só tem imagem. Fica difícil ajudar assim.

Posta o link para o site.

De qualquer forma, coloque um clear:both no rodapé.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

mwebster · Abril 1, 2010

http://www.gabrieladreher.com.br

:]

Thiago Retondar · Abril 2, 2010

Entendi.

Isso acontece por que você não usou background e sim img.

Coloque como background.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

mwebster · Abril 3, 2010

Deu certo agora, tá avançando! Mas aconteceu um outro problema que ainda não achei solução:

O site está exatamente com os mesmos documentos HTML e CSS que tenho no meu pc. Quando abro o index.html do meu pc no FF aparece certo, desse modo: http://yfrog.com/ccindexsj

Mas no site www.gabrieladreher.com.br tá sendo exibido assim pra mim: http://yfrog.com/efindexmbj

Por que os dois estariam sendo exibidos diferentes com os mesmos documentos? :huh:

Thiago Retondar · Abril 4, 2010

Estranho...

Mas o certo é content.png e não content.jpg, como está colocado http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.gabrieladreher.com.br/imagens/

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

mwebster · Abril 4, 2010

Bah, eu tinha esquecido de transferir as novas imagens <_< hehe obrigada!

Último problema:

Pro fundo da div "content", eu fiz o seguinte:

#content {
	position:absolute;
	width:695px;
	height:823px;
	background: url('imagens/content.jpg') repeat-y;

}

Mas daí essa imagem em "filete" fica repetindo eternamente, quando na verdade eu queria que o fundo terminasse sempre a uma distância de uns 30px do conteúdo da div, e a imagem "content-final.png" aparecesse colada embaixo pra borda ficar arredondada (é essa a forma correta?).

Já tentei de outras formas, mas não consegui esse resultado.

 * { margin: 0; padding: 0; }



body {
 	background: #76b87a url('imagens/filete.png') top left repeat-x;
    bottom:50px;
}


#tudo {
	width:695px;
    margin:0 auto;
}


#topo {
    padding-top:73px;
}


#menu-fundo {
    margin: -5px 0px 0px 0px;
}


ul#menu {
    list-style:none;
    margin: -27px 0px 0px 0px;
}


ul#menu li{
    display:inline;
    padding:0px 3px 0px 3px;
}


#content {
	position:absolute;
	width:695px;
	height:823px;
	background: url('imagens/content.jpg') repeat-y;

}


#dicas {
	width:642px;
	height:219px;
	background: url('imagens/dicas.png') no-repeat;
    margin:35px 0px 0px 25px;
}


div.titulo-dicas {
    font-family:Times;
    font-size:large;
    color:#3d3d3d;
	float:left;
	margin:10px 0px 0px 10px;
}


div.clear { clear: both; }


div.texto-dicas {
    font-family:Times;
    font-size:medium;
    text-align:justify;
    color:#3d3d3d;
	width:355px;
	float:left;
	margin:20px 0px 0px 10px;
}


#sorriso {
	float:right;
	margin:0px 15px 0px 0px;
	
}


#botao-leiamais {
	float:left;
	width:85px;
	height:17px;
	margin:55px 0px 0px 280px;
	background-color:#c9d3d0;
}


.leia-mais {
	font-family:Times;
    font-size:small;
    color:#3d3d3d;
	width:65px;
	margin:0 auto;
}


#convenios {
	width:642px;
	height:200px;
	margin:20px 0px 0px 25px;
}


div.titulo-convenios {
    font-family:Times;
    font-size:large;
    color:#3d3d3d;
	float:left;
	margin:20px 0px 0px 10px;
}


div.texto-convenios {
    font-family:Times;
    font-size:medium;
    text-align:justify;
    color:#3d3d3d;
	width:620px;
	margin:20px 0px 0px 10px;
}


#localizacao {
	width:300px;
	height:250px;
	margin:10px 0px 0px 25px;
	float:left;
}


div.texto-localizacao {
	float:left;
	font-family:Times;
    font-size:medium;
    color:#3d3d3d;
	margin:20px 0px 0px 10px;
}


div.foto-fachada {
	float:left;
	margin:15px 0px 0px 10px;
}


#botao-localizacao {
	float:left;
	width:140px;
	height:20px;
	background-color:#c9d3d0;
	margin:20px 0px 0px 10px;
	
}

div.texto-botao-localizacao {
	font-family:Times;
    font-size:small;
    color:#3d3d3d;
	margin:0 auto;
	width:125px;
}


div.barra-v { float:left; }


#estrutura {
	width:300px;
	height:250px;
	margin:0px 25px 0px 0px;
	float:right;
}


div.titulo-estrutura {
    font-family:Times;
    font-size:large;
    color:#3d3d3d;
	float:right;
	margin:30px 200px 0px 0px;
}


div.foto-estrutura {
	float:right;
	margin:18px 136px 0px 0px;
}


div.texto-estrutura {
	float:right;
	font-family:Times;
    font-size:small;
	text-align:justify;
    color:#3d3d3d;
	width:240px;
	margin:20px 65px 0px 0px;
}


#botao-estrutura {
	float:right;
	width:180px;
	height:20px;
	background-color:#c9d3d0;
	margin:20px 125px 0px 0px;	
}


div.texto-botao-estrutura {
	font-family:Times;
    font-size:small;
    color:#3d3d3d;
	margin:0 auto;
	width:165px;
}


#rodape {
	float:left;
	top:1px;
	padding-bottom:20px;
	font-family:Times;
    font-size:small;
    text-align:center;
    color:#212121;
    clear:both;
}

Thiago Retondar · Abril 4, 2010

Não seria melhor colocar esse content-final.png no rodapé?

Se não quiser, vai ter que criar uma div só para colocar isso no final da div#content.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

Problema ao centralizar DIVs no IE

Recommended Posts

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

mwebster 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real