Iniciando os estudos com tableless e css

inforsis · Junho 25, 2007

/*Boa Noite a todos, bom estou iniciando meus estudos na area de tableless e css, até hoje apenas desenvolvia usando 100% tabela (bem ultrapassado nao? rs., pois é, nunca é tarde para aprender novas tecnologias) e depois de mais de dois anos apenas com tabelas, estou começando a estudar e me orientar sobre o uso de tableless e css, bom desenvolvi esta tela simples

Tela de Login

com nada dimais porém foi praticamente a primeira "layout" que desenvolvi sem usar tabela. gostaria que vocês avaliassem o codigo e me dessem alguns toques dos pontos onde errei e dos pontos que poderia fazer melhor, para que possa estar sempre melhorando e progredindo nos meus estudos...

segue abaixo o codigos:

style.css

body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}	#allsite {	position:absolute;	top: 50%;	left: 50%;	height: 400px;	width: 780px;	margin-top: -200px;	margin-left: -390px;}#logo{	width:138px;	height: 150px;	left: -138px;	background-image:url(../images/fpf.jpg);}#topo {	width: 642px;	height: 150px;	position:absolute;	left: 139px;	top: 0px;}#title_login {	width:280px;	height: 30px;	position:absolute;	left: 245px;	top: 166px;}#login {	width:280px;	height:100px;	position:absolute;	left: 245px;	top: 198px;}#use {	width: 70px;	height:30px;	position:absolute;	left: 0px;	top: 10px;}#campo {	width: 210px;	height: 30px;	position:absolute;	left: 70px;	top: 10px;}#senha {	width: 70px;	height:30px;	position:absolute;	left: 0px;	top: 40px;}#campo_senha {	width: 210px;	height: 30px;	position:absolute;	left: 70px;	top: 40px;}#botao {	width:210px;	height:30px;	position:absolute;	left: 69px;	top: 71px;}#texto_topo {	width: 642px;	height: 39px;	position:absolute;	top: 110px;}.p {	text-align:justify;	word-spacing:normal;}.p2 {	text-align:center;	font-variant:small-caps;}

tela.html

<html><body><form action="autentica.php" method="post" name="form1" id="form1"><div id="allsite"><div id="logo"></div>	<div id="login">	  <div id="use">User:</div>	  <div id="campo">		<input name="txtUser" type="text" id="txtUser" size="10" maxlength="10" />	  </div>	  <div id="senha">Senha:</div>	  <div id="campo_senha">		<input name="txtSenha" type="password" id="txtSenha" size="10" maxlength="10" />	  </div>	  <div id="botao">		<input name="Submit" type="submit" value="Login" />	  <? print urldecode($txt);?></div>	</div>	<div id="title_login" class="p2">Login</div>	<div id="topo">	  <div id="texto_topo" class="p">This WebSite this in development phase, soon had found accessible in the moment just this accessible one for atmosphere coorporativo. Enter with user's name and the password to have access.</div>	</div> </div></form></body></html>

PS: 1 - caso tenha errado em abrir o topico por alguma regra, algum moderador da area me avise please...

2 - antes de perder o tempo com respostas do tipo? "porque você usou isso?" ou "porque você usou aquilo?" a resposta é: porque estou apredendo, tenho direito de errar... entao melhor sugerir, "voce poderia usar isso." "voce poderia usar aquilo"

3 - já conheço o site do maujor e sempre estou lendo conteudos de lá e até mesmo daqui do forum de topicos sobre o assunto, porém para complementar abri o topico para pedir dicas sobre o que estou fazendo...

bom aguardo dicas...

até mais...*/

Guilherme Rambo · Junho 25, 2007

Hum, parabéns pela iniciativa de aprender, muitos não querem saber e seguem fazendo as coisas do jeito errado...

Dois sites legais, além do maujor, são:

- O meu blog

- O blog do Diego

Boa sorte nos estudos

[]'s

jeronymo · Junho 25, 2007

Opa, salve inforsis!

Cara, dei uma olhada aí no sue código... encontrei um erro de semântica meio estranho: você está usando muitas divs, em algumas você não está fazendo bom uso dele, há tags específicas para algumas das situações... por exemplo:

<div id="use">User:</div>
     <div id="campo">
       <input name="txtUser" type="text" id="txtUser" size="10" maxlength="10" />
     </div>

no caso da div "use": cara, quando você quer estilizar textos assim, você deve usar o <p> (isso serve também para o caso da senha e do texto do topo... sempre que você tiver texto, o <p> é uma alternativa)... faça uma estilização da tag no css, e caso precise de algo de diferente para o texto, você usa uma class... no css, ficaria por exemplo:

p { // assim, estilizamos todas as ocorrências de <p>/*e segue aqui o restante do estilo*/}

aí, no html, seria só colocar (colocarei o class só pro caso de precisar algo diferente pra outros <p>s):

<p class="user">User:</p>

no cado da div "campo": é desnecessária uma div dessas... você pode "chamar" o input através de um class, que ficaria apenas como parâmetro e já estilizaria tudo, sem necessidade de tags

outra coisa: a div "allsite" é dispensável também, note que você pode acessar pela <form> essas coisas, uma vez que essa tag vem antes da <div>...

e cara... não entendi seu código, você está começando pelo formulário pra depois ir pro topo... isso pra mim não faz nenhum sentido, se você colocasse primeiro o topo e depois o formulário, ficaria até mais fácil pra posicionar no css, pois as tags já estariam posicionadas na sequência... mas enfim, é uma sugestão

espero que seja o que queria... qualquer coisa, só falar!

até mais! B)

Giovani · Junho 25, 2007

inforsis, parabéns!

Bela iniciativa!

Sei que não é legal ficar lendo muitos links, mas a sequência a seguir é super importante, tem que ler:

http://forum.imasters.com.br/index.php?s=&...st&p=536888

Lendo esses links você já vai saber bastante coisa (claro que conhecer HTML ajuda, e muito).

É claro, não adianta só ler, tem que ir praticando e tirando as dúvidas aqui no fórum. Garanto a você que em poucos meses você estará dominando boa parte do assunto.

Mas não equeça, leia e coloque em prática....leia e coloque em prática....tentou e não conseguiu, volte e pergunte aqui no fórum.

Boa sorte para você nessa nova jornada.

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Nícolas · Junho 25, 2007

Mais uma dica...

Olhando seu CSS vi que você esta está utilizando muitos position absolutes pra posicionar seus itens.

Cara num faz isso não.

Apesar que você começou muito bem parabéns =)

Um link que sempre passo para quem ta aprendendo é esse.

http://www.tableless.com.br/video-tutorial...me-da-visie-css

Uma video aula muito animal que o cara monta a home do site da visie todinha em tableless...

Da pra aprender muita coisa :)

Da uma olhada nela depois que é bem interessante

;)

inforsis · Junho 25, 2007

/*Bom DIa a todos. :D valeu mesmo o incentivo que estão me dando....alias eu esperava que iria receber incentivos claro, só que mesmo assim ainda fiquei feliz com as palavras e dicas de vocês,"#INSIDE#"vlw vou dar uma olhada nos links, alias o seu blog eu já dei uma pequena olhada ontem (não li muita coisa, mais assisti uma video aula) achei o conteudo bem legal... parabens pelo seu trabalho.jeronymovlw broder pelas dicas, concerteza irei rever os pontos que citou acima... (voce sabe bem minha vontadde e esforço em aprender...) vlw as dicas, mais tarde quando estiver em casa irei rever..."gio!"bom ler não é meu forte, mais ler conteudos interressantes sobre a area.. (essencial), então valeu pelos links, irei ler sim...e como voce dissi ler e por em pratica... e claro duvidas depois desse incentivo inicial, não exitarei em perguntar... vlw mesmo!"nick171"vlw cara... vou dar uma olhada na video aula, em relação ao position absolutes, é porque achei mais pratico para iniciante.. (rs.)bom, caso alguem tenha mais dicas, fico grato em observar.até mais.... */

inforsis · Junho 25, 2007

...Olhando seu CSS vi que você esta está utilizando muitos position absolutes pra posicionar seus itens.Cara num faz isso não.....

/*Boa Tarde, estive pensando no que o "nick171" falou acima, alguem poderia me dizer porque não devo usar muito position absolutes (tipo quais os problemas a principio que posso ter?)obrigado até mais... */

jeronymo · Junho 25, 2007

...Olhando seu CSS vi que você esta está utilizando muitos position absolutes pra posicionar seus itens.Cara num faz isso não.....
/*Boa Tarde, estive pensando no que o "nick171" falou acima, alguem poderia me dizer porque não devo usar muito position absolutes (tipo quais os problemas a principio que posso ter?)obrigado até mais... */

Salve inforsiso problema de position absolute é que o site vai ficar assim em qualquer resolução... isso pode ser um problema na questão acessibilidade, se você faz um site com o tamanho 800x600, ele fica muito pequeno em uma dimensão maior... se você faz pra 1024 e alguém vai ver o site com 800x600, o site fica muito grande, forçando o usuário a usar a barra de rolagem...mas é normal, tem gente que usa assim porque acha melhor... mas o que eu mais vejo sendo recomendado é o uso de layouts com relativeaté mais! B)

Nícolas · Junho 25, 2007

Sem falar com os problemas de alinhamento..Pois como os objetos são flutuantes, acontece muito de você redimencionar a janela do navegador e o site ele acaba zuando todo o layout, fazendo itens cair em cima de lugares errados e etc.=)

Giovani · Junho 25, 2007

inforsis, naquele gicantesca lista de links que te passei tem alguns artigos no Bruno (ex-moderador aqui) que esxplicam tudo sobre posicionamento.

Vale a leitura...uma 3 vezes no mínimo para fixar... http://forum.imasters.com.br/public/style_emoticons/default/shifty.gif

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

inforsis · Junho 26, 2007

inforsis, naquele gicantesca lista de links que te passei tem alguns artigos no Bruno (ex-moderador aqui) que esxplicam tudo sobre posicionamento.

Vale a leitura...uma 3 vezes no mínimo para fixar... http://forum.imasters.com.br/public/style_emoticons/default/shifty.gif

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

/* Boa Noite :rolleyes:

bom valeu a explicação, jeronymo e "nick171" e "gio!", bom por conta dos problemas em relação a resolução que o jeronymo citou acima, por enqunato ainda não vejo problemas, porém o problema que o "nick171" citou isso sim me preucupa, bom como posso corrigir isso apenas mudando o valor de position ou com algum codigo?

bom e "gio!" vlw mais uma vez a dica de leitura, assim que conseguir ferias na faculdade terei mais tempo para ler e fixar :rolleyes: (é que ainda estou tendo de estudar para umas finais na faculdade...) http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

até mais... */

Nícolas · Junho 26, 2007

Cara isso você vai arrumar montando tudo estruturado...div dentro de div...Se vai pegar bem isso na video aula com certeza cara.=)

inforsis · Junho 26, 2007

Cara isso você vai arrumar montando tudo estruturado...div dentro de div...Se vai pegar bem isso na video aula com certeza cara.=)

/*vlw "nick171", sem querer ser chato (rs.)aproveitando que você citou "div dentro de div", acho que o jeronymo já havia me falado sobre isso na hora de estruturar a pagina, bom a minha dúvida é existe alguma "contra indicação" em relação a usar muitas div para fazer essa marcação/estruturação...? */

Giovani · Junho 26, 2007

Se você não confundir div com célula de tabela (evento conhecido como divmania) não tem problema.

Olha esse site, "fuça" no código deles que você aprende, se a gente ficar falando fica só na sua imaginação http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

....bom a minha dúvida é existe alguma "contra indicação" em relação a usar muitas div para fazer essa marcação/estruturação...? */

marciosantos · Junho 26, 2007

Dica: Em formulários, use recursos de formulários:

você deve alinhar os campos dos Inputs/selects/textareas/etc usando labels:

<label for="user">User:</label><input type="text" name="user" id="user"></input>

você pode usar com div ou parágrafo mas semânticamente falando, o label é o mais correto.

O uso indevido da div não é considerado um "erro" ... é apenas considerado desnecessário e como dito acima, anti-semântico, visto que existem tags específicas para tal ação.

Mas para um primeiro lay, tá ótimo. É isso aí... normas web na cabeça! :)

Abraços

Paulo de Tarso F. M. · Junho 26, 2007

você deve alinhar os campos dos Inputs/selects/textareas/etc usando labels:

Opa! Opa! Opa! Cabe uma ressalva aqui... A tag <label> não é utilizada para alinhar nada... O uso dessa tag é para quando você der um clique sobre a palavra que estiver dentro dessa tag, o cursor irá dar o foco no input que estiver com o name definido igual ao atributo for da tag <label>... Utilizando seu próprio exemplo:

<label for="user">User:</label><input type="text" name="user" id="user"></input>

Quando eu clicar na palavra User, o cursor de texto irá automaticamente focar no input com o name user, pois a tag <label> possui um atributo for definido dessa forma... Vejo então que, "semanticamente falando", essa tag <label> não tem a função de alinhar, e sim funcionar como uma etiqueta para o input, como o próprio nome já diz...

Veja a descrição dela:

HTML <label> tag

--------------------------------------------------------------------------------

Definition and Usage

Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.

Fonte: W3Schools

Só pra constar... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

inforsis · Junho 26, 2007

/*Bom Dia todos!

"marciosantos" valeu a intenção... e "Paulo de Tarso F. M." valeu a explicação...

bom "gio!" valeu mais uma vez me passando uma fonte/site para analisar... (bom como já dissi acima (só vou esperar terminar essas recuperações na faculdade...) http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

bom só um ponto e afinal, eu devo usar a div para alinhar "objetos" de um formulário ou não? :rolleyes:

a questão da label eu entendi "Paulo de Tarso F. M.".

até mais...

*/

guezth · Junho 26, 2007

minha observação é básicamente a mesma do Paulo... não usar tantos divs... usar tags especificas para cada tipo de coisa... ex.. para forms... usar label...para paragrafo usar <p>para só estilizar alguma frase ou paragrafo ou algo assim, use <span class='class'>

inforsis · Junho 26, 2007

/*entendi mais ou menos guezth, essas parte acho que só fixo quando começar a praticar mesmo..."gio!" abri o site que me passou o ultimo...cara muito show os sites que tem lá... pow vendo isso acho que não dá para pensar em outra coisa a não ser site com tableless e css, esse assunto websemantica e padroes é muito massa... espero que consiga fixar bem e desenvolver sites legais usando essas novas tecnicas (novas pra mim). deveria ter iniciado esse estudo antes... :rolleyes: vlw o apoio de todos. */

inforsis · Junho 27, 2007

/*Bom Dia a todos!

bom observando o link que o "gio!" me passou...

http://www.cssbeauty.com/

estou pensando existe diferença entre desenhar uma layou para desenvolver em tableless e desenhar uma layout para desenvolver em tabelas?

gostaria de saber se alguém poderia me dar dicas que posso usasr quando estiver desenhando uma layout para tableless (principalmente quando for usar position relative, aquelas layouts visualizadas da mesma maneira em diferentes resoluções, bom qualquer dica é bem vinda...

(caso eu não tenha sido muito claro, me informa que tentarei me expressar melhor)

até mais... */

Arquivado

Iniciando os estudos com tableless e css

Recommended Posts

inforsis 1

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

jeronymo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeronymo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

marciosantos 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

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

guezth 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1