CSS validação !

jnejunior · Junho 21, 2008

olha só essa... fui valida o meu site, só pra ver se tinha muita coisa pra arrumar, ai não é que até tinha um pouquinho...

mas o detalhe é o seguinte, eu valido e mesmo depois que arrumo ou altero o código ele não valida...

ex:

tem um trecho assim:

div rodapé Parse Error --> #footer { margin: 30px 0px 0px 0px; } <-- lá no site da w3c

já mudei de tudo que é jeito e sempre da a mensagem de erro, o que eu faço???

este não é o único trecho tem mais:

elemento geral Parse Error --> body { background: #354157; text-align: center; }

15 div tudo Parse Error --> #wrapper { width: 900px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; }

23 div cabe�alho Parse Error --> #header { padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; }

31 div menu de navega��o Parse Error --> #menunav { background: url("barra_nav.png"); height: 60px; text-align: center; width: 900px; }

42 div conteudo Parse Error --> #content { width:900px; background-color:#ffffff; text-align:justify; padding-bottom:30px; padding-left:0px; padding-right:0px; padding-top:0px; }

valeu

William Bruno · Junho 22, 2008

Coloca o link para o validador..

são erros mesmo? ou apenas "warnings" essas coisas ai??

Na verdade, muitos dos warnings que ele apresenta, é pq você poderia ter economizado, por exemplo:

padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px

você poderia ter deixado somente no seleto global:

* {padding:0;}

e PRONTO, não teria que zerar paddings, no teu CSS.

jnejunior · Junho 22, 2008

Coloca o link para o validador..

são erros mesmo? ou apenas "warnings" essas coisas ai??

Na verdade, muitos dos warnings que ele apresenta, é pq você poderia ter economizado, por exemplo:
padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px
você poderia ter deixado somente no seleto global:
* {padding:0;}
e PRONTO, não teria que zerar paddings, no teu CSS.

é esse:

http://jigsaw.w3.org/css-validator/

mas isso que tu falou eu já fiz tambem..

antes eu tinha um padding de 30px pada baixo eu eu usava o o padding para cada um dos lado como 0px e só para a padding-bottom eu usava 30px, depois eu mudei e fiz como tu disse: padding: 0px 0px 30px 0px;

mas tambem não validou...

o q eu faço???

William Bruno · Junho 22, 2008

Oque eu to querendo, é o link do teu site sendo validado.. e não do validador.

^^

jnejunior · Junho 22, 2008

Oque eu to querendo, é o link do teu site sendo validado.. e não do validador.

^^

http://www.backdesign.com.br

detalhe, eu tentei validar o xhtml e tambem não deu...

ve la pra mim faz favor...

to precisando de ajuda...

jnejunior · Junho 22, 2008

Oque eu to querendo, é o link do teu site sendo validado.. e não do validador.

^^

http://www.backdesign.com.br

só tem uma página de teste, que peguei de um amigo pra testar

detalhe, eu tentei validar o xhtml e tambem não deu...

ve la pra mim faz favor...

to precisando de ajuda...

jnejunior · Junho 22, 2008

Oque eu to querendo, é o link do teu site sendo validado.. e não do validador.

^^

http://www.backdesign.com.br

só tem uma página de teste, que peguei de um amigo pra testar

detalhe, eu tentei validar o xhtml e tambem não deu...

ve la pra mim faz favor...

to precisando de ajuda...

Guilherme Rambo · Junho 22, 2008

Quick Tip: Se você se preocupou com a semântica, não precisa se matar para fazer o código validar "a todo custo" http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[]'s

William Bruno · Junho 22, 2008

Use esse cabeçalho:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

você utilizou comentários com sintaxe de HTML... comentários no arquivo CSS, devem ser feitos com:

/* comentário aqui */

ps: Inside, o problema dele é outro... tem erros mesmo.. deixa ele validar pra arrumar essas coisas..

jnejunior · Junho 22, 2008

Use esse cabeçalho:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
você utilizou comentários com sintaxe de HTML... comentários no arquivo CSS, devem ser feitos com:
/* comentário aqui */

ps: Inside, o problema dele é outro... tem erros mesmo.. deixa ele validar pra arrumar essas coisas..

coloquei o seu cabeçalho e ficou a mesma coisa nada de validar o xhtml e o css continua os mesmos erros.

?????????????????????????????????

William Bruno · Junho 22, 2008

O problema do teu CSS, é que você usou errado os comentários.

Não faça  no CSS, e sim /**/

troque

por

/* seletor universal */

E todos os outros tb.

e teu xhtml, só não tá validando, pq tá faltando um alt na tag de imagem. Coloque:

Aprendiz CSS · Junho 23, 2008

no meu aqui o css só apresentou dois warnings!

e nesses warnings o sistema está falando que tem mais espeços em branco do que deveria, e por isso ele os está ignorando

só isso!

no HTML só um erro

Line 74, Column 126: there is no attribute "heigh".

…es/vcss-blue" alt="Valid CSS!" heigh="31" width="88"/>

que ainda por cima é erro de digitação

outra coisa controle altura e largura pelo css e não na tag

abraço

jnejunior · Junho 23, 2008

no meu aqui o css só apresentou dois warnings!

e nesses warnings o sistema está falando que tem mais espeços em branco do que deveria, e por isso ele os está ignorando

só isso!

no HTML só um erro

Line 74, Column 126: there is no attribute "heigh".

…es/vcss-blue" alt="Valid CSS!" heigh="31" width="88"/>

que ainda por cima é erro de digitação

outra coisa controle altura e largura pelo css e não na tag

abraço

estou grato a todos vcs que me ajudaram mais uma vez... já deu tudo certo... valeu mesmo...

eu queria saber se alguem sabe criar um preloader em css, ja vi em um site, e quero saber se funciona mesmo???

outra coisa...

eu tenho um ID #header, e quero criar um outro ID dentro dele, e esse outro ID vai fazer a configuração do link do banner... como devo proceder???

valeu

Aprendiz CSS · Junho 23, 2008

estou grato a todos vcs que me ajudaram mais uma vez... já deu tudo certo... valeu mesmo...

estamos aqui para isso

eu queria saber se alguem sabe criar um preloader em css, ja vi em um site, e quero saber se funciona mesmo???

como assim pre-loader? está falando das imagens?? não entendi

eu tenho um ID #header, e quero criar um outro ID dentro dele, e esse outro ID vai fazer a configuração do link do banner... como devo proceder???

deve proceder da forma que falou, voc~e pode criar um ID dentro do outr o quanto quiser!

espero ter ajudado, abraço

William Bruno · Junho 23, 2008

Preloader é em JavaScript ne!?

Com CSS, o que mais se asselha disso, acho que é o CSS Sprite.

<script type="text/javascript">

imagem1 = new Image();
imagem2 = new Image();
imagem3 = new Image();

imagem1.src = "img/verde.gif";
imagem2.src = "img/amarelo.gif";
imagem3.src = "img/verde.gif";
</script>

Para fazer um "id" dentro do outro, você pode fazer assim:

<div id="header">
	 <div id="outroid">
	 </div>
</div>

E no css, chamar do seguinte jeito:

#header #outroid { propriedades }

Ou seja, "o elemento com "id#outroid", que tiver dentro do "id#header."

Aprendiz CSS · Junho 23, 2008

Ou seja, "o elemento com "id#outroid", que tiver dentro do "id#header."

ali onde esta escrito id#nomedadiv

não é id, e sim o elemento que possui o ID tal

abraço

jnejunior · Junho 23, 2008

Preloader é em JavaScript ne!?

Com CSS, o que mais se asselha disso, acho que é o CSS Sprite.
<script type="text/javascript">

imagem1 = new Image();
imagem2 = new Image();
imagem3 = new Image();

imagem1.src = "img/verde.gif";
imagem2.src = "img/amarelo.gif";
imagem3.src = "img/verde.gif";
</script>
Para fazer um "id" dentro do outro, você pode fazer assim:
<div id="header">
	 <div id="outroid">
	 </div>
</div>
E no css, chamar do seguinte jeito:
#header #outroid { propriedades }
Ou seja, "o elemento com "id#outroid", que tiver dentro do "id#header."

o preloader que eu vi era CSS mesmo:

ex:

.preloader {

background: img.gif ou jpg

}

.preloader2 {

background: img.gif ou jpg

}

e no caso do ID que tu falou, da pra fazer assim:

eu tenho uma div #header e dentro dela tenho uma imagem, e essa imagem é um link, tu sabe que quando uma imagem é um link tem aquela borda em volta dela... eu quero criar um outro id dentro do id #header mas no código CSS para definir a borda do link a:link como 0 zero...

entendeu...

valeu

Aprendiz CSS · Junho 23, 2008

esse pre-loader em CSS é POG, não se deve usar! [ ao meu ver ].

mas pense se você fizer isso, você demorará para carregar a página da primeira vez, será que vale a pena o pre-loader?

não precisa de um outro id! poderia ser uma classe ou até mesmo especificidade!

olha

#header a { text-decoration: none; } 
#header img { border: none; }

abraço

brcontainer · Junho 24, 2008

quanto ao preloader na verdade ele é um tanto quanto inutil comparado ao preloader em JS, mas se você quer um exemplo (lembrando esses PRELOADERS não são 100% funcionais):

http://www.barenakedapp.com/the-design/dis...ing-percentages

o unico que pode ser feito e mais funcional seria isso (somente para imagens):

img.img{
background: #fff url(load.gif);/*gif animado*/
width:100px;
height:100px;
}

<img src="" class="img" alt="" />

lembre-se deve ser definido altura e largura da imagem para que funcione bem.

Arquivado

CSS validação !

Recommended Posts

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 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

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

jnejunior 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta