Primeiro site sem tabelas

Lethal · Maio 9, 2007

Estou desenvolvendo meu primeiro site sem usar tabelas para a montagem do template.

Estou tento algumas dificuldades, e se possível gostaria de contar com a ajuda de vocês.

Fiz o site todo só visualizando no Firefox, e quando abro ele no IE, uma surpresa, estava muito diferente, totalmente errado.

Algumas coisas consegui resolver, mas outras...

Ai vai o código:

CSS

/* -------------------------------------------------------------------------------		General--------------------------------------------------------------------------------- */body {		color: rgb(160,160,160);		background: url(../images/bg-body.png) rgb(35,35,35) top left repeat-x;		font:13px arial,helvetica,clean,sans-serif;		*font-size:small;		*font:x-small;}body * { line-height:1.22em; }select, input, textarea { font:99% arial,helvetica,clean,sans-serif; }pre, code { font:115% monospace;*font-size:100%; }body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { margin:0;padding:0; }fieldset,img{ border:0; }address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal; }ol,ul { list-style:none; }caption,th { text-align:left; }h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal; }q:before,q:after { content:''; }abbr,acronym { border:0; }input, textarea { 		padding: 2px;		color: rgb(160,160,160);		background-color: rgb(45,45,45);		border: 1px solid rgb(60,60,60);		vertical-align: middle;}select {background-color: rgb(45,45,45);color: rgb(160,160,160);}a:link, a:visited {		color: #FEC018;		text-decoration: underline;}a:hover {		color: #aaaaaa;		text-decoration: underline;}/* -------------------------------------------------------------------------------		Header--------------------------------------------------------------------------------- */#wallkergrouplogo {		background: url(../images/top.gif) top left no-repeat;		height:133px;		width: 513px;		margin:0 auto;		padding:0;}#header-outer {		margin: 10px 0 0 0;		padding: 0;		border-top: 1px solid rgb(60,60,60);		background: rgb(17,17,17);		background-image: url(../images/bg-header-shadow.png) top repeat-x;}#header {		position: relative;		height: 130px;		margin: 0 auto;		padding: 0 30px;		width: 750;}#logo {		position: absolute;		top: 30px;		left: 738px;}#image-menu {		position: relative;		background: url(../images/eyeglass.jpg) top center no-repeat;		height: 205px;		width: 750px;		padding: 10px 30px 30px 10px;		margin-top: 30px;}#image-menu h1 {		font-size: 100%;		font-weight: normal;		border: none;		margin: 0 0 1em 0;		padding: 1em;		color: rgb(160,160,160);		line-height: 1.5em;		background-color:#000000;		width: 233px;}#menu {	list-style:none;	padding-left:33px;	margin-left:8px;}#menu li {	font-size:1.2em;	letter-spacing:0.05em;	text-indent:20px;	text-transform:uppercase;	white-space:nowrap;	font-weight: bold;	border-bottom:1px dotted #2D2D2D;	padding-bottom: 5px;	width: 233px;	padding-top: 5px;	background: url(../images/arrow.gif) no-repeat 5px 12px;	padding-left:15px;}#menu .noborder {	font-size:1.2em;	letter-spacing:0.05em;	text-indent:20px;	text-transform:uppercase;	white-space:nowrap;	font-weight: bold;	padding-bottom: 5px;	width: 233px;	padding-top: 5px;	border:0;}#menu a, #menu li{	color:#A0A0A0;	text-decoration:none;}#menu li:hover {	color:#FEC018;	text-decoration:none;	background: #2D2D2D url(../images/arrow-hover.gif) no-repeat 5px 12px;}#menu a:hover {	color:#FEC018;}#border-top-outer {		background: rgb(35,35,35) url(../images/bg-header-shadow.png) top repeat-x;		margin: 0;		padding: 0;		width: 100%;}#border-top {	margin: 0 auto;	padding: 0;	width: 100%px;	overflow: hidden;}/* -------------------------------------------------------------------------------		Content--------------------------------------------------------------------------------- */#content {		clear: both;		color: #AAAAAA;		background-color: rgb(17,17,17);		border-bottom: 2px solid rgb(10,10,10);		border-top: 1px solid rgb(10,10,10);}#box-email {		margin-right: 30px;		width: 380px;		float: left;}#box-im {		margin-right: 0px;		width: 290px;		float: right;}#box-501 {		margin-right: 30px;		width: 340px;		float: left;}#box-502 {		margin-right: 0px;		width: 357px;		float: right;}#box-monitor {		margin-right: 30px;		width: 200px;		float: left;}#box-monitor2 {		margin-right: 0px;		width: 550px;		float: right;}#box-tooltip {		width: 750px;		border: 1px solid #303030;		background-color: #212121;		height:20px;		display:table-cell;		vertical-align:middle;		display:table-cell;		padding:5px;		vertical-align:middle;}#box-first, #box-third {		margin: 0 auto;		padding: 30px;		width: 743px;}#box-second {		margin: 0 auto;		padding: 30px;		width: 710px;		background-color: #2D2D2D;		border: 2px solid #3C3C3C;}#box-news {		margin-right: 30px;		width: 285px;		float: left;}#box-home-message {		margin-right: 0px;		width: 425px;		float: right;}		#box-monitors {		margin-right: 30px;		width: 280px;		float: left;}#box-referrals {		margin-right: 30px;		width: 234px;		float: left;}#box-forums {		width: 168px;		float: right;}#box-all {		margin-right: 30px;		width: 750px;		float: left;}			#box-plan-diary {		margin-right: 30px;		width: 325px;		float: left;}#box-plan-weekly  {		margin-right: 30px;		width: 325px;		float: left;}	#box-first h2, #box-third h2 {	border-bottom: 1px solid #3c3c3c;	font-weight: bold;		margin-bottom: 1em;	padding-bottom: 0.25em;	font-size: 100%;	color:#FEC018;}#box-news h3, #box-forums h3, #box-501 h3 {	background: url(../images/more.jpg) left no-repeat;	width: 45px;	padding-left: 7px;	height:23px;	padding-top:6px;	float:right;	background-color: 0;}#box-referrals td {background-color: #505050;}#box-first, #box-third p {	font-size: 100%;}#box-first, #box-third li {	font-size: 100%;}#footer-small-print-wrap p {	font-size: 100%;}#box-first, #box-third a:link, #content a:visited {		border: 0;}#box-forums a {	color: rgb(160,160,160);	text-decoration: none;}	#box-forums a:hover {		background-color: #292929;}#box-forums li {	background: url(../images/arrow-forums.gif) no-repeat 0px 3px;	padding-left:17px;}#box-news a, #box-501 a {	color: rgb(160,160,160);	text-decoration: none;}#box-news a:hover, #box-501 a:hover {		color: rgb(160,160,160);		text-decoration:underline;}#box-news h4 {	font-size: 0.7em;	font-weight:bold;}/* -------------------------------------------------------------------------------		Footer--------------------------------------------------------------------------------- */#footer-outer {		clear: both;		padding: 0 30px;		background-image: url(../images/bg-header-shadow.png) top repeat-x;}#footer {		position: relative;		margin: 0 auto;		padding: 30px 0 15px 0;		width: 750px;}#footer-lists-wrap li {		line-height: 1.5em;}#footer p {		padding-left: 48px;		background: url(../images/wg-footer.gif) center left no-repeat;		text-align: center;}#footer a {	margin-bottom: 1em;	padding-bottom: 0.25em;	font-size: 100%;	color:#FEC018;}/* -------------------------------------------------------------------------------		Tabelas--------------------------------------------------------------------------------- */.row11 { background-color: #DAE9B9; }.row12 { background-color: #E2EFC9; }.row1 { background-color: #E6E6CE; }.row2 { background-color: #EFEFD5; }.row5 { background-color: #F0F0F0; }#table {  clear: both;  background-color: #111111;  border: 1px solid #232323;}#table th {  text-align: left;  background-color: #171717;  padding: 2px;  height: 20px;}#table .row1 {  background-color: #232323;}#table .row2 {  background-color: #FFF;}

HOME

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<meta http-equiv="Content-Language" content="en">		<meta http-equiv="imagetoolbar" content="false">		<meta name="MSSmartTagsPreventParsing" content="true">		<meta name="description" content="Wallker Group has been developed for those who are looking for a leadership,stable and reliable program on the Internet to invest.">		<meta name="robots" content="all">		<link rel="stylesheet" type="text/css" href="css/style.css">	<!--[if IE]>		<link rel="stylesheet" href="css/hacks.css" />	<![endif]-->		<title>wallkergroup</title>	</head>	<body>		<div id="header-outer">			<div id="header">				<div id="wallkergrouplogo">				</div>			</div> 		</div><center><div id="border-top-outer">				<div id="border-top">								<div id="image-menu" align="left">						<ul id="menu">																				<ul>														  <li><a href="?a=home" title="About Group">Menu1</a></li>						  </ul>							<li><a href="?a=terms" title="Terms">Menu2</a></li>														<li><a href="?a=faq" title="FAQ">Menu3</a></li>							<li><a href="?a=signup" title="Sign Up">Menu4</a></li>							<li><a href="?a=login" title="Login">Menu5</a></li>							<li class="noborder"><a href="?a=support" title="Contact Us">Menu6</a></li>						</ul>			  </div> 					</center>		</div>			   </div> 			   </div> 		<div id="content">			<div id="box-first">				<div class="clearfix">					<div id="box-news">						<h2>Blááá</h2>						<p>blá blá blá blá </p>						<h3><a class="more" href="?a=news">More</a></h3>					</div>					<div id="box-home-message">						<h2>Welcome</h2>						<p>							blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá <br />						</p>					</div>					</div>			</div>			<div id="box-second">				<div class="clearfix">					<div id="box-plan-diary">						<b>Blááááá</b><br />						<p>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p>					</div>					<div id="box-plan-weekly">						<b>Bléééééé</b><br />						<p>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p>					</div>					</div>			</div>			<div id="box-third">				<div class="clearfix">					<div id="box-monitors">						   <img src="images/monitor.gif" /><br />						   <img src="images/stats.gif" />					</div>					<div id="box-referrals">						<h2>Blíííííí</h2>						<p>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p>						<p> </p>						<table id="table" width="100%" cellpadding=2 border=0>						<tbody>						  <tr colspan="2">							<th width="124">Tabela1							<th width="135">Tabela2						  </tr>						  <tr class="row1">							<td>blá blá blá blá </td>							<td>blá blá blá blá </td>						  </tr>						  <tr class="row1">							<td>blá blá blá blá </td>							<td>blá blá blá blá </td>						  </tr>						  </tbody>						</table>						<p> </p>					</div>						<div id="box-forums">						<h2>Blóóóóóó</h2>						<ul>							<li><a href="http://www.google.com.br/">blá blá blá blá </a></li>							<li>blá blá blá blá </li>							<li><a href="http://www.google.com.br/">blá blá blá blá </a></li>							<li><a href="http://www.google.com.br/">blá blá blá blá </a></li>							<li><a href="http://www.google.com.br/">blá blá blá blá </a></li>													</ul>						<br />						<h3><a class="more" href="http://www.google.com.br">More</a></h3>					</div>				</div>			</div>		</div>		<div id="footer-outer">			<div id="footer">				<p>					<a href="?a=home">Home</a> |					<a href="?a=rules">Terms</a> |					<a href="?a=faq">FAQ</a> |					<a href="?a=signup">Sign Up</a> |					<a href="?a=login">Login</a> |					<a href="?a=support">Contact Us</a>					<br />					Copyright 2007 WallkerGroup. All rights reserved.					<br />   				</p>				<br /><center><img src="images/buttons/database.gif" /><img src="images/buttons/ddos.gif" /><img src="images/buttons/linux.gif" /><img src="images/buttons/support.gif" /><img src="images/buttons/ssl.gif" /></center>			</div>		</div>	</body></html>

ACCOUNT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">		<meta http-equiv="Content-Language" content="en">		<meta http-equiv="imagetoolbar" content="false">		<meta name="MSSmartTagsPreventParsing" content="true">		<meta name="description" content="Wallker Group has been developed for those who are looking for a leadership,stable and reliable program on the Internet to invest.">		<meta name="robots" content="all">		<link rel="stylesheet" type="text/css" href="css/style.css">	<!--[if IE]>		<link rel="stylesheet" href="css/hacks.css" />	<![endif]-->		<title>wallkergroup.com</title>	</head>	<body>		<div id="header-outer">			<div id="header">				<div id="wallkergrouplogo">				</div>			</div> 		</div><center><div id="border-top-outer">				<div id="border-top">								<div id="image-menu" align="left">						<ul id="menu">							<li><a href="?a=home" title="About Group">menu1</a></li>							<li><a href="?a=account" title="Account">menu2</a></li>							<li><a href="?a=deposit" title="Deposit">menu3</a></li>							<li><a href="?a=withdraw" title="Withdraw">menu4</a></li>							<li><a href="?a=referals" title="Referrrals">menu5</a></li>							<li class="noborder"><a href="?a=logout" title="Logout">menu6</a></li>																				</ul>					</div> 					</center>		</div>			   </div> 			   </div> 		<div id="content"><div id="box-first"><div class="clearfix"><div id="box-501"><h2>blá blá blá blá </h2><table cellpadding=2 border=0 width="100%"><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr></table><h3><a class="more" href="?a=edit_account">Edit</a></h3></div>					<div id="box-502"><h2>blá blá blá blá </h2><table cellpadding=2 border=0 width="100%"><tr> <td valign=top>blá blá blá blá </td> <td>blá blá blá blá </tr><tr>	<td>blá blá blá blá </td> <td>blá blá blá blá </td></tr><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr><tr> <td> </td></tr><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr><tr> <td>blá blá blá blá </td> <td>blá blá blá blá </td></tr></table></div>					<div id="box-all"><h2>blá blá blá blá </h2><table id="table" align="center" border="0" cellpadding="2" width="100%"><tbody><tr><th style="text-align: center;" width="50%">blá blá blá blá </th><th style="text-align: center;" width="50%">blá blá blá blá </th></tr><tr class="row1"><td colspan="3" align="center">blá blá blá blá </td></tr><tr class="row1"> <td colspan=3 align="center">blá blá blá blá </td></tr>  <tr class="row1"><td colspan="3" align="center">blá blá blá blá </td></tr>	 <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  <tr class="row1"><td align="center">blá blá blá blá </td><td align="center">blá blá blá blá </td></tr>  </tbody></table></div></div></div>		</div></div></div></div>		<div id="footer-outer">			<div id="footer">				<p>					<a href="?a=home">Home</a> |					<a href="?a=rules">Terms</a> |					<a href="?a=faq">FAQ</a> |															<a href="?a=support">Contact Us</a>					<br />					Copyright 2007 WallkerGroup. All rights reserved.					<br />   				</p>				<br /><center><img src="images/buttons/database.gif" /><img src="images/buttons/ddos.gif" /><img src="images/buttons/linux.gif" /><img src="images/buttons/support.gif" /><img src="images/buttons/ssl.gif" /></center>			</div>		</div>	</body></html>

Algumas páginas adicionais e css podem ser baixados aqui: http://lethalbsd.googlepages.com/site.rar

Vamos as minhas duvidas:

Erro 1: (Todas paginas)

http://img398.imageshack.us/img398/1910/erro1te5.jpg

O logotipo fica alguns pixel's acima do que no firefox.

Erro 2: (Página account)

http://img82.imageshack.us/img82/1971/erro2ia8.jpg

No IE, o conteúdo vai um pouco para a esquerda, não ficando centralizado como no firefox.

Duvida 1: (Página home)

http://img53.imageshack.us/img53/9619/erro3vd6.jpg

Como coloco aquele link com bg para baixo? ficando alinhado com o final da coluna ao lado.

Obrigado desde já a todos.

Lima_Ramos · Maio 9, 2007

Por favor,eu sei que não tenho esse direito,mas gostaria de pedir a todos que se souberem como proceder com esses problemas,nos ajudem.Eu sou desenvolvedor do site e infelizmente nosso trabalho está parado por esses 3 problemas.Eu sei que esse é um fórum de discussão e que toda a ajuda é voluntária e por isso nem sempre ela vem no mesmo dia que se posta,mas eu só peço que a primeira pessoa que souber resolver,pelo menos um desses problemas,nos ajude.Muito obrigado a todos.

marcelrizzo · Maio 9, 2007

Coloca os códigos entre os codebox que fica mais rápido pra galera ajudar. Se puder ler o tópico sobre como postar uma dúvida ajuda.

Lethal · Maio 9, 2007

Valeu marcelrizzoEditei o post inicial com os codigos

marcelrizzo · Maio 9, 2007

Bem, eu dei uma olhada rápida nos códigos e vi que você está usando tabelas na estrutura. E está usando tags de formatação também, como o center. Eu nem sei direito como essas tags se comportam quando usadas junto com CSS, mas você pode tentar fazer ele totalmente standard. Temos aqui no forum alguns exemplos.O site do Maujor também é ótimo. www.maujor.comVou dar uma lida melhor e ver se posso te ajudar de uma maneira melhor.Boa tarde.

Guilherme Rambo · Maio 9, 2007

sem usar tabelas para a montagem do template

Não entendi. Esse seu site ta montado com tabelas Oo'Dá uma estudadinha no básico http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif- http://www.maujor.com- http://www.tableless.com.br- http://www.web2ponto0.com.br- http://www.revolucao.etc.br- http://www.w3schools.com- http://forum.imasters.com.br/index.php?showforum=140- http://forum.imasters.com.br/index.php?showforum=180[]'s

Lethal · Maio 9, 2007

sem usar tabelas para a montagem do template
Não entendi. Esse seu site ta montado com tabelas Oo'Dá uma estudadinha no básico http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif- http://www.maujor.com- http://www.tableless.com.br- http://www.web2ponto0.com.br- http://www.revolucao.etc.br- http://www.w3schools.com- http://forum.imasters.com.br/index.php?showforum=140- http://forum.imasters.com.br/index.php?showforum=180[]'s

Cara, no template nao usei tabelasUsei tabelas para listar dados, é para isso que tabela serve, sempre li que é inviável usar divs para listar dadosJá li e acompanho a maioria desses sites, mas vou buscar neles sobre o meu problema..Abraço

marcelrizzo · Maio 9, 2007

Bem, eu ainda estou com impressão que as tabelas estão sendo usadas na estrutura, não dá pra entender direito. Além disso você está usando tags de formatação tais como center, align, olha só:

Eu nem sei o efeito disso na renderização.

<center>

... _linenums:0'><strong class='bbc'><center></strong><div id="border-top-outer"><div id="border-top"><div id="image-menu" <strong class='bbc'>align="left"</strong>><ul id="menu">...

Tem divs sobrando também.

</div></center></div></div></div>

Tenta dar uma enxugada no código, eu não entendi a necessidade de tantas divs:

<div id="header-outer"><div id="header"><div id="wallkergrouplogo"> </div></div></div>

Se você explicar como você quer que fique o site, pode ajudar, eu copiei e colei para o editor e não dá pra etender como você quer ele.

Boa tarde.

Lethal · Maio 9, 2007

para ver o efeito final olhe o arquivo

http://lethalbsd.googlepages.com/site.rar

Em vez do center vou colocar um align="center" e enxugar o codigo para ver o resultado..

E não tem divs sobrando..

<div id="header-outer"><div id="header"><div id="wallkergrouplogo"> </div></div></div><div id="border-top-outer"><div id="border-top"><div id="image-menu" align="left"></div></div></div></div>

marcelrizzo · Maio 10, 2007

Bem, agora eu ví como ficou. Sei lá, eu faria com um pouco menos de divs, mas é você quem manda neh.Então, o IE e o FF interpretam o tamanho das fontes, e algumas propriedades de modos diferentes como você já deve ter percebido. O que eu faço é ir fazendo a calculando para ficar bom nos dois, eu não gosto de usar hacks, mas arrumar o que está lá eu não sei. Eu ví em outro post um cara que mostrou um scritp que interpretava o browser e ai jogava um código diferente, entretanto você teria que desenvolver duas páginas na prática, não acho que você deseje isso.Bem, na minha contagem ali tem uma </div> sobrando, posso ter contado errado.Sobe o align na div, está em desuso. Olhe esse site aqui. ://www.maujor.com/dicas/deprecated.phpEu nem sei o efeito disso.Bem, se eu puder ajudar volto a postar.Boa noite.

Lethal · Maio 10, 2007

Enxuguei o possível do template.

Apesar do código confuso do primeiro post, eu gosto de código limpo, e fiz o possível para deixar assim.

Agora o topo ficou compativel com todos browsers http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ainda não testei o erro no alinhamento, por causa do erro que estou enfrentando agora...

O <center> ou align: center não removi, pois não sei como alinhar sem usar um desses métodos...

Como está:

http://img68.imageshack.us/img68/5817/erradohf2.png

Como devia estar:

http://img526.imageshack.us/img526/894/certocv2.png

Note que o div footer subiu...

Código:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" type="text/css" href="www.wallkergroup.com_arquivos/style.css"><title>wallkergroup</title></head><body><div id="header"><div id="wallkergrouplogo"></div></div><div id="border-top" align="center">	<div id="image-menu" align="left"><ul id="menu"><li><a href="?a=home" title="About Group">Home</a></li><li><a href="?a=terms" title="Terms">Terms</a></li><li><a href="?a=faq" title="FAQ">FAQ</a></li><li><a href="?a=signup" title="Sign Up">Sign Up</a></li><li><a href="?a=login" title="Login">Login</a></li><li class="noborder"><a href="?a=support" title="Contact Us">Contact Us</a></li></ul>		  </div></div><div id="agregator"><div id="content"><div id="news"><h2>blá blá blá </h2><h4>May-9-2007 06:04:21 PM</h4><a href="?a=news#1">blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </a><br><br><h3><a class="more" href="?a=news">More</a></h3></div><div id="home-message"><h2>blá blá blá blá blá blá blá blá blá </h2><p>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá <br></p></div>	<div id="border-plans"><div id="plan-diary"><b>blá blá blá blá blá blá </b><br><p>blá blá blá blá blá blá <br>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá <br>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p></div><div id="plan-weekly"><b>blá blá blá blá blá blá </b><br><p>blá blá blá blá blá blá <br>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá <br>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p></div>	</div><div id="buttons"><img src="www.wallkergroup.com_arquivos/monitor.gif"><br><img src="www.wallkergroup.com_arquivos/stats.gif"></div><div id="referrals"><h2>blá blá blá blá blá blá </h2><p>blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá </p><br><table id="table" border="0" cellpadding="2" width="100%"><tbody><tr colspan="2"><th width="124">blá blá blá </th><th width="135">blá blá blá </th></tr><tr class="row1"><td>blá blá blá </td><td>blá blá blá /td></tr><tr class="row1"><td>blá blá blá </td><td>blá blá blá </td></tr></tbody></table></div>			<div id="forums"><h2>blá blá blá blá blá blá </h2><ul><li><a href="http://www.google.com.br/">blá blá blá blá blá blá </a></li><li><a href="http://www.google.com.br/">blá blá blá blá blá blá </a></li><li><a href="http://www.google.com.br/">blá blá blá blá blá blá </a></li><li><a href="http://www.google.com.br/">blá blá blá blá blá blá </a></li><li><a href="http://www.google.com.br/">blá blá blá blá blá blá </a></li><h3><a class="more" href="http://www.google.com.br/">More</a></h3></ul></div></div></div><div id="footer"><p><a href="?a=home">Home</a> |<a href="?a=rules">Terms</a> |<a href="?a=faq">FAQ</a> |<a href="?a=signup">Sign Up</a> | <a href="?a=login">Login</a> |<a href="?a=support">Contact Us</a><br>Copyright 2007 WallkerGroup. All right reserved.<br>   </p><br><center><img src="www.wallkergroup.com_arquivos/database.gif"><img src="www.wallkergroup.com_arquivos/ddos.gif"><img src="www.wallkergroup.com_arquivos/linux.gif"><img src="www.wallkergroup.com_arquivos/support.gif"><img src="www.wallkergroup.com_arquivos/ssl.gif"></center></div></body></html>

CSS

/* -------------------------------------------------------------------------------		General--------------------------------------------------------------------------------- */body {		color: rgb(160,160,160);		background: url(../images/bg-body.png) rgb(35,35,35) top left repeat-x;		font:13px arial,helvetica,clean,sans-serif;		*font-size:small;		*font:x-small;}body,div { margin:0;padding:0; }input, textarea { 		padding: 2px;		color: rgb(160,160,160);		background-color: rgb(45,45,45);		border: 1px solid rgb(60,60,60);		vertical-align: middle;}select {	background-color: rgb(45,45,45);	color: rgb(160,160,160);}a:link, a:visited {		color: #FEC018;		text-decoration: underline;}a:hover {		color: #aaaaaa;		text-decoration: underline;}/* -------------------------------------------------------------------------------		Header--------------------------------------------------------------------------------- */#wallkergrouplogo {		position:relative;		top:3px;		background: url(../images/top.gif) top left no-repeat;		height:133px;		width: 513px;		margin:0 auto;		padding:0;}#header {		margin: 10px 0 0 0;		padding: 0;		border-top: 1px solid rgb(60,60,60);		background: rgb(17,17,17);		background-image: url(../images/bg-header-shadow.png) top repeat-x;}#logo {		position: absolute;		top: 30px;		left: 738px;}#image-menu {		position: relative;		background: url(../images/eyeglass.jpg) top center no-repeat;		height: 205px;		width: 750px;		padding: 0;		margin-top: 15px;		margin-bottom: 15px;}#image-menu h1 {		font-size: 100%;		font-weight: normal;		border: none;		margin: 0 0 1em 0;		padding: 1em;		color: rgb(160,160,160);		line-height: 1.5em;		background-color:#000000;		width: 233px;}#menu {	list-style:none;	padding-left:33px;	padding-top:10px;}#menu li {	font-size:1.2em;	letter-spacing:0.05em;	text-indent:20px;	text-transform:uppercase;	white-space:nowrap;	font-weight: bold;	border-bottom:1px dotted #2D2D2D;	padding-bottom: 5px;	width: 233px;	padding-top: 5px;	background: url(../images/arrow.gif) no-repeat 5px 12px;	padding-left:15px;}#menu .noborder {	font-size:1.2em;	letter-spacing:0.05em;	text-indent:20px;	text-transform:uppercase;	white-space:nowrap;	font-weight: bold;	padding-bottom: 5px;	width: 233px;	padding-top: 5px;	border:0;}#menu a, #menu li{	color:#A0A0A0;	text-decoration:none;}#menu li:hover {	color:#FEC018;	text-decoration:none;	background: #2D2D2D url(../images/arrow-hover.gif) no-repeat 5px 12px;}#menu a:hover {	color:#FEC018;}#border-top {		background: rgb(35,35,35) url(../images/bg-header-shadow.png) top repeat-x;		margin: 0;		width: 100%;		overflow: hidden;}/* -------------------------------------------------------------------------------		Content--------------------------------------------------------------------------------- */#agregator {		color: #AAAAAA;		background-color: rgb(17,17,17);		border-bottom: 2px solid rgb(10,10,10);		border-top: 1px solid rgb(10,10,10);		padding:0;		width: 100%;}#content {		margin: 0 auto;		padding: 26px 10px 25px 10px;		width: 750px;}#content h2 {	border-bottom: 1px solid #3c3c3c;	font-weight: bold;		margin-bottom: 1em;	font-size: 100%;	color:#FEC018;	padding-bottom:2px;}#border-plans {		padding: 30px;		background-color: #2D2D2D;		border: 2px solid #3C3C3C;		margin-bottom:20px;}#plan-diary {		margin-right: 30px;		width: 325px;		float: left;}#plan-weekly  {		width: 325px;		float: right;}#news {		margin-right: 30px;		width: 285px;		float: left;		margin-bottom:20px;}#home-message {		margin-right: 0px;		width: 425px;		float: right;		margin-bottom:20px;}		#buttons {		margin-right: 30px;		width: 280px;		float: left;		margin-bottom:20px;}#referrals {		margin-right: 30px;		width: 234px;		float: left;		margin-bottom:20px;}#forums {		width: 168px;		float: right;		margin-bottom:20px;}#news h3, #forums h3, #501 h3 {	background: url(../images/more.jpg) left no-repeat;	width: 45px;	padding-left: 7px;	height:23px;	padding-top:6px;	float:right;	background-color: 0;}#referrals td {background-color: #505050;}#forums a {	color: rgb(160,160,160);	text-decoration: none;}	#forums a:hover {		background-color: #292929;}#forums li {	background: url(../images/arrow-forums.gif) no-repeat 0px 3px;	padding-left:17px;}#news a {	color: rgb(160,160,160);	text-decoration: none;}#news a:hover {		color: rgb(160,160,160);		text-decoration:underline;}#news h4 {	font-size: 0.7em;	font-weight:bold;}/* -------------------------------------------------------------------------------		Footer--------------------------------------------------------------------------------- */#footer {		background-image: url(../images/bg-header-shadow.png) top repeat-x;		position: relative;		margin: 0 auto;		padding: 30px 0 15px 0;		width: 750px;}#footer p {		padding-left: 48px;		background: url(../images/wg-footer.gif) center left no-repeat;		text-align: center;}#footer a {	margin-bottom: 1em;	padding-bottom: 0.25em;	font-size: 100%;	color:#FEC018;}/* -------------------------------------------------------------------------------		Tabelas--------------------------------------------------------------------------------- */.row11 { background-color: #DAE9B9; }.row12 { background-color: #E2EFC9; }.row1 { background-color: #E6E6CE; }.row2 { background-color: #EFEFD5; }.row5 { background-color: #F0F0F0; }#table {  clear: both;  background-color: #111111;  border: 1px solid #232323;}#table th {  text-align: left;  background-color: #171717;  padding: 2px;  height: 20px;}#table .row1 {  background-color: #232323;}#table .row2 {  background-color: #FFF;}

Paulo de Tarso F. M. · Maio 11, 2007

Para alinhar, usa-se a propriedade text-align:center ou, dependendo do caso, podemos trabalhar com margens automáticas (margin: 0 auto;)... Ou seja, é formatação? É CSS!!!

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

Arquivado

Primeiro site sem tabelas

Recommended Posts

Lethal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lima_Ramos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelrizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lethal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelrizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Rambo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lethal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelrizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lethal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelrizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lethal 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fancy gays boys from your city

Modal Bootstrap 5

Verificar usuário

Fóruns

Tempo Real

Informação importante