Ir para conteúdo

POWERED BY:

Arquivado

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

Marcelo Kubart

[Resolvido] Posicionamento de divs

Por , em Desenvolvimento frontend

Recommended Posts

Marcelo Kubart    0

Marcelo Kubart
Postado

Olá pessoal, como vai?

 

Então desenvolvendo um site o layout é esse: Layout

O Problema é o seguinte na montagem do site : Site

 

O três divs de baixo (Serviços, Portfólio e Sobre_contato(união dos dois), não se alinham bem.

 

Não sei o que ocorre no ff os dois laterais se encaixam legal e o do meio fica embaixo do div destaque ou em cima.

No Ie ele posiciona o div central ao lado do div serviços só que não fica centralizado e o div sobre_contato fica abaixo deles.

 

Gostaria que se possível vocês me ajudassem.

Muito Grato!

Marcelo

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo Marcelo, coloque float: left; nas seguintes id's (#port e #sobre_cont). Retire o float: right; do #sobre_cont.

Depois é só você ajustar as medidas da largura para que não dê resultados menos esperados.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

o seu problema não é o Firefox é como você planejou a ordem dos DIVs e o alinhamento pelo Css.

É aquela mesma ideia dos elementos PAIs e filhos que vai ajudar você.

 

Recomendo que você faça isso:

*{
margin:0;
padding:0;
border:0;
}

assim você limpa o seu CSS, pois há:

margin:0;
	padding:0;
	border:0;
em lugares desnecessarios.

 

troque o DOCTYPE pois você escreveu errado, misturou transicional com strict e xhtml com html4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
o correto é assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

depois faça isso(isso é um exemplo):

<div id="corpo">
#corpo{ width:[LARGURA QUE VOCÊ QUER]; }
<div id="pai-1">
<div id="dest">Em destaque float:left;</div>
<div id="news">noticias float:right;</div>
</div>

<div id="pai-2">
<div id="serv">Em destaque float:left;</div>
<div id="pai-3">
<div id="sobre">sem float</div>
<div id="contato">sem float</div>
</div>
<div id="port">portifolio [u][b]"margin: 0 245px;"[/b][/u]</div>
</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

Amigos Webflex e Silverfox,

Muito obrigado pelas dicas realmente o doctype tava errado(kkk). Fiz +/- do jeitos que vocês falaram e consegui o resultado pegou no Netscape, ff, ie, opera, safari.

 

Agora preciso modelar as divs.

 

Muito Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

Amigo Silvefox,

Como vai?

 

Tentei fazer o esquema com div's pai deu tudo errado veja: site.

 

Gostaria de reabrir o tópico.

 

Outra coisa que não entendi é que no IE ele não lê o rodapé.

 

Muito Obrigado Marcelo.

 

Edit(11:55) : Consegui Resolver O problemas para o firefox. Agora não encaixa de jeito nenhum no IE.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

ae amigo muda isso:

#port{	
	height:194px;
	background:#e3eefa;
	margin:0 246px;
	}
o códgo ta todo certo ;) só era umas coisas a mais no CSS que não prescisava.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

Silverfox fiz o que você falou com aquela medida aí nem ficou centralizado. E aí fiz do jeito que está lá. O mais complicado é que o IE parece que não está lendo o código do rodape.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

você poz na margen 252 eu coloquei 246, não aumente tanto a margem assim.

faça como eu postei:

#port{	
	height:194px;
	background:#e3eefa;
	margin:0 246px;
	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

Consegui resolver assim:

 

CODE
#port{

width:244px;

height:194px;

background:#e3eefa;

margin:0 auto;

}

 

Agora o problema que persiste é o rodape que no IE 6 não parece e o espaçamento do div pai-1 com o topo que não aparece

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Eu fiz só que no firefox a margem fica menor de um lado em relação a outra.

veja

amigo aqui fica indentico ambos os lados =/

 

[editado]olha a screen:

http://img68.imageshack.us/img68/1186/37297711mw4.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

você viu se no IE 6 tá dando certo o site? pq aqui não está aparecendo o rodape e não está espaçando os 5px entre topo e pai-1?

 

PS: Pq você não participou do donwload day ontem do FF 3?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

o rodapé está sem formatação.

faça o seguinte amigo:

div#odape{
	width:748px;
	height:40px;
	background:url(img/rodape.png);
	margin-top:5px;
	font:10px Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	text-align:center;
	line-height:20px;
	}
div#odape a{
	color:#CCCCCC;
	font:bold 12px Arial, Helvetica, sans-serif;
	text-decoration:none;
	}
div#odape a:hover{
	color:#CCCCCC;
	font:bold 12px;
	text-decoration:underline;
	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

aqui fica sem a formatação tambem, é estranho =(

 

FF3 está perfeito e ie6 tem uns problemas de margem no link seu atual, tente em alguns casos usar padding:; ao inves de margin, principalmente se tratando do IE

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Kubart    0

Marcelo Kubart
Postado

aqui fica sem a formatação tambem, é estranho =(

 

FF3 está perfeito e ie6 tem uns problemas de margem no link seu atual, tente em alguns casos usar padding:; ao inves de margin, principalmente se tratando do IE

 

BAIXEI O IE 7 e está tudo bem

 

Então usei padding-top: 5px num deu certo tbm não.

 

No IE 6 da problema

 

Fiz o esquema que você disse acima e tbm não funcionou no IE 6

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

o padding deve ser aplicado ao elemento pai e não ao filho, para que tenha efeito de margem no filho.

 

<div style="padding:5px;background:#fc0;">
<div style="background:#c9c9c9;height:50px;">
<p>texto</p>
</div>
</div>

equivaleria a isso(porem margem funciona mal no IE6, no 7 eu ainda não testei):

<div style="background:#fc0;">
<div style="margin:5px;background:#c9c9c9;height:50px;">
<p>texto</p>
</div>
</div>

;)

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