Ir para conteúdo

POWERED BY:

Arquivado

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

Woinch

3 colunas

Por , em Desenvolvimento frontend

Recommended Posts

Woinch    0

Woinch
Postado

Olá galera... Peguei alguns tutoriais, fuçei no css mas estou com problemas em fazer um layout como segue o anexo:

 

Imagem Postada

 

Alguém pode me ajudar?

 

Obrigado

abraços! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Woinch    0

Woinch
Postado

Pow cara... andei dando uma lida nos tutoriais mas logo impaquei na primeira parte! lol

 

Da uma olhada no código ae:

 

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Teste</title><style type="text/css">* { margin: 0; padding: 0; }#geral {	background-color: #FFFFFF;	width: 778px;}#topo1 {	float: left;	width: 330px;	height: 83px;	background-color: #FFFFFF; 	border: 1px solid #E5E5E7;}#topo3 {	float: right;	width: 245px; 	height: 83px;	background-color: #FFFFFF;	border: 1px solid #E5E5E7;}#topo2 {	background-color: #FFFFFF;	margin: 0 332px;	width: 200px;	height: 83px;	border-top: 1px solid #E5E5E7;	border-bottom: 1px solid #E5E5E7;}#topo4 {	float: left;	width: 330px;	height: 200px;	background-color: #FFFFFF;	border-left: 1px solid #E5E5E7;	border-bottom 1px solid #E5E5E7;}#topo6 {	float: right;	width: 245px;	height: 200px;	background-color: #FFFFFF; 	border-left: 1px solid #E5E5E7;	border-right: 1px solid #E5E5E7;	border-bottom 1px solid #E5E5E7;}#topo5 {	background-color: #FFFFFF;	margin: 0 331px;	width: 200px;	height: 200px;	border-bottom: 1px solid #E5E5E7;}</style></head><body><div id="geral">	<div id="topo1"><img src="images/topo1.jpg" width="330" height="83" /></div>	<div id="topo3"></div>	<div id="topo2"><div align="center"><img src="images/relogio.jpg" width="15" height="15" /> 24 de junho de 1989.</div></div></div>	<div id="topo4"><img src="images/einstein.jpg" width="330" height="200" /></div>	<div id="topo6">		<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="245" height="200" id="flash" align="middle">			<param name="allowScriptAccess" value="sameDomain" />			<param name="movie" value="images/flash.swf" />			<param name="quality" value="high" />			<param name="bgcolor" value="#ffffff" />			<embed src="images/flash.swf" quality="high" bgcolor="#ffffff" width="245" height="200" name="flash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />		</object>	</div>	<div id="topo5"><img src="images/logo.jpg" width="200" height="200" /></div></div></body></html>

Fica todo desalinhado no IE e no firefox fica melhorzinho!

 

Pode me ajudar?

 

Obrigado pela atenção!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Woinch,

 

O micox usou uma palavra esses dias que era - div mania - ou seja, utlizar muitas div´s.

Não sei o q você vai colocar ai no seu site, mas pelo código q você postou ai...acho q tem muita div. <_<

 

Sugiro q releia todos os artigos do bruno, sobre posicionamento, até cansar.

você conhece o site do maujor, pois é, dá uma olhada nesse link. Se puder, leia ele todo tb, com certeza irá ajudar muito você! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

E para complementar, se puder, coloque um link e não o código, isso vai fazer com que a ajuda aqui do pessoal do forum seja mais rápida!

 

Abraços! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

editado: tinha esquecido, aqui tem mais alguns, poucos, links interessantes. Recomendo a todos q entrarem nesse tópico que leiam!

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