Ir para conteúdo

POWERED BY:

Arquivado

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

AerSoftware

Está certo isso que estou fazendo?

Por , em Desenvolvimento frontend

Recommended Posts

AerSoftware    0

AerSoftware
Postado

Olá pessoal, tudo bom? Espero que sim.Gostaria de uma ajuda de vcs. Há um tempo eu to tentando fazer um site usado o css. Tive que parar com ele por outras situções que acontecem mas agora to voltando a mexer nele.Eu não tinha saído muito do início, portanto estou com algumas dúvidas ainda.É o seguinte:Criei essa página pra cadastro de usuários no site.Ela é assim no código-fonte:

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>@import "estilos/padrao/padrao.css";</style><head><title>Biblioteca de Quadrinhos: Cadastro de Usuários</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><p>Imagem de topo.</p> <div class="cad_usuarios_titulo" id="cad_usuarios_titulo"> <p>Cadastro de Usuários</p></div><p>A Biblioteca de Quadrinhos é um site privado. Portanto, qualquer cadastro de usuário deverá ser autorizado por seu Administrador. Após o cadastro, será enviado um e-mail para o Administrador do site solicitando sua ativação. Certifique-se de cadastrar um e-mail válido e funcional, pois será enviado para esse e-mail a confirmação de ativação de seu cadastro.</p><table width="976" height="250" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="286" height="35">Nome Completo:</td> <td width="684"> <input name="nome" type="text" id="nome" size="50" maxlength="50"></td> </tr> <tr> <td width="286" height="35">Username:</td> <td><input name="username" type="text" id="username" size="15" maxlength="15"></td> </tr> <tr> <td width="286" height="35">Senha:</td> <td><input name="senha" type="password" id="senha" size="10" maxlength="10"></td> </tr> <tr> <td width="286" height="35">Confirmar Senha:</td> <td><input name="confsenha" type="password" id="confsenha" size="10" maxlength="10"></td> </tr> <tr> <td width="286" height="35"><p>E-Mail:</p> </td> <td><input name="email" type="text" id="email" size="50" maxlength="50"></td> </tr> <tr> <td width="286" height="35">Confirmar E-Mail:</td> <td><input name="confemail" type="text" id="confemail" size="50" maxlength="50"></td> </tr> <tr> <td height="35"> </td> <td>Tipo: <input name="textfield7" type="hidden" size="2" maxlength="2"> Status: <input name="textfield8" type="hidden" size="2" maxlength="2"> Data e Hora do Registro: <input name="textfield9" type="hidden" size="57"></td> </tr></table></body></html>

Usei tabelas somente pra identar os cadastros, mas eu posso fazer essa identação sem as tabelas, usando o css?O arquivo css que eu criei é pequeno, fiz um pequeno teste somente com o título, criando uma Div pra ele e botando as seguintes informações:

/* CSS Document *//* Cadastro de Usuários (cad_usuarios.html) */.cad_usuarios_titulo{font-size:36px;font-family:Arial, Helvetica, sans-serif;background: #CC0000;margin-left:inherit;}

O que eu gostaria de saber também é como eu faço no css pra centralizar esse título? E tem como manter a cor de fundo somente atrás do título, ao invés de ficar aquela faixa enorme atrás na página?Ah, e outra coisa. Na Div, o que é importante pro arquivo css, a Class ou a ID? Coloquei os dois, mas qual o css reconhece quando é chamado o nome?Aos poucos vou me encontrando com isso. Grato pela ajuda. AbraçosAllan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ciclone    0

Ciclone
Postado

Colega, abaixo está o código da sua página com o estilo Css que você quer, pelo menos foi isso que eu entendi, tira o class da sua div e deixa só a ID.Outra coisa também,Essa sua tabela esta muito grande lateralmente, veja que no código abaixo eu coloquei 100% no width da tabela pra não aparecer a barra de rolagem

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>#cad_usuarios_titulo {	position: absolute;	text-align:center;	font:36px Arial, Helvetica, sans-serif;	background: #CC0000;	top:30px; /* Aqui você muda a altura do bloco de acordo com a imagem do topo*/	left: 200px;	width: 355px;	height: 41px;}</style><head><title>Biblioteca de Quadrinhos: Cadastro de Usuários</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><p>Imagem de topo.</p>  <div id="cad_usuarios_titulo">Cadastro de Usuários</div><br/><br/><p>A Biblioteca de Quadrinhos é um site privado. Portanto, qualquer cadastro de usuário deverá ser autorizado por seu Administrador. Após o cadastro, será enviado um e-mail para o Administrador do site solicitando sua ativação. Certifique-se de cadastrar um e-mail válido e funcional, pois será enviado para esse e-mail a confirmação de ativação de seu cadastro.</p><table width="100%" height="250" border="1" cellpadding="0" cellspacing="0">  <tr>	<td width="286" height="35">Nome Completo:</td>	<td width="684"> <input name="nome" type="text" id="nome" size="50" maxlength="50"></td>  </tr>  <tr>	<td width="286" height="35">Username:</td>	<td><input name="username" type="text" id="username" size="15" maxlength="15"></td>  </tr>  <tr>	<td width="286" height="35">Senha:</td>	<td><input name="senha" type="password" id="senha" size="10" maxlength="10"></td>  </tr>  <tr>	<td width="286" height="35">Confirmar Senha:</td>	<td><input name="confsenha" type="password" id="confsenha" size="10" maxlength="10"></td>  </tr>  <tr>	<td width="286" height="35"><p>E-Mail:</p>	</td>	<td><input name="email" type="text" id="email" size="50" maxlength="50"></td>  </tr>  <tr>	<td width="286" height="35">Confirmar E-Mail:</td>	<td><input name="confemail" type="text" id="confemail" size="50" maxlength="50"></td>  </tr>  <tr>	<td height="35"> </td>	<td>Tipo: 	<input name="textfield7" type="hidden" size="2" maxlength="2"> 	Status: 	<input name="textfield8" type="hidden" size="2" maxlength="2"> 	Data e Hora do Registro: 	<input name="textfield9" type="hidden" size="57"></td>  </tr></table></body></html>

Colega, abaixo está o código da sua página com o estilo Css que você quer, pelo menos foi isso que eu entendi, tira o class da sua div e deixa só a ID.Outra coisa também,Essa sua tabela esta muito grande lateralmente, veja que no código abaixo eu coloquei 100% no width da tabela pra não aparecer a barra de rolagem.Espero ter ajudado, qualquer coisa posta ai, falowww

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>#cad_usuarios_titulo {	position: absolute;	text-align:center;	font:36px Arial, Helvetica, sans-serif;	background: #CC0000;	top:30px; /* Aqui você muda a altura do bloco de acordo com a imagem do topo*/	left: 200px;	width: 355px;	height: 41px;}</style><head><title>Biblioteca de Quadrinhos: Cadastro de Usuários</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><p>Imagem de topo.</p>  <div id="cad_usuarios_titulo">Cadastro de Usuários</div><br/><br/><p>A Biblioteca de Quadrinhos é um site privado. Portanto, qualquer cadastro de usuário deverá ser autorizado por seu Administrador. Após o cadastro, será enviado um e-mail para o Administrador do site solicitando sua ativação. Certifique-se de cadastrar um e-mail válido e funcional, pois será enviado para esse e-mail a confirmação de ativação de seu cadastro.</p><table width="100%" height="250" border="1" cellpadding="0" cellspacing="0">  <tr>	<td width="286" height="35">Nome Completo:</td>	<td width="684"> <input name="nome" type="text" id="nome" size="50" maxlength="50"></td>  </tr>  <tr>	<td width="286" height="35">Username:</td>	<td><input name="username" type="text" id="username" size="15" maxlength="15"></td>  </tr>  <tr>	<td width="286" height="35">Senha:</td>	<td><input name="senha" type="password" id="senha" size="10" maxlength="10"></td>  </tr>  <tr>	<td width="286" height="35">Confirmar Senha:</td>	<td><input name="confsenha" type="password" id="confsenha" size="10" maxlength="10"></td>  </tr>  <tr>	<td width="286" height="35"><p>E-Mail:</p>	</td>	<td><input name="email" type="text" id="email" size="50" maxlength="50"></td>  </tr>  <tr>	<td width="286" height="35">Confirmar E-Mail:</td>	<td><input name="confemail" type="text" id="confemail" size="50" maxlength="50"></td>  </tr>  <tr>	<td height="35"> </td>	<td>Tipo: 	<input name="textfield7" type="hidden" size="2" maxlength="2"> 	Status: 	<input name="textfield8" type="hidden" size="2" maxlength="2"> 	Data e Hora do Registro: 	<input name="textfield9" type="hidden" size="57"></td>  </tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

AerSoftware    0

AerSoftware
Postado

Oi Ciclone, valeu pela ajuda. Fiz umas modificações nessa página e tirei a tabela.Mas fiquei com umas dúvidas. Como dou um espaço entre cada div, pois como coloquei bordas nelas, elas ficaram coladas uma nas outras. E também, como diminuo tamanho que fica a borda, pq achei elas grandes demais pro texto pequeno dentro (aquelas onde é pra inserir os dados.O html ficou assim:

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="pt"><style>@import "estilos/padrao/padrao.css";</style><head><title>Biblioteca de Quadrinhos: Cadastro de Usuários</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><p>Imagem de topo.</p> <div class="cad_usuarios_titulo"> <p>Cadastro de Usuários</p></div> <div class="cad_usuarios_corpo"> <p>A Biblioteca de Quadrinhos é um site privado. Portanto, qualquer cadastro de usuário deverá ser autorizado por seu Administrador. Após o cadastro, será enviado um e-mail para o Administrador do site solicitando sua ativação. Certifique-se de cadastrar um e-mail válido e funcional, pois será enviado para esse e-mail a confirmação de ativação de seu cadastro.</p> </div> <div class="cad_usuario_nome"> <p>Nome Completo: <input name="nome" type="text" id="nome3" size="50" maxlength="50" /> </p> </div> <div class="cad_usuario_username"> <p>Username: <input name="username" type="text" id="username2" size="15" maxlength="15" /> </p> </div> <div class="cad_usuario_senha"> <p>Senha: <input name="senha" type="password" id="senha2" size="10" maxlength="10" /> </p> </div> <div class="cad_usuario_confsenha"> <p>Confirmar Senha: <input name="confsenha" type="password" id="confsenha2" size="10" maxlength="10" /> </p> </div> <div class="cad_usuario_email"> <p>E-Mail: <input name="email" type="text" id="email2" size="50" maxlength="50" /> </p> </div> <div class="cad_usuario_confemail"> <p>Confirmar E-Mail: <input name="confemail" type="text" id="confemail2" size="50" maxlength="50" /> </p> </div> <p>Tipo: <input name="textfield7" type="hidden" size="2" maxlength="2" />Status:<input name="textfield8" type="hidden" size="2" maxlength="2" />Data e Hora do Registro:<input name="textfield9" type="hidden" size="57" /></p></body></html>

E o css ficou assim: (tem algum problema com os espaços de comentários? Pois tentei fazer ele bem explicado..

/* CSS Document *//*************************************************************************************//*************************************************************************************//** **/ /** CADASTRO DE USUÁRIOS (cad_usuarios.html) **//** **//*************************************************************************************//*************************************************************************************/.cad_usuarios_titulo /* Título da página */{text-align:center;font-size:36px;font-family:Arial, Helvetica, sans-serif;border-width:medium;border-style:solid;border-color:#0000FF;/*background: #CC0000;*/}.cad_usuarios_corpo /* Texto de apresentação da página */{text-align:center;font-size:16px;font-family:Verdana, Arial, Helvetica, sans-serif;border-width:thin;border-style:groove;border-color:#CC0000;/*background: #CC0000;*/}.cad_usuario_nome{border-width:thin;border-style:groove;border-color:#0000FF;}.cad_usuario_username{border-width:thin;border-style:groove;border-color:#0000FF;}.cad_usuario_senha{border-width:thin;border-style:groove;border-color:#0000FF;}.cad_usuario_confsenha{border-width:thin;border-style:groove;border-color:#0000FF;}.cad_usuario_email{border-width:thin;border-style:groove;border-color:#0000FF;}.cad_usuario_confemail{border-width:thin;border-style:groove;border-color:#0000FF;}/*************************************************************************************//*************************************************************************************//** **/ /** INDEX (index.php) **//** **//*************************************************************************************//*************************************************************************************/.index_topo /* Imagem de topo do index */{font:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #CC0000;}.index_menu /* Menu principal do index - esquerda */{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #0066FF;}.index_login /* Área de login do index - direita */{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #00FFCC;}.index_apresentacao /* Área de apresentação - centro-acima */{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #FF6600;}.index_estatisticas /* Área de estatísticas - centro-abaixo */{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #FFFF99;}.index_rodape /* Rodapé da página - abaixo */{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:24px;background: #6699FF;}

Valeu pela ajuda..Allan Elias Ramos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Caro Allan, vejo que você está bem no início do seu desenvolvimento baseado nas webstandards, por isso vou te dar umas dicas:

 

1- Leia e estude sobre o assunto. Principalmente sobre a questão que você falou de não saber quando usar a identificação por nome (#), por classe (.) ou por tipo do elemento. Faça o tutorial do www.maujor.com pra você aprender esta parte inicial, ela irá te economizar MUITO código.

 

Quando você tiver lido e alterado seu código com relação a isto, volte aqui, poste o resultado que eu modificarei e corrigirei ele pra você...

 

EDITADO: Este faq http://www.maujor.com/tutorial/faq.php será muito útil pra você...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

E ae micox, tudo tranquilo????

 

AerSoftware,

 

Esse link q foi passado pra você do maujor é ótimo. Depois de estudar muito ele, de uma lida nesses artigos sobre posicionamento tb, acho que eles podem ajudar muito!!!

 

E não esqueça de postar o resultado como o micox falou!!!!

 

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

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