Ir para conteúdo

POWERED BY:

Arquivado

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

ocamargo

DIVs Flutuantes

Por , em Desenvolvimento frontend

Recommended Posts

ocamargo    0

ocamargo
Postado

Galera,

 

Estou tentando criar um layout sem usar tabelas, mas não estou conseguindo posicionar as divs corretamente.

O layout que desejo criar deve ficar igual a este:

 

<html><body><table border="1" width="500">  <tr>	<td width="100%">cabecalho</td>  </tr>  <tr>	<td>	  <table border="1" width="100%">		<tr>		  <td width="100">login</td>		  <td rowspan="2">Conteudo</td>		</tr>		<tr>		  <td width="100">Noticias/Eventos</td>		</tr>	  </table>	</td>  </tr>  <tr>	<td width="100%">rodape</td>  </tr></table></body></html>

E este e o codigo da minha pagina:

 

<!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 runat="server">	<title>Untitled Page</title></head><body style="background-color: #0000FF; margin: 0px 0px 0px 0px;">	<form id="form1" runat="server">	<div>		<div id="cabecalho" style="border: solid 1px #FFFFFF; height: 100px; width: 100%;">Cabecalho</div>		<div>			<div id="login" style="border: solid 1px #FFFFFF; height: 100px; width: 200px; clear:none; float: left; position: relative; margin: 10px 10px 10px 0px;">				login			</div>			<div id="conteudo" style="border: solid 1px #FFFFFF; height: 400px; width: 400px; clear: right; float: none; margin: 10px 0px 10px 10px;">				conteudo			</div>			<div id="noticias" style="border: solid 1px #FFFFFF; height: 100px; width: 100px; clear: none; float: left; position: relative; margin: 10px 10px 10px 0px;">				Noticias/Eventos			</div>		</div>	<div id="cabecalho" style="border: solid 1px #FFFFFF; height: 100px; width: 100%;">Rodape</div>	</div>	</form></body></html>

O problema e que a Div Noticias e Eventos deve ficar embaixo da Div login e do lado esquerdo da Div conteudo de maneira estruturada como no layout das tabelas.

 

Como posso fazer esse posicionamento?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Suissa    1

Suissa
Postado

faaz assim engloba esses 2 divs:

div#esquerda  float: right div#login	float: left div#noticiasdiv#direita div#conteuddo

ve ae se num funciona

 

lembrando q o div#cabecalho precisa dum clear: both

Compartilhar este post

Link para o post
Compartilhar em outros sites

ocamargo    0

ocamargo
Postado

Realmente dessa maneira funciona muito bem.

Mas a impressão que eu tenho e que esta solução não é muito diferente da velha maneira de desenvolver layouts: <table><tr><td><table>......</table></td></tr></table>

 

Desta forma eu também vou ter um cascateamento de DIVs no lugar de Tables. Tudo bem que o codigo esta bem mais limpo.

Mas a minha dúvida é: o XHTML, CSS... (Se alguém souber me dizer o nome correto desta forma de desenvolvimento) não permite que se trabalhe com as divs de maneira tão simples, correto?

 

Por exemplo: o atributo float não tem outras opções além de left e right, certo? E se eu quisesse posicionar uma div ao centro? float: center?

 

Outra dúvida e em relação ao atributo clear. Verifiquei que isso fez certa diferenca no posicionamento das divs. Mas não sei dizer o que. Para que serve exatamente esse atributo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Depois que você pega o jeito é muito simples trabalhar com div´s. Mais fácil do que tabelas, tenha certeza disso.

Mas a minha dúvida é: o XHTML, CSS... (Se alguém souber me dizer o nome correto desta forma de desenvolvimento) não permite que se trabalhe com as divs de maneira tão simples, correto?

Como ao centro?

Se for no centro da da tela, estude sobre o position nesse link.

Se for no centro de um layout veja o link que lhe passei anteriormente.

Por exemplo: o atributo float não tem outras opções além de left e right, certo? E se eu quisesse posicionar uma div ao centro? float: center?

Leia esse link que você vai entender

Outra dúvida e em relação ao atributo clear. Verifiquei que isso fez certa diferenca no posicionamento das divs. Mas não sei dizer o que. Para que serve exatamente esse atributo?

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

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