Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

mushylex

[résolu] Débutant sur CSS

Messages recommandés

Bonjour tout le monde,

 

Depuis peu, j'ai découvert les joies du CSS :P

Alors j'ai fait une page de test, mais ça ne fonctionne toujours pas :P

(par contre, sous nvu, ça marche trés bien... allé savoir pourquoi)

 

Mon petit code de la page Html:

le code CSS est inseré en interne:

 


<!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="fr" >

<html>
<head>

 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 <title>Pouet</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <style type="text/css">
<!-- h1 { font-size: x-large ! important;
text-decoration: blink ! important;
}
-->
 </style>
</head>
<body>

<h1>Stéphanie</h1>

<h2> tu es vraiment nul pour les photos !</h2>
<br>
<img style="width: 2368px; height: 1792px;" alt="" src="HPIM0412.jpg">

</body>
</html>

 

Si vous pouviez me dire, là ou je fait erreur, ça m'aiderai beaucoup !

merci d'avance

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour Mushylex,

 

Bon, au niveau du test, tu ne croyais pas chercher la difficulté. Mais tu a commencé très fort, en invoquant la DTD la plus difficile à utiliser, la XHTML 1.0 Strict, le must du must. Tu mets la barre très haut !

 

Corrige déjà une petite erreur, tu as deux balises html, enlèves la seconde: <html>

Ensuite, d'après ta balise html, tu fais du XHTML, donc ta page doit avoir une extension .xhtml

 

Tu fais du xhtml, donc tes balises vides doivent être fermées (par espace slash chevron " />"), ce qui n'est pas le cas de la première <meta>, puis <br> et <img>

 

Ensuite, tu passes ton fichier au validateur W3C, et il te reste deux erreurs de même nature, qui te rappellent que les balises <br> et <img> ne peuvent être utilisées qu'à l'intérieur de blocs <p>, <div>, etc.

 

Et voilà le message magique : This Page Is Valid XHTML 1.0 Strict!

 

Voici le code correct (au sens XHTML) :

 

<!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="fr" >
<head>
 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
 <title>Pouet</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style type="text/css">
<!-- h1 { font-size: x-large ! important;
text-decoration: blink ! important;
}
-->
 </style>
</head>
<body>
<h1>Stéphanie</h1>
<h2> tu es vraiment nul pour les photos !</h2>
<p>
<br />
<img style="width: 2368px; height: 1792px;" alt="" src="HPIM0412.jpg" />
</p>
</body>
</html>

Nota : je suis très surpris que <img style="..." ... /> ait été accepté. Tu devrais t'empresser de remonter les clauses de style dans la feuille de style :

 

#image1 {width: 2368px; height: 1792px;}
...
<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412.jpg" />
...

et de compléter les attributs alt (pour IE) et title (recommandation W3C, pour les autres navigateurs), qui sont affichés à l'emplacement de l'image, soit le temps qu'elle arrive, soit quand elle n'arrive pas (et qui servent aussi à renseigner l'internaute non-voyant à qui un dispositif vocal explique le contenu de l'écran).

 

Et tu vas me dire que ton problème reste entier... parce que tes clauses de style <h1> ne donnent pas l'effet souhaité ? :P

Partager ce message


Lien à poster
Partager sur d’autres sites
tu fais du XHTML, donc ta page doit avoir une extension .xhtml
Ah non...

En fait, peu importe l'extension du moment que le serveur Web envoie la page en la déclarant "text/html" ou, pour du pur xhtml strict, "application/xml+html"...

In summary, 'application/xhtml+xml' SHOULD be used for XHTML Family documents, and the use of 'text/html' SHOULD be limited to HTML-compatible XHTML 1.0 documents. 'application/xml' and 'text/xml' MAY also be used, but whenever appropriate, 'application/xhtml+xml' SHOULD be used rather than those generic XML media types.

 

Peut-on savoir pourquoi tu utilises des balises de commentaire html à l'intérieur du contenu que tu as déclaré comme étant "text/css" ?

  <style type="text/css">
 h1 {
font-size: x-large ! important;
text-decoration: blink ! important;
 }
 </style>

Il se pourrait que cela fonctionne mieux...

 

Au passage, je confirme les propos de Dylav : tu devrais éviter de spécifier des attributs de style dans les balises. Certains navigateurs les ignorent purement et simplement si le doctype est xhtml strict et s'ils ne sont pas dans la feuille de style.

Partager ce message


Lien à poster
Partager sur d’autres sites

[/code]

Nota : je suis très surpris que <img style="..." ... /> ait été accepté. Tu devrais t'empresser de remonter les clauses de style dans la feuille de style :

 

#image1 {width: 2368px; height: 1792px;}
...
<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412.jpg" />
...

Euh, c'est un code en Xhtml? et le mien était en Html c'est ça?

 

Et tu vas me dire que ton problème reste entier... parce que tes clauses de style <h1> ne donnent pas l'effet souhaité ? :P

je ne sais pas encore, j'ai pas testé la modification

 

 

Pet-on savoir pourquoi tu utilises des balises de commentaire html à l'intérieur du contenu que tu as déclaré comme étant "text/css" ?

 

Tu parles des <!-- ... -->

arf je pensais que c'était des balises pour inserer le code CSS

Me suis trompé :P

 

 

 

 

Dylav, j'ai mis la XHTML 1.0 Strict en entête car je n'ai par trouver une autre entête, c tout...

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Et tu vas me dire que ton problème reste entier... parce que tes clauses de style <h1> ne donnent pas l'effet souhaité ?

bah ouai, c'est po juste :P

 

...................

 

en renommant l'extension de .html en .xhtml, quand je veux ouvrir la page, windows me demande si je veux la télécharger...

 

le code modifié:

<!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="fr" >
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />

<title>Pouet</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <style type="text/css">
h1 
{
font-size: x-large ! important;
text-decoration: blink ! important;
}

#image1 {width: 800px; height: 600px;}

 </style>

</head>

<body>

<h1>Stéphanie</h1>

<h2> tu es vraiment nul pour les photos !</h2>
<br>
<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412.jpg" />


</body>

</html>

Partager ce message


Lien à poster
Partager sur d’autres sites

Clause de style "image1" : le fait de la mettre dans la feuille de style ne relève pas de XHTML, mais de la notion de séparation entre contenu et présentation (déjà vraie avec HTML). C'est toute la plus-value d'une feuille de style : à chaque fichier ses attributions.

 

DOCTYPE : je te suggère de consulter, sur pompage.net par exemple, l'article Le DOCTYPE qu’il vous faut, de Jeffrey Zeldman (traduit par Benjamin Debouté). Il expose clairement la question et, si tu veux pousser plus loin, offre des tas de liens plus intéressants les uns que les autres...

 

Extension .xhtml : la première fois que tu veux ouvrir un fichier doté d'une extension encore inconnue, Windows te demande avec quel programme tu veux l'ouvrir. Tu peux devancer l'appel avec un clic droit, "ouvrir avec", et choisir IE ou FF ou, s'ils n'apparaissent pas dans le menu contextuel, "choisir le programme", et choisir IE ou FF dans la nouvelle fenêtre qui s'ouvre.

Mais, dans un premier temps au moins, tu peux faire au plus simple et, en tenant compte de la remarque de KewlCat, garder une extension .html, ce qui t'évitera quelques écueils un peu ardus.

 

Anomalies :

- important : il reste dans ton source une dernière anomalie au sens strict d'XHTML, la balise <br> doit s'écrire <br /> (respect de la norme de syntaxe XML pour les balises vides, ou auto-fermantes, c'est-à-dire n'ayant pas le fonctionnement ouverture / fermeture comme <p> ... </p> par exemple).

- anecdotique : si tu regardes bien, dans le <head>, tes deux balises <meta> disent strictement la même chose. Tu peux donc en virer une...

 

Stéphanie ne clignote pas : Etonnant ! Chez moi, Internet Explorer (IE 6.0.29) n'applique pas la directive "blink", alors que FireFox (FF 1.5.0.9) en tient compte (ça clignote)... on a envie de dire que c'est le monde à l'envers ! En fait, IE semble ici oublier d'appliquer une recommandation.

Partager ce message


Lien à poster
Partager sur d’autres sites
en renommant l'extension de .html en .xhtml, quand je veux ouvrir la page, windows me demande si je veux la télécharger...
C'est normal, c'est parce que IE est un ¤@#§% utilitaire dans la plus pure veine de Windows et qu'il se fie d'abord à l'extension avant de se fier aux éléments que le serveur envoie pour décrire le fichier, ou encore au contenu du fichier !

Tant que IE n'aura pas été modifié, laisse l'extension ".html"...

Partager ce message


Lien à poster
Partager sur d’autres sites

Stéphanie ne clignote pas : Etonnant ! Chez moi, Internet Explorer (IE 6.0.29) n'applique pas la directive "blink", alors que FireFox (FF 1.5.0.9) en tient compte (ça clignote)... on a envie de dire que c'est le monde à l'envers ! En fait, IE semble ici oublier d'appliquer une recommandation.

 

Pour blink, j'ai compris, mais pourquoi alors x-large ne s'applique pas?

 

<style type="text/css">
h1 
{
font-size: x-large ! important;
text-decoration: blink ! important;
}

#image1 {width: 800px; height: 600px;}

 </style>

(du moins chez moi, il ne s'applique pas)

Modifié par mushylex

Partager ce message


Lien à poster
Partager sur d’autres sites

Pour blink, le site du zéro dit que cette fonction n'est pas reconnue par IE :P

 

blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.

ici dans la partie "un peu de déco"

 

Par rapport au font-size, je ne vois pas de raison (mais je débute) :P .... As tu essayé de vider le cache pour recharger ta page....

Modifié par fantassin-06

Partager ce message


Lien à poster
Partager sur d’autres sites

Par rapport au font-size, je ne vois pas de raison (mais je débute) :P .... As tu essayé de vider le cache pour recharger ta page....

 

Moi aussi jdébute :P ,

menfin, j'ai vidé le cache, actualisé, etc... ça marche po :P

 

Mon site, dîtes moi si avec Firefox "stéphanie" est plus gros? svp

 

au cas où:

 

<!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="fr" >
<head>
<body background="background.jpg" bgproperties="fixed">
 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
 <title>Pouet</title>

 <!--
 entrée du code CSS
 -->

 <style type="text/css">
h1 
{
font-size: x-large ! important;
text-decoration: blink ! important;
}

#image1 {width: 800px; height: 600px;}

<!-- 
blink ne fonctionne pas sous IE 6.0, mais fonctionne sous Firefox
quel nul ce bilou alors !
-->

 </style>
</head>
<body>

<h1>Stéphanie</h1>

<h2> tu es vraiment nul pour les photos !</h2>
<br />
<img id="image1" alt="mon image 1" title="mon image 1" src="HPIM0412_800x600.jpg" />


</body>
</html>

 

merci

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×