Ir para conteúdo

POWERED BY:

Arquivado

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

tchelo.90

Layout "quebra"

Por , em Desenvolvimento frontend

Recommended Posts

Giovani    104

Giovani
Postado

Título do tópico editado conforme Regras do Fórum iMasters

Sai: Preciso de Ajuda... IE "desmonta"

Entra: Layout "quebra"

 

Sobre a sua dúvida, leia o link a seguir e aprenda a criar layout´s corretamente.

http://forum.imasters.com.br/index.php?showtopic=219987

 

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

marcelrizzo    0

marcelrizzo
Postado

OlaEu não sei se você está usando position:absolute só para aplicar o z-index, mas eu faria com float e clear:both.Vou fazer um esquema aqui e já posto.Mas você pode usar os comentários condicionais para IE. Assim ele vai ficar correto no IE também. Vou ver se faço esse esquema também.Boa tarde.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelrizzo    0

marcelrizzo
Postado

Então, fiz rapidinho só pra você ter uma idéia. Dá uma estudada nele. Copia tudo e cola.

 

Eu usei o menu criado pelo GIO! Não é interessante ter um menu em flash.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>		<title></title>		<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />			<meta name="Author" content="Marcel Rizzo" />		<meta name="Copyright" content="© Copyright 2007, EF Furnishings" />			<meta name="Revisit-After" content="2 days" />			<meta name="Keywords" content="" />		<meta name="Description" content="" />		<meta name="Audience" content="All" />		<meta name="Robots" content="INDEX,FOLLOW" />			<meta name="Scooter" content="index, follow" />		<meta name="Yahoo! Slurp" content="index, follow" />		<meta name="FAST-WebCrawler" content="index, follow" />		<meta name="Googlebot" content="index, follow" />		<meta name="Rating" content="General" />		<meta name="Content-Language" content="eng" />		<style type="text/css">*{	padding:0;		margin:0;}body{	text-align:center;}#geral{	width: 760px;		text-align:center;}#topo{	width: 760px;		height: 150px;		background: #ccc;}#nav{	width:760px;		text-align:center;}#menu-horizontal{ font: 90% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; list-style: none; text-align:center;}#menu-horizontal li{ float: left; width: 110px; text-align: center; }#menu-horizontal li a{ background-color: #fff; border-right: 1px solid #ccc; border-left: 1px solid #ccc; color: #666; display: block; padding: 5px; text-decoration: none; }#menu-horizontal li a:hover { background-color: #fafafa; color: #333; }#conteudo-geral{	width:760px;		height:auto;		text-align:center;}#conteudo-div{	width: 650px;		height: 300px;		margin: 30px 0 0 50px;		background: #f2f2f2;	border:1px solid #000;}#cotacoes{	float:left;		width: 150px;		background:#f2f2f2;	margin: 10px 0 10px 0;}#tempo{	float:right;		width: 200px;		background:#ccc;		margin: 10px 0 10px 0;	border:1px solid #000;}#rodape{	clear:both;		background:#f2f2f2;		border-top:1px solid #000;}</style></head><body>	<div id="geral">			<div id="topo">			<h1>Titulo</h1>		</div>						<div id="conteudo-geral">						<div id="nav">				<ul id="menu-horizontal">					<li><a href="#">Item 1</a></li>					<li><a href="#">Item 2</a></li>					<li><a href="#">Item 3</a></li>					<li><a href="#">Item 4</a></li>				</ul>			</div>									<div id="conteudo-div">				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				</p>			</div>									<div id="cotacoes">				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>			</div>									<div id="tempo">				<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 				Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>			</div>						<div id="rodape">				<p> RODAPE</p>			</div>							</div>		</div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelrizzo    0

marcelrizzo
Postado

Estava olhando outras coisas, não entendi isso:

 

#Cont_Princ {	position:absolute;	width:660px;	height:173px;	z-index:3;	left: 188px;	top: 226px;}#Cont_Princ {	background-color: #FFFFFF;	padding: 10px;	border: 2px groove #000066;}

por que não usar todos como CSS externo? Se é para usar de modo diferente em outras páginas, eu usaria uma classe junto com a ID, isso é possível.

 

E isso:

 

#Data {	position:absolute;	width:328px;	height:27px;	z-index:10;	left: 566px;	top: 199px;	visibility: visible;}#data {	position:absolute;	width:315px;	height:17px;	z-index:2;	left: 588px;	top: 203px;}

Isso não se faz. Qual foi sua intenção aqui?

 

Eu não tenho muita prática com flash, mas eu sei que a tag <embed> não tem sido usada. Há outras maneiras de inserir o flash.

 

Também não é interessante usar <br> para espaçamento, use margin que é melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tchelo.90    0

tchelo.90
Postado

Estava olhando outras coisas, não entendi isso:

#Cont_Princ {	position:absolute;	width:660px;	height:173px;	z-index:3;	left: 188px;	top: 226px;}#Cont_Princ {	background-color: #FFFFFF;	padding: 10px;	border: 2px groove #000066;}
por que não usar todos como CSS externo? Se é para usar de modo diferente em outras páginas, eu usaria uma classe junto com a ID, isso é possível.E isso:
#Data {	position:absolute;	width:328px;	height:27px;	z-index:10;	left: 566px;	top: 199px;	visibility: visible;}#data {	position:absolute;	width:315px;	height:17px;	z-index:2;	left: 588px;	top: 203px;}
Isso não se faz. Qual foi sua intenção aqui?Eu não tenho muita prática com flash, mas eu sei que a tag <embed> não tem sido usada. Há outras maneiras de inserir o flash.Também não é interessante usar <br> para espaçamento, use margin que é melhor.
Muito obrigado... foi de grande ajuda suas dicas, até mais

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