Ir para conteúdo

POWERED BY:

Arquivado

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

MetalPhoeniX

2 Colunas

Por , em Desenvolvimento frontend

Recommended Posts

MetalPhoeniX    0

MetalPhoeniX
Postado

Olá pessoal... Não estou conseguindo criar o layout de uma página com TOPO, 2 colunas e rodapé.

Alguêm me ajuda...

Aí vai o código:

 

CSS/* Lálálá... ^^ */*, body, html {	margin : 0;	padding : 0; 	}body {	background-color : #000; 	}/* Isso vai servir para centralizar o design, se eu quiser. =D */#site {	width : 778px;	margin : 0 auto;	background: #000 url(../images/img1.gif) repeat-y;	}/* Aqui determino o topo... */#topo {	position: relative;	width: 778px;	color: #fff;	background: #A0A0A0 url(../images/topo.jpg) center no-repeat scroll;	height: 321px;	}/* Agora o conteúdo + menu... Essa é a parte que tah dando mais trabalho... ¬¬ */#tudo {	width: 778px;	overflow: visible;	}#tudo #menu, #tudo #conteudo {float:left;}#tudo #menu {	width: 148px;	color: #000;	background-color:#fff;	}#tudo #conteudo {	left: 148px;	top: 0px;	width: 630px;	color: #fff;	}/* Vamos ao Rodapé... ^^ */#copyright {	width: 778px;	height: 56px;	color: #000;	background: #aaa url(../images/rodape.gif) repeat-x;	}

HTML<!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><title>Surto.com.br</title><meta name="author" content="MetalPhoeniX" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="Pragma" content="no-cache" /><meta name="robots" content="all" /><meta name="language" content="pt-br" /><link rel="stylesheet" type="text/css" href="estilos/screen.css" /></head><body><div id="site">	<div id="topo"></div>	<div id="tudo">		<div id="menu">			<ul>				<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>				<li>Curabitur sit amet pede non lacus aliquet cursus. </li>				<li>Donec lacinia tempus nibh. </li>				<li>Vestibulum consequat iaculis lorem. </li>				<li>Donec lacinia tempus nibh. </li>				<li>Vestibulum consequat iaculis lorem. </li>				<li>Donec lacinia tempus nibh. </li>				<li>Vestibulum consequat iaculis lorem. </li>				<li>Donec lacinia tempus nibh. </li>				<li>Vestibulum consequat iaculis lorem. </li>				</ul>	  </div>		<div id="conteudo">			<p>Lálálá... </p>			<p>Loren bla bla bla... </p>		</div>	</div>	<div id="copyright"></div></div></body></html>

Desde já agradeço... =)

[]'s

 

OBS: No IE, ele aparece normalz... No FF não...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

teu css tah cheio de coisas desnecessárias. Veja se assim funciona:

CSS:

* {margin : 0;padding : 0;}body { background-color : #000; }#site {width : 778px;margin : 0 auto;background: #000 url(../images/img1.gif) repeat-y;}#topo {color: #fff;background: #A0A0A0 url(../images/topo.jpg) center no-repeat scroll;height: 321px;}#tudo { width: 778px; }#menu {float:left;width: 148px;color: #000;background-color:#fff;}#conteudo {margin-left: 148px;color: #fff;}#copyright {height: 56px;color: #000;background: #aaa url(../images/rodape.gif) repeat-x;clear: both;}
evite sempre utilizar o atributo position quando naum necessário... ;) left, top, sempre tente utilizar margin-left e margin-top... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

outra coisa, estou dizendo sobre isso no segundo artigo, mas num entro ainda... tah demorando mto, mas fazer o q neh... :D a largura padrão eh sempre liquida... ou seja se estende no layout... entuam, se você coloca na #tudo uma largura de 778px, naum eh necessario colocar no #menu e #conteudo o tamanho fixo... eh soh colocar no #menu q o conteudo vai se estender de acordo com o q resta... ;)

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