Página 100% nos padrões W3C

Não entendi. =/ Qual o erro?

Veja que você está usando tabelas para estruturar o site e isso foge totalmente dos padrões.

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

cara se não entendeu o que eu disse, não tem erro, já fiz o site, eu quero que me ajudem a passar exemplo esse site, para os padrões W3C entende

quero aprender, eu sempre fiz uma estrutura fácil de entender, mais nunca aprendi em nenhum lugar eu que aprendi assim, mais eu queria saber as normas, passar o site pros padrões do W3C entendeu ??? queria uma ajuda pra isso.

Então João.

semântica talvez seja a palavra chave.

Layouts não devem ser estruturados com a tag <table>.

HTML é muito mais que isso. Os padrões web dizem dentre muitas coisas, que as tags possuem um significado semântico, este deve ser usado.

<table> se destina à apresentar dados tabulares, tais como listagens de bancos de dados, horários-destino (como tabela de vôo)

Existem ainda DIVs e SPANs que são 'elementos sem semântica definida'

Usamos estes para estruturar maior parte dos layouts dos sites.

Por exemplo, levando a semântica em consideração:

<div class="titulo">A CONSTRUTORA</div> é totalmente errado. Deveria ser:<h1>A Construtora</h1> Ai com CSS nesse elemento você consegue chegar no efeito que deseja. 

<div class="texto_conteudo"> A Sonic Construtora atua no mercado brasileiro. É uma das mais importantes empresas do setor de construção pesada. A Sonic superou muitos desafios, passou por grandes transformações e crescimento, marca de uma filosofia empresarial dinâmica que se moderniza continuamente e que prioriza o trabalho, os resultados e o desenvolvimento dos negócios, das pessoas e comunidades. O seu sucesso está diretamente ligado ao know-how que detém de suas atividades, a rapidez e pontualidade na execução das obras e no elevado nível de qualidade. Com sede em São Paulo (SP), a Sonic trabalha diariamente para assumir posição de destaque entre os mais modernos grupos econômicos brasileiros. </div> é **claramente** um **p**arágrafo. Portanto:

<p"> A Sonic Construtora atua no mercado brasileiro. É uma das mais importantes empresas do setor de construção pesada. A Sonic superou muitos desafios, passou por grandes transformações e crescimento, marca de uma filosofia empresarial dinâmica que se moderniza continuamente e que prioriza o trabalho, os resultados e o desenvolvimento dos negócios, das pessoas e comunidades. O seu sucesso está diretamente ligado ao know-how que detém de suas atividades, a rapidez e pontualidade na execução das obras e no elevado nível de qualidade. Com sede em São Paulo (SP), a Sonic trabalha diariamente para assumir posição de destaque entre os mais modernos grupos econômicos brasileiros. </p>assim você até 'economiza' classes no teu CSS. Pois não precisa criar classes para elementos que já existem. 

Em vez de:

.texto_conteudo {
 font-family: trebuchet ms;
 color:#FFFFFF;
 font-size: 14px;
 font-weight:bold;
 text-align:justify;

p {

 font-family: trebuchet ms;
 color:#FFFFFF;
 font-size: 14px;
 font-weight:bold;
 text-align:justify;

To sim cara, e modificando também, mais e quanto as tabelas como eu faria a estruta ?

eu algumas veses tentei fazer com div e me compliquei demais

É isso mesmo ai.

-> Identifique os blocos do layout. Eu vejo:

• topo, menu lateral, conteudo, rodapé, e logicamente uma externa, englobando tudo. Portanto:

<div id="tudo">
 <div id="topo">
 </div><!-- /topo -->
 <ul id="menu">
 </ul><!-- /menu -->
 <div id="conteudo">
 </div><!-- /conteudo -->
 <div id="rodape">
 </div><!-- /rodape -->
</div><!-- /tudo -->Cada item do menu, seria um <li></li> dentro do <ul id="menu">No demais, basta usar as tags HTML como recomendei. <p> onde você tiver parágrafos, os <hx>(h1, h2, h3.. h6), nos títulos, lembrando que maior relevância, tem o número maior... e por ai vai ^_^

Tenta fazer. Coloca uma pagina de testes no ar.. e vai fazendo.

Lembre de estudar box model, trabalhe com float para posicionar o menu do lado do conteudo, e com clear no rodape, para devolver ele para o fluxo normal do documento. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Cara Obrigadão mesmo, vou tentar mudar esse site, ou fazer um inteiro assim, depois posto ai para ajudar a galera que ta com a mesma dúvida que eu, abração e Obrigado.

Olá pessoal, consegui práticamente a página inteira, só uma coisa, não consegui editar meu 'menu' com o <ul> e <li>

se alguem quiser me ajudar, agraceço

mais ai como prometi, o código da estrutura em div's conforme o W3C, e gostei muito de dar uma estudada sobre, porque normalmente quem programa, não liga muito pra design, mais é sempre bom se interessar, da pra fazer muita coisa interessante e economizar código.

pra quem quiser ver como ficou o código:

<?php
	$acao = $_POST['acao'];
	if($acao != ''){
 $nome = $_POST['nome'];
 $email = $_POST['email'];
 $telefone = $_POST['telefone'];
 $assunto = $_POST['assunto'];
 $mensagem = $_POST['mensagem'];
 $header = "Content-Type: text/html; charset=iso-8859-1\n";
 $header .= "From: ". $nome . " < " . $email . ">\r\n";

 if($acao == 'contato'){
 $email = mail('contato@sonicconstrutora.com.br',$assunto,nl2br($mensagem),$header);
 } else if($acao == 'orcamento'){
 $email = mail('djsantos@sonicconstrutora.com.br',$assunto,nl2br($mensagem),$header);
 }

 if($email){
 echo "<script> alert('".$acao ." enviado com Sucesso'); </script>";
 }
	}
?>
<html>
	<head>
 <style type="text/css">
 html {
 height:100%;
 }

 body {
 margin: 0px;
 text-align:center;
 background-color: #336699;
 height: 100%;
 }

 #principal {
 width: 990px;
 text-align:left;
 margin-left:auto;
 margin-right:auto;
 background-color: #336699;
 min-height: 100%;
 height:auto;
 }

 #menu {
 float:left;
 width:195px;
 height:460px;
 background-color: #336699;
 }

 #rodape {
 clear:both;
 width:990px;
 background-color:#FFCC00;
 font-family: trebuchet ms;
 color:#336699;
 font-size: 14px;
 font-weight:bold;
 text-align:center;
 height:20px;
 }

 #conteudo {
 float:right;
 margin-left:auto;
 margin-right:auto;
 width:770px;
 height:460px;
 padding-top:5px;
 background-color: #336699;
 }

 #topo {
 width:990px;
 height:215px;
 background-image: url('img/topo.jpg');
 }

 * html #principal {
 height:100%;
 }

 h1 {
 font-family: trebuchet ms;
 color:#FFCC00;
 font-size: 18px;
 font-weight:bold;
 text-align:left;
 padding-left:4px;
 border:1px solid #996633;
 margin:2px;
 }

 p {
 font-family: trebuchet ms;
 color:#FFFFFF;
 font-size: 13px;
 font-weight:bold;
 text-align:justify;
 margin:7px;

 }

 a.menu:link, a.menu:visited, a.menu:active {

 text-decoration: none;
 font-family: trebuchet ms;
 color:white;
 font-size: 16px;
 font-weight:bold;
 text-align:center;
 }
 a.menu:hover {

 text-decoration: none;
 font-family: trebuchet ms;
 color:white;
 font-size: 17px;
 font-weight:bold;
 text-align:left;
 }
 .texto {
 background-color:#336699;
 padding-left:20px;
 text-align:left;
 height:25px;
 }

 .espaco {
 background-color:#FFFFFF;
 height:3px;
 }

 .campo {
 font-family:trebuchet ms;
 font-weight:bold;
 font-size:16px;
 color:#FFFFFF;
 text-align:right;
 }

 .input {
 width:250px;
 border-left:0px solid #333333;
 border-right:0px solid #333333;
 border-top:0px solid #333333;
 border-bottom:1px solid #FFFFFF;
 background-color:transparent;
 color:#FFFFFF;
 }
 </style>

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#conteudo").load('empresa.php');
 abre = function(link){
 $("#conteudo").load(link);
 }
});

function ValidaForm(){
	if(document.formulario.nome.value == ''){
 alert('preencha o campo nome');
 document.formulario.nome.style.borderBottom='2px #990000 solid ';
 document.formulario.nome.focus();
 return false;
	} else {
 document.formulario.nome.style.borderBottom='1px solid #FFFFFF';
	}

	if(document.formulario.email.value == ''){
 alert('preencha o campo email');
 document.formulario.email.style.borderBottom='2px #990000 solid ';
 document.formulario.email.focus();
 return false;
	} else {
 if((document.formulario.email.value.indexOf('@') < 1) || (document.formulario.email.value.indexOf('.') < 2)){
 document.formulario.email.focus();
 document.formulario.email.value = '';
 alert('Email incorreto');
 return false;
 } else {
 document.formulario.email.style.borderBottom='1px #FFFFFF solid ';
 }
	}

	if(document.formulario.telefone.value == ''){
 alert('preencha o campo telefone');
 document.formulario.telefone.style.borderBottom='2px #990000 solid ';
 document.formulario.telefone.focus();
 return false
	}

	if(document.formulario.assunto.value == ''){
 alert('preencha o campo assunto');
 document.formulario.assunto.style.borderBottom='2px #990000 solid ';
 document.formulario.assunto.focus();
 return false
	}

	document.formulario.action = 'index.php';
	document.formulario.submit();
}

function ValidaOrcamento(){
	if(document.formulario_orcamento.nome.value == ''){
 alert('preencha o campo nome');
 document.formulario_orcamento.nome.style.borderBottom='2px #990000 solid ';
 document.formulario_orcamento.nome.focus();
 return false;
	} else {
 document.formulario_orcamento.nome.style.borderBottom='1px solid #FFFFFF';
	}

	if(document.formulario_orcamento.email.value == ''){
 alert('preencha o campo email');
 document.formulario_orcamento.email.style.borderBottom='2px #990000 solid ';
 document.formulario_orcamento.email.focus();
 return false;
	} else {
 if((document.formulario_orcamento.email.value.indexOf('@') < 1) || (document.formulario_orcamento.email.value.indexOf('.') < 2)){
 document.formulario_orcamento.email.focus();
 document.formulario_orcamento.email.value = '';
 alert('Email incorreto');
 return false;
 } else {
 document.formulario_orcamento.email.style.borderBottom='1px #FFFFFF solid ';
 }
	}

	if(document.formulario_orcamento.telefone.value == ''){
 alert('preencha o campo telefone');
 document.formulario_orcamento.telefone.style.borderBottom='2px #990000 solid ';
 document.formulario_orcamento.telefone.focus();
 return false
	}

	if(document.formulario_orcamento.assunto.value == ''){
 alert('preencha o campo assunto');
 document.formulario_orcamento.assunto.style.borderBottom='2px #990000 solid ';
 document.formulario_orcamento.assunto.focus();
 return false
	}

	document.formulario_orcamento.action = 'index.php';
	document.formulario_orcamento.submit();
}
</script>
 <title>	Sonic Construtora </title>
	</head>
<body>

	<div id="principal">
 <div id="topo">
 <img src="img/banner.gif" width="700" height="178" align="right" style="margin-right:15px;margin-top:15px;">
 </div>
 <div id="menu">
 <table width="195" height="165" cellpadding="0" cellspacing="0">
 <tr>
 <td class="texto">
 <a href="javascript:void(0);" onClick="abre('empresa.php');"class="menu">
 A CONSTRUTORA
 </a>
 </td>
 </tr>
 <tr>
 <td href="javascript:void(0);" class="espaco"></td>
 </tr>
 <tr>
 <td class="texto">
 <a href="javascript:void(0);" class="menu">
 OBRAS
 </a>
 </td>
 </tr>
 <tr>
 <td class="espaco"></td>
 </tr>
 <tr>
 <td class="texto">
 <a href="javascript:void(0);" onClick="abre('orcamento.php');"class="menu">
 ORÇAMENTO
 </a>
 </td>
 </tr>
 <tr>
 <td class="espaco"></td>
 </tr>
 <tr>
 <td class="texto">
 <a href="javascript:void(0);" onClick="abre('contato.php');" class="menu">
 CONTATO
 </a>
 </td>
 </tr>
 <tr>
 <td class="espaco"></td>
 </tr>
 <tr>
 <td class="texto">
 <a href="javascript:void(0);" onClick="abre('mapa.php');"class="menu">
 LOCALIZAÇÃO
 </a>
 </td>
 </tr>
 </table>
 <img src="img/lado_esquerdo.jpg">
 </div>
 <div id="conteudo"></div>
 <div id="rodape"> Sonic Construtora - Rua Aurélia nº 1027 - Vila Romana TEL: 2649 - 2730 </div>
	</div>
</body>
</html>

Você não deve ter conseguido fazer por que usou tabelas aí. Ou isso são dados tabulares? Acho que não...

Passa no Laboratório de Scrips e veja lá como faz. ^_^

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

cara, eu disse que tentei fazer com ul li e não consegui, eu pedi AJUDA mais obrigado por me questionar.

e obrigado pela dica, vou no laboratorio de scripts.

Uhhn... Pensei que você tinha tentado fazer com as tabelas. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Tente algo assim:

HTML

<ul id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

ul#menu{

width: 450px;
height: 40px;
background: gray;
list-style: none;
}

float: left;
margin: 10px 25px;
width: 50px;
}

color: white;
}

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