Site Em Tabless Fiz Certo?

#1 GreyWolf

Mestre

Usuários
674 posts

Sexo:Não informado

Posted 21/10/2004, 17:09

Resolvi testar fazer um sitem sem tabela do ZERO, aqui funcionou, mas quero que pessoas que já trabalham com isso que possam me dizer se fiz do modo certo ou se botei ou não coisas a mais =]
Soh para eu ter certeza mesmo:

Aqui esta o css:

body,td,th {
	font-size: 12px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

div#cabecalho {
	background-color: #CCCCCC;
	vertical-align: top;
	height: 80px;
	width: 640px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;	

}
div#corpo {
	width: 641px;
	height: 151px;
}

div#corpo .menu-e {
	color:#FFFFFF;
	background-color: #000066;
	height: 150px;
	width: 80px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: dotted;
	border-bottom-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;	
	float:left;
}

div#corpo .menu-d {
	color:#00FF66;
	align:right;
	background-color: #000066;
	height: 150px;
	width: 80px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	float: right;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #000000;
}
div#rodape {
	background-color: #CCCCCC;
	vertical-align: bottom;
	height: 80px;
	width: 640px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;	

}

Aqui está o código do site:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testes de P&aacute;gina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">


<body>

<div id="cabecalho">Página em Tableless</div>
<div id="corpo">
	<div class="menu-e">menu esquerdo fdf </div>
	<div class="menu-d">Menu direito </div>
</div>

<div id="rodape">Rodap&eacute;</div>
</body>
</html>

Site bem simples, só para testar mesmo =]

#2 MarviN*

nw . newton web

Usuários
780 posts

Sexo:Não informado
Localidade:Brasília - DF

Posted 21/10/2004, 17:59

Bem, me parece estar tudo ok!! Uma coisa bem legal é vc dar uma olhada nos códigos fontes de sites tableless pra ver como eles fazem algumas coisas.. se usam ID ou CLASS em quais casos.. com a prática vc vai aprimorando a técnica.

Acho q vc ta no caminho certo! (y)

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
[ Blog Desenvolvimento Web: http://www.newtonwagner.net/blog ]
[ Diário da Selva: http://www.diariodaselva.com/ ]

[ "Não existe um caminho para a paz; a paz é o caminho." Mahatma Gandhi ]

#3 brunoalves

Linux user #392843

Ex-Admins
1018 posts

Sexo:Não informado
Localidade:Rio de Janeiro

Posted 21/10/2004, 18:10

ID é utilizado para elemento único definido com o # na frente no css, class é para o resto todo.

<div class="menu-e">menu esquerdo fdf </div>
<div class="menu-d">Menu direito </div>

Deveria estar:

<div id="menu-e">menu esquerdo fdf </div>
<div id="menu-d">Menu direito </div>

A não ser que você queira ter mais de um menu em cada lado

Abraços

Contra-baixo - Tablaturas, dicas e ferramentas para baixistas - Hospedagem Grátis - MUBR
Projetos
• Bruno Alves • WebLugar.net •
Fórums
• Ajuda Linux • BrClube • Forum cPanel • webforum • WMS •

#4 GreyWolf

Mestre

Usuários
674 posts

Sexo:Não informado

Posted 21/10/2004, 18:22

hmm
em vez de

div#corpo .menu-e {
	color:#FFFFFF;
	background-color: #000066;
	height: 150px;
	width: 80px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: dotted;
	border-bottom-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;	
	float:left;
}

ponho:

div#menu-e {
	color:#FFFFFF;
	background-color: #000066;
	height: 150px;
	width: 80px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: dotted;
	border-bottom-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;	
	float:left;
}

#5 Hellrider

Normal

Usuários
85 posts

Sexo:Não informado
Localidade:Bertioga SP

Posted 21/10/2004, 19:37

Olá companheiro, oque estava reparando também nos seus códigos, não está errado, mas você pode simplificiar um pouco mais tipo, trocar:

border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: dotted;
border-bottom-style: solid;
border-right-color: #000000;
border-bottom-color: #000000;

por:

border-right: 1px dotted #000;
border-bottom: 1px solid #000;

O mesmo acontece no "margin" do seletor body

Repito, é só uma dica. Espero ter ajudado.

"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#6 Marcio_Trindade

Normal

Usuários
108 posts

Sexo:Não informado
Interesses:Ajudar e ser ajudado

Posted 21/10/2004, 19:57

eu particularmente quando vou montar o css procuro comentar bastante o código separar ele legal e uma uma dica num precisa colocar div afinal o "#" ja diz q é uma div.

para importar o arquivo css eu prefiro usar o
<style>@import "css.css";</style>

outra dica o pessoal do site tableless eles costumam uzar 2 arquivos css um para o posicionamento do site e outra para configuração de cores e fontes é uma forma de dividir e não ficar bagunçado!!!

Espero ter contribuido!

WebTrin - Hospedagem, design e Domínio.

#7 brunoalves

Linux user #392843

Ex-Admins
1018 posts

Sexo:Não informado
Localidade:Rio de Janeiro

Posted 21/10/2004, 20:07

Você só deve tomar cuidado com o

<style>@import "css.css";</style>

Por dois motivos:

1 - O css demora mais a pegar
2 - Alguns browsers derivados do NS não entendem o import.

Abraços.

#8 GreyWolf

Mestre

Usuários
674 posts

Sexo:Não informado

Posted 21/10/2004, 20:28

eu particularmente quando vou montar o css procuro comentar bastante o código separar ele legal e uma uma dica num precisa colocar div afinal o "#" ja diz q é uma div.

para importar o arquivo css eu prefiro usar o
<style>@import "css.css";</style>

outra dica o pessoal do site tableless eles costumam uzar 2 arquivos css um para o posicionamento do site e outra para configuração de cores e fontes é uma forma de dividir e não ficar bagunçado!!!

Espero ter contribuido!

sim, isso é bom depois que eu já tiver mais o jeito, por enquanto vou fazer desse modo hehe

Hellrider, olha o primeiro csss la em cima, ta do jeito que falasse, eu soh esqueci de mudar nor esto =]

Bom, ainda mais que eu estava apenas testando hehe

Vlw a todos =]

#9 f4hr3nh3it

Normal

Usuários
64 posts

Sexo:Não informado

Posted 21/10/2004, 21:43

meu estilo...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
	font-size: 12px;
	margin: 0;
	}

#page {
	width: 750px;
	} 

#header {
	background-color: #CCC;
	height: 80px;
	display: block;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000; 
	}
#main {
	width: 750px;
	}

#col_left {
	color: #FFF;
	background-color: #006;
	height: 150px;
	border-right: 1px dotted #000;
	border-bottom: 1px solid #000;
	float: left;
	width: 199px; /* -1 da borda */
	}

#col_right {
	color: #00FF66;
	background-color: #006;
	height: 150px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px dotted #000;
	float: right;
	width: 198px; /* -2 das bordas */
}

#content {
	width: 350px;
	background-color: #60F;
	float: left;
	height: 150px;
	color: #0FF;
	}

#footer {
	background-color: #CCC;
	vertical-align: bottom;
	height: 80px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000; 

}


-->
</style>
</head>

<body>

<div id="page">
	<div id="header">Página em Tableless</div>
	<div id="main">
		<div id="col_left">Esquerda com 200px</div>
		<div id="col_right">Direita com 200px</div>
		<div id="content">aqui fica o conteudo</div>
	</div>
	<div id="footer">footer</div>
</div>
</body>
</html>

[ ]'s GreyWolf

continua lendo :lol:

O mundo seria melhor se todas as pessoas procurassem suas soluções no www.google.com antes de fazer suas perguntas.

PHP

<?php

$name = "Germano";
$ircNick = "f4hr3nh3it";
$ircChannel = explode(",","#crack,#errados,#dehon");
$ircRede = "VirtuaLife"; // irc.virtualife.com.br
$msn = "sou @ antisocial . com"; // Por enquanto não adiciono mais ninguém

?>

1 user(s) are reading this topic

Entrar