Ir para conteúdo

POWERED BY:

Arquivado

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

Neolitic

Layout somente com FLOAT - resolve tudo?

Por , em Desenvolvimento frontend

Recommended Posts

Neolitic    0

Neolitic
Postado

Olá amigos,

 

Estou tentando definir um layout utilizando somente FLOAT. Tudo ia bem até que tentei colocar os três DIVs (DESTAQUE1, DESTAQUE2 e DESTAQUE3) dentro de um ancestral (MAIN). Por favor, executem o código e observem que o DIV MAIN tem a cor da borda vermelha. (... e não esqueçam que o trabalho está incabado!).

 

E agora alguns questionamentos:

1) Por que o DIV MAIN não contém os DIVs denominados DESTAQUE (1, 2 e 3)?

2) Por que esse comportamento não ocorre com o DIV CONTEINER (que contém os demais)?

3) Como sou novo nessa "onda", me expliquem pois ainda não entendi: se é possível criar layouts com tal simplicidade, em que momento se percebe a necessidade (necessidade real e não criada) de ser usar posicion relative e absolute? A algum uso padrão, tudo depende da criatividade do designer, do projeto ou o que?

 

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

 

CÓDIGO CSS

* {	padding:5px;	margin-top: 5px;	margin-bottom: 5px;}body {	font-family: Helvetica, Arial, saens-serif;	font-size: small;	margin:0;	padding:0;	text-align:center; /* hack para o IE */	}#conteiner {	width: 770px;	margin:0 auto;			/*	padding: 7px; */	text-align:left; /* "remédio" para o hack do IE */		border:thin solid black;}#logo {	float:left;	width:312px;	border:thin solid black;}#logo a {	background: url("logoinfrall.gif") no-repeat;	height: 45px;	width: 312px;	display:block;	text-indent:-9000em;	overflow:hidden;}#menu {	float:right;	width:400px;	border:thin solid black;}#menu li {	list-style:none;	display:inline;}#chamada {	clear:both;	border:thin solid black;}#main {	width:auto;	border:thin solid red;}#destaque1 {	float:left;	width:240px;	border:thin solid black;}#destaque2 {	float:left;	width:240px;	border:thin solid black;}#destaque3 {	float: right;	width:240px;	border:thin solid black;}#sub1 {	clear:both;	border:thin solid black;}#sub2 {	border:thin solid black;}#sub3 {	border:thin solid black;}#foot { 	border:thin solid black;}
CÓDIGO XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="pt" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">	<head>		<title>Teste de POSICIONAMENTO</title>		<link media="screen" href="estilo.css" type="text/css" rel="stylesheet" title="Layout Atual" />	</head><body><div id="conteiner">	<div id="logo">		<h1>Posicionando somente com FLOAT</h1>	</div>	<div id="menu">		<ul>			<li><a href="#">OPÇÃO 1</a></li>			<li><a href="#">OPÇÃO 2</a></li>			<li><a href="#">OPÇÃO 3</a></li>			<li><a href="#">OPÇÃO 4</a></li>		</ul>	</div>	<div id="chamada">		<h2>The standard Lorem Ipsum passage, used since the 1500s</h2>		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>	</div>	<div id="main">	<div id="destaque1">		<h3>1914 translation by H. Rackham</h3>		<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>	</div>	<div id="destaque2">		<h3>1914 translation by H. Rackham</h3>		<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>	</div>	<div id="destaque3">		<h3>1914 translation by H. Rackham</h3>		<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>	</div>	</div>	<div id="sub1">		<h3>1914 translation by H. Rackham</h3>		<p>Nam mattis blandit felis. Aliquam sit amet orci quis sem porta aliquet. Aliquam mattis, orci laoreet euismod placerat, tortor purus tempus diam, sit amet egestas nibh arcu sit amet neque. Integer lorem.</p>	</div>	<div id="sub2">		<h3>1914 translation by H. Rackham</h3>		<p>Nam mattis blandit felis. Aliquam sit amet orci quis sem porta aliquet. Aliquam mattis, orci laoreet euismod placerat, tortor purus tempus diam, sit amet egestas nibh arcu sit amet neque. Integer lorem.</p>	</div>	<div id="sub3">		<h3>1914 translation by H. Rackham</h3>		<p>Nam mattis blandit felis. Aliquam sit amet orci quis sem porta aliquet. Aliquam mattis, orci laoreet euismod placerat, tortor purus tempus diam, sit amet egestas nibh arcu sit amet neque. Integer lorem.</p>	</div>	<div id="foot">	<a href="#">OPÇÃO 1</a> / <a href="#">OPÇÃO 2</a> / <a href="#">OPÇÃO 3</a> / <a href="#">OPÇÃO 4</a>	<address>		<a href="http://#" class="logorodape">Posicionando somente com FLOAT</a>	 	</address>	</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Por que o DIV MAIN não contém os DIVs denominados DESTAQUE (1, 2 e 3)?

Você já estudou bastante css? Uma div com float não "empurra" os outros elementos, pois está "flutuando"...Um display:table na div pai resolve isso

Como sou novo nessa "onda"

Onda? Webstandards não é uma "onda"...Recomendo dar uma assistida à tutoriais do assunto:- http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/- http://www.tableless.com.br/video-tutorial...tacao-de-layoutE boa sorte[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Neolitic    0

Neolitic
Postado

Sr. Moderador,

 

Me interesso bastante por padrões web. Na verdade, se fosse como as demais pessoas, afoitas por resultados, já estaria tentando publicar sites inteiros... e provavelmente amargando algum resultado inesperado... Estudo os padrões há bem pouco tempo, tenho comprado livros, leio artigos, já percebi o quanto o assunto é vasto e complexo.

O problema é que sou mesmo um pessoa metódica e como pretendo vender trabalhos com essa expertise, busco exageradamente por fundamentos e certezas. Não quero vacilar.

Concordo que tenho mesmo muito que aprender, mas veja, eu jamais teria conhecido essa sua simples e ao mesmo tempo grande dica se não tivesse colocado a questão. No fundo, o conhecimento vai se solidificando assim mesmo: errando, tentando, perguntando..., não é mesmo? Que bom que existem pessoas como você.

 

Quando usei o termo "onda", não quis dizer "algo passageiro". Me desculpe. Onda, naquele exato momento em que digitava, me remetia a degraus de progressos por que passam as ciências do conhecimento humano. Não, não estou enganando. Veja o que aconteceu com o conhecimento tecnológico a partir da Revolução Industrial. De lá para cá, o que temos, foram transformações (ondas) que nos conduziram até onde nos encontramos. O que virá (quais ondas?) depois?

 

Bom, o senhor ficou tão bravo com a minha expressão que não respondeu à última pergunta. Na verdade, a pergunta se justifica porque ainda não encontrei nenhum artigo que discorra sobre a utilização de layouts com positions relatives e absolutes. O que o sr. me diz?

 

Bom, quero mesmo agradecer-lhe imensamente pela genial dica sobre DIVs e FLOATs, mas quero alertar-lhe que volta e meia estarei por aqui colocando outras questões. Só espero que sejam cada vez mais inteligentes.

 

Grato

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Bom, o senhor ficou tão bravo com a minha expressão que não respondeu à última pergunta. Na verdade, a pergunta se justifica porque ainda não encontrei nenhum artigo que discorra sobre a utilização de layouts com positions relatives e absolutes. O que o sr. me diz?

Não fiquei bravo...Respondendo... em algum projeto que tenha um design mais complexo, ou para driblar alguma limitação do float talvez seja preciso utilizar position, mas eu nunca precisei fazer um site inteiro com position[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cornelius    0

Cornelius
Postado

Um display:table na div pai resolve isso

Então com esse atributo na div pai, o elemento vai flutuar somente dentro nessa div? tentei aqui e não consegui. To apanhando muito. Eu estou tentando colocar duas caixas, que estão dentro de uma div pai, uma do lado da outra. Se alguem me explicar fico grato! flws t+ :rolleyes:

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