CSS não é fácil !

[LuisPedro 0]

Olá pessoal!!

 

Dizer que CSS é simplers é o mesmo que um chinês dizer que falar chinês é fácil....

 

Sou programador Flex/Flash Builder e até agora apenas usava o CSS para formatar tipos de letras, tamanhos, etc...no entanto tenho agora um projecto que terá de ser visualizado em navegadores moveis (iPad, iPhone, etc...) e como não há suporte flash nos equipamentos alvo decidi que a melhor forma é fazer em PHP.

Nota: Seu que o Flash Builder 4.5.1 tem suporte para iOS mas isto não se trata de uma aplicação mas sim uma pagina web.

Como sou um perfeccionista, e apesar de não estar muito dentro do HTML, quero fazer as coisas como deve ser e fazer tudo sem o uso de tabelas, para isso o CSS é obrigatório.

 

Voces podem até rir mas passei os últimos 3 dias INTEIRINHOS a tentar fazer 2 caixas (login e registo) e acreditem que até agora não consegui o resultado esperado que não é nada do outro mundo!! Caixas normalissimas com um conjunto de campos para preencher. Coisa que perderia apenas meia horita no Flex, no CSS já lá vão 3 dias.

Eu não tenho acesso ao Internet Explorer e por isso não tenho a mínima noção de como aparece nesse browser.

 

Tenho lido e lido e lido e pesquisado e tentado entender, mas o que é certo é que CSS não é facil devido a quantidade de formas diferentes de chegar ao mesmo fim (infelizmente para mim ainda não encontrei a forma que resolve o meu fim).

 

Gostava que algum dos gurus do CSS aqui do forum me pudesse dar uma dicas para que eu possa começar a entender um pouco o CSS, por favor não me mandem para www.maujor.com por é ai que eu tenho aprendido o pouco, ou nada, que sei de CSS.

 

PERGUNTA:

Existe uma forma unica de fazer o que quer que seja em CSS? Ou há varias maneiras, todas elas correctas e vai da escolha do programador? Por exemplo uma das minhas grandes duvidas é porque estou uso <loginForm> e não por exemplo <div id="loginForm">?

O que é mais correcto de se usar??

 

CSS

<style type="text/css" media="all">

/* LOGIN FORM */
#loginForm { font: 11px Verdana, Arial, sans-serif; width:250px; color:#000; border:2px #900 solid; margin-bottom:10px }
#loginForm title { color:#FFF; font-weight:bold; text-transform:uppercase; background:#900; padding:5px 0px 5px 10px; display:block }
#loginForm p { display:block; margin:5px 10px 5px 10px }
#loginForm label { width:60px; text-align:right; display:inline-block }
#loginForm input { width:150px; border:solid 1px #900 }

#loginForm submitArea { display:block; text-align:right; margin:5px 20px 5px 10px }
#loginForm submitArea label { width:auto }
#loginForm submitArea input { width:auto }
#loginForm submitArea p { display:inline; margin-left:0px; margin:0px }

/* REGISTER FORM */
#registerForm { font: 11px Verdana, Arial, sans-serif; width:250px; color:#000; border:2px #900 solid; margin-bottom:10px }
#registerForm title { color:#FFF; font-weight:bold; text-transform:uppercase; background:#900; padding:5px 0px 5px 10px; display:block }
#registerForm p { display:block; margin:5px 10px 5px 10px }
#registerForm label { width:90px; display:inline-block; text-align:right }
#registerForm input { width:120px; border:solid 1px #900 }

#registerForm submitArea { display:block; text-align:right; margin:5px 20px 5px 10px }
#registerForm submitArea label { width:auto }
#registerForm submitArea p { display:inline; margin:0px; margin-right:0px }

#registerForm sexFieldArea { display:block; margin:5px 10px 5px 10px }
#registerForm sexFieldArea p { display:inline-block; margin:0px }
#registerForm sexFieldArea input { width:auto }
#registerForm sexFieldArea label#radioLabel { width:auto; margin:0px }

</style>

 

HTML

<form action="" id="loginForm">
    <title>Efectue o login</title>
    <p><label>Email:</label> <input type="text"/></p>
    <p><label>Password:</label> <input type="password"/></p>
    <submitArea>
         <p><label>Manter login activo </label> <input type="checkbox"/></p>
         <p><input type="submit"/></p>
</submitArea>
</form>

<form action="" id="registerForm">
<title>Registar novo utilizador</title>
    <p><label>Primeiro nome:</label> <input type="text"/></p>
    <p><label>Ultimo nome:</label> <input type="text"/></p>
    <p><label>E-mail:</label> <input type="text"/></p>
    <p><label>Repetir email:</label> <input type="text"/></p>
    <p><label>Password:</label> <input type="password"/></p>
    <sexFieldArea>
    	<p><label>Sexo:</label></p>
         <p><input type="radio" /></p>
         <p><label id="radioLabel">M</label></p>
         <p><input type="radio" /></p>
         <p><label id="radioLabel">F</label></p>
    </sexFieldArea>
    <p><label>Password:</label> <input type="text"/></p>
    <submitArea>
         <p><input type="submit"/></p>
</submitArea>     
</form>

 

NOTA: Eu nesta fase que estou a aprender, decidi definir os estilos para as 2 caixas de forma separado. Sei que com um pouco mais de tempo será possível eliminar algumas linhas da formatação CSS.

 

PERGUNTAS:

0. Esta estrutura HTML está correcta? De certeza que deve haver umas centenas mais de fazer o mesmo mas esta está correcta? Ou o que está errado fazer?

[William Bruno 1501]

Existe uma forma unica de fazer o que quer que seja em CSS?

existem poucas formas "boas" de se fazer.

 

 

 

Ou há varias maneiras, todas elas correctas e vai da escolha do programador?

é como eu disse, você pode fazer de várias formas, porém cada forma implica ser mais simples, ou não. Funcionar melhor ou não.

 

Por exemplo uma das minhas grandes duvidas é porque estou uso <loginForm> e não por exemplo <div id="loginForm">?

no caso, você não deve inventar tags.

Use <div id="loginForm">. E pronto.

<loginForm> não existe, portanto não deve ser usado. Também não existem os teus: <sexFieldArea>, e <submitArea>. Remova eles.

Valide a tua marcação: http://validator.w3.org/

 

 

O que é mais correcto de se usar??

é correto usar, as tags que existem, e que foram homologadas(e portanto validam)

 

0. Esta estrutura HTML está correcta?

não muito.

você pode por exemplo remover esses paragrafos dai. <p> Não fazem sentido dentro de um formulario.

E tambem retirar essas tags q não existem. <sexFieldArea>..

 

De certeza que deve haver umas centenas mais de fazer o mesmo mas esta está correcta? Ou o que está errado fazer?

A mais correta é aquela que funciona, e que faz sentido para você. Que você tenha total controle sob oq está fazendo.

[LuisPedro 0]

Olá Bruno.

 

Obrigado pela tua resposta e pelas dicas que foram preciosas...

Como disse, estou nos inícios do CSS e por isso peço desculpa se de alguma forma "assassinei" o CSS, prometo tentar melhorar pois é meu objectivo escrever código limpo e correcto e por isso te agradeço as dicas que deste.

 

Vou então alterar o código e voltar a coloca-lo aqui para revisão.

 

Os <p> usei-os para conseguir separar as linhas dos campos assim como conseguir agrupar o elemento <label> com o <input> na mesma linha mantendo uma largura fixa da <label>. Qual a forma correcta?

 

Até já!!

[William Bruno 1501]

Os <p> usei-os para conseguir separar as linhas dos campos

use o <label> mesmo, com um display: block

 

 

assim como conseguir agrupar o elemento <label> com o <input> na mesma linha mantendo uma largura fixa da <label>.

com o display: block; na label, você consegue isso.

 

 

veja sobre o elemento : <fieldset> ele supre essa tua necessidade de agrupar os campos.

e sobre o <legend>, o <title> foi usado de forma indevida ali.

[LuisPedro 0]

Após ter validado o documento, reparei que <legend> tem de estar dentro de <fieldset> o que leva a deslocar-se para a direita uns 10px, qual a forma de reparar isso para que não tenha este desvio?

[JCMais 75]

Usar um CSS Reset.

[LuisPedro 0]

Pegando nas dicas que me deram, cheguei à seguinte conclusão:

 

CSS

#loginForm { font: 11px Verdana, Arial, sans-serif; width:250px; color:#000; border:3px #a3242b solid; margin-bottom:10px; background:#eaca89 }
#loginForm legend { color:#FFF; font-weight:bold; font-size:11px; text-transform:uppercase; background:#ec632b; padding:5px 0px 5px 5px; width:245px !important; margin:0px }
#loginForm fieldset { border-style:none; margin:0px; padding:0px }
#loginForm label { width:60px; text-align:right; float:left; line-height:29px; margin:5px 5px 0px 5px }
#loginForm input { width:160px; border:solid 1px #900; height:20px; margin: 10px 0px 0px 0px }

#loginForm div#submit { text-align:right }
#loginForm div#submit label { width:auto; margin:0px 0px 0px 10px; float:none }
#loginForm div#submit input { width:auto; height:auto; margin:10px 16px 10px 5px }

 

HTML

<form action="" id="loginForm">
<fieldset>
    	<legend>Efectue o login</legend>
    	<label>Email:</label> <input type="text"/><br />
         <label>Password:</label> <input type="password"/><br />
         <div id="submit">
         	<label>Manter login activo:</label><input type="checkbox"/><input type="submit"/>
         </div>
    </fieldset>
</form>

 

Em FF, Safari, Chrome e iPad tudo é apresentado conforme pretendo, não sei no IE

Fica aqui o link para que voces me possam dizer: Clique aqui

 

Mais uma vez conto com a vossa ajuda para me dizerem o que continua mal para que possa ir corrigindo e dessa forma aprendendo pois não há melhor forma de aprender do que "meter as mãos na massa"!

 

Uma duvida que tenho:

#loginForm label { width:60px; text-align:right; float:left; line-height:29px; margin:5px 5px 0px 5px }

Isto significa que todas as tag <label> vão ter esta formatação desta linha para baixo? ou só as tag <label> que estejam dentro de #loginForm?

Este minha pregunta prende-se pelo facto de que, mais abaixo, tenho de indicar na tag <label> dentro de #loginForm div#submit, que float:none. Pelo que pude entender, todas as <label> dentro de #loginForm div#submit vão herdar a formatação de #loginForm e todas as alterações efectuadas vão ser reflectidas apenas na <lable> dentro de #loginForm div#submit.

Está correcto o que estou a dizer aqui?

[William Bruno 1501]

só as tag <label> que estejam dentro de #loginForm?

sim. Exato.

mesmo que essas tags <label> não sejam filhas direta de #loginForm. Mas apenas se elas tiverem algum parentesco com #loginForm

 

 

Está correcto o que estou a dizer aqui?

Perfeito. Pelo teu #submit estar dentro de #loginForm, então a label q está dentro de #submit, tb está dentro de #loginForm, e por esse motivo herda a declaração acima.

Esta usando MAC ?

 

instale uma Máquina Virtual. Ai você conseguirá ver como fica no Internet Explorer.

[LuisPedro 0]

Esta usando MAC ?

 

instale uma Máquina Virtual. Ai você conseguirá ver como fica no Internet Explorer.

 

Sim estou, não tenho a mais pequena noção de como fica no IE. Instalar uma máquina virtual implica ter de criar uma partição no disco e instalar um sistema operativo que só o usaria para testar o IE ou utilizando aplicações que igualmente me obrigam a instalar todo um Windows, de novo, por causa do IE.

Agradeço a sugestão mas não creio que justifique utilizar uma boa parte de disco duro para isso :)

 

Mas já agora, como fica no IE?

 

Vou passar para a 2a fazer que é criar o formulário de registo por baixo desse de login. Conto de novo com a vossa ajuda :)

[William Bruno 1501]

Instalar uma máquina virtual implica ter de criar uma partição no disco e instalar um sistema operativo que só o usaria para testar o IE ou utilizando aplicações que igualmente me obrigam a instalar todo um Windows, de novo, por causa do IE.

não é tão complicado assim não cara.

 

Tem um programinha do MAC, q você escolhe uma imagem .vdi do SO + versão do IE e pronto. Não precisa mexer com instalações.

 

Em todo caso, apesar de não tão confiavel, dê uma averiguada com esse serviço:

http://browsershots.org/