Ir para conteúdo

POWERED BY:

Arquivado

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

ALT

Posicionamento

Por , em Desenvolvimento frontend

Recommended Posts

ALT    0

ALT
Postado

Pessoal,

 

Li um monte de artigos, dicas e etc... realmente tentei não postar esse tipo de dúvida. Mas como não consigo resolver esse bug, e esse é o meu primeiro projeto em tableless, então vamos lá.

 

O meu problema é com o posicionamento do container central (num layout 3 colunas), no IE. Se eu deixo as margens com 0px auto, ele fica por baixo da div da coluna da esquerda, bom então tentei setar um valor fixo, nesse caso 160px, fica centralizado, mas não fica colado no topo, e sim abaixo de tudo. No Firefox fica (aparentemente) perfeito das duas formas.

 

eis o html

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="css/css.css" rel="stylesheet" type="text/css" /></head><body><div id="site">  <div id="topo">	<div>logo</div>   	<div>menu</div>  </div>  <div id="conteudo">	<div id="esquerda">	  <div>op1</div>	<div>op2</div>	<div>op3</div>	<div>op4</div>	<div>op5</div>	<div>op6</div>	<div>op7</div>	<div>op8</div>  </div>	  	  <div id="centro">		<div id="destaque">		  <div>dest_1</div>			<div>dest_2_3</div>				<div>dest_2</div>				<div>dest_3</div>		  </div>		  <div>			<div>not_c_1</div>			  <div>not_c_2</div>		  </div>		  <div>			<div>dest_4</div>			<div>dest_5</div>			<div>dest_6</div>			<div>dest_7</div>			<div>dest_8</div>			<div>dest_9</div>		  </div> 	   </div>	  	  <div id="direita">		<div>op1a</div>		  <div>op2a</div>		  <div>op3a</div>		  <div>op4a</div>		  <div>op5a</div>		  <div>op6a</div>	 	  </div>  </div>    <div id="rodape">rodape    </div></div></body></html>

e o css

@charset "utf-8";/* CSS Document */* { border: 1px solid #f00; } /*  borda para identificação  */  @import url("reset.css");#site {	margin: 0 auto;	width: 790px;	top: 0px;	}#topo {	margin: 0 auto;	width: 740px;	top: 0px;	background-color:#CCCCCC;}#rodape {	margin: 0 auto;	width: 740px;	background-color:#CCCCCC;	bottom: auto;}#conteudo {	margin: 0 auto;	width: 740px;	top: 0px;	position:relative;	}#esquerda {	width: 140px;	top: 0px;	background-color:#FFFFCC;	float:left;}#centro {	width: 420px;	margin: 0px auto;	top: 0px;	background-color: #99FFCC;}#direita {	width: 140px;	top: 0px;	float: right;	background-color:#FFFFCC;	position: absolute; 	right:0px;}#destaque {	top: 0px;	background-color:#CC9900;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

ALT, por esse código que você passou já posso adiantar uma coisa, precisas estudar mais as css.

Não deve-se confundir div's com células de tabelas, foi o que você fez nesse código. Pesquise sobre divmania aqui no fórum que você vai entender.

 

Sobre layout's, aqui no fórum temos um material explicando como fazer, olhe o link:

Layout 3 colunas

 

Qualquer dúvida, por favor, volte a postar.

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

ALT    0

ALT
Postado

Sei que está bem estranho esse monte de DIV (e possivelmente 'errado'), mas esse layout é bem complexo, é uma espécie de portal, cada uma dessas divs é um box com uma imagem de top, uma de bg tb, e texto e imagem, ao todo são mais de 20, além disso é composto por várias listas e texto, coloquei esse monte de divs para depois me orientar na montagem final, porque todas os boxs estão definidos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kikitten    0

Kikitten
Postado

Mas se você começa do jeito errado ... depois fica difícil consertar ^^E tudo você pos "margin: 0 auto" pra que?Se é para centralizar o layout você usa isso apenas na div "site"Sem falar na organização dos conteudos... cade os "floats"?Com certeza estude mais CSS ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Estude mais os princípios de layout xHTML e CSS:

 

- http://www.web2ponto0.com.br/tutorial-layo...pleto-xhtmlcss/

- http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

 

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

 

[]'s

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