Bonjour tout le monde, je suis en train de retaper mon site complètement, et j'ai donc décidé de me lancer dans l'HTML5 et le CSS3.
le site n'as pas encore vraiment de contenu il faut que je le fasses ces jours ci, mais mis à part ça il est déjà en ligne. Vous pouvez jetez un œil ici:
http://www.cas-p.net
Ou sinon voici une version simplifié de mon code source:
Pensez vous que ma structure HTML5 soit correcte ?
Car quand on réalise des article de journaux avec beaucoup de contenu l'HTML5 parait assez logique.. mais quand il s'agit d'adapter le graphisme d'un site plutôt visuel c'est une autre paire de manche.
Au début je voulais faire classqiue. Une entete avec un titre et mon menu de navigation.
Seulement premier souci. Si je veux utiliser la balise nav il parait qu'elle est elle même considéré comme une section.
Donc je peux pas la mettre dans le head,et en prime si je veux que mon site apparaisse correctement ici: http://gsnedders.html5.org/outliner/ il faut que je titre mon nav
Bon soit...
Alors je me retrouve avec un head qui n'as pour seul contenu ma balise H1 et deux trois bricol.
Sinon j'aurai pu supprimer complètement le head et le remplacer par simplement nav .. mais ca aurait été bizzare je trouve.
A la réflexion les navigation liste de xhtml2 me paraissait plus intelligente.
D'autant que je me pose la question de l'intérêt de mettre une liste dans une balise nav si la liste n'as pas besoin de nav pour être stylé. Ajouter une balise juste pour elle même n'est ce pas un peu stupide ?
Passons;
Ensuite j'ai donc une section général avec un head qui est ma colonne gauche dans lequel j'ai mis un titre.. Et la balise adress. Je sais pas si c'est approprié pour un contact mail. Mais cela me paraissait sympa.
Ensuite les article s'enchaine avec titre et si ils ont des images, figure.
Et enfin mon footer. dans lequel je voulais mettre des nav au début aussi, mais toujours à cause de cet histoire de titre j'ai finalement opté pour des div.
Qu'en pensez vous.
----
Alors ensuite deuxième point important, si quelqun ayant à disposition sur son ordi les différente version de IE pouvait m'aider ce serait très sympa.
j'ai utiliser PIE.htc , -ms-transform.htc ainsi que ces script pour pouvoir utiliser au maximum le CSS3, l'HTML5 et les PNG dans à priori tous les IE a partir du 6 compris:
mais j'ai un peu des doutes.. Si quelqu'un voulait bien checker que le site fonctionne aussi sur ce damned IE ce serait très gentil de sa part. (notamment le fait que le titre de la colonne gauche soit incliné, et que lorsqu'on clique sur le petit plus d'un article le texte est bien en 2 colonnes.)
----
Ah et enfin dernier point que je voulais aborder,
comment faire pour avoir une feuille de style valide CSS3 si tous les style moz et webkit sont non valide ....
Merci
Cordialement,
Casp.
Modifié par casp (11 Oct 2010 - 14:04)
le site n'as pas encore vraiment de contenu il faut que je le fasses ces jours ci, mais mis à part ça il est déjà en ligne. Vous pouvez jetez un œil ici:
http://www.cas-p.net
Ou sinon voici une version simplifié de mon code source:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>=- CasP -=</title>
<meta charset="utf-8" />
<meta name="generator" content="SPIP2.1.2 [16017]" />
</head>
<body>
<header id="entete">
<h1>Mon titre</h1>
<div id="lang">
<a href="./" hreflang="fr" rel="alternate"><img class="survol" src="squelettes/IMG/lang_fr_off.png" alt="Français" ></a>
<a href="./?lang=en" hreflang="en" rel="alternate"><img class="survol" src="squelettes/IMG/lang_en_off.png" alt="Anglais" ></a>
</div>
<a id="casp" href="-Qui-suis-je-" rel="author"><img class="survol" src="squelettes/IMG/casp_off.png" alt="A propos de CasP"></a>
</header>
<nav id="menu">
<h2><a href="http://www.cas-p.net" rel="contents"><img src="squelettes/IMG/casp_logo.jpg" alt="Cas-P créatif indépendant"></a></h2>
<div id="ombre"></div>
<div id="fleche_liste">
<a href="-Graphisme-" class="fleche off" id="fleche3">Graphisme</a>
<a href="-Webdesign-" class="fleche off" id="fleche4">Webdesign</a>
<a href="-Illustration-" class="fleche off" id="fleche5">Illustration</a>
<a href="-Couleur-" class="fleche off" id="fleche6">Couleur</a>
<a href="-Blog-" class="fleche off" id="fleche7">Blog</a>
</div>
<ul id="couleur">
<li class="typo rub_" id="menu3" style="background-color:#d8ab32">Graphisme</li>
<li class="typo rub_" id="menu4" style="background-color:#d8328a">Webdesign</li>
<li class="typo rub_" id="menu5" style="background-color:#a932d8">Illustration</li>
<li class="typo rub_" id="menu6" style="background-color:#5a32d8">Couleur</li>
<li class="typo rub_" id="menu7" style="background-color:#3990f3">Blog</li>
</ul>
</nav>
<section id="contenu">
<header id="col_gauche">
<address>
<a href="http://www.cas-p.net/spip.php?page=test" rel="shadowbox;width=620;height=400;nofollow" tips="Contact"><img class="survol mail" src="squelettes/IMG/mail_off.png" alt="mail contact"></a>
<span id="devis" class="typobold">Devis</span>
<p id="tel" class="typobold">Courriel
+32.479315519
</p>
<img class="survol" id="plus_bis" src="squelettes/IMG/puce_plus_off.png" alt="+">
<p id="devis_plus">En savoir plus sur mes devis chaque devis est spécifique je vous repond dans les plus bref delai, je repond plus au xmail etc...
</p>
</address>
<h2>Bienvenue sur mon portfolio.<br />Je suis <span style="color:#a0b71e;">graphiste webdesigner, illustrateur</span> et <span style="color:#a0b71e;">coloriste,</span> à <span style="color:#f45915;">Bruxelles </span> et <span style="color:#f45915;">Paris.</span></h2>
</header>
<div id="col_droite">
<article>
<h3 class="typo">ATTENTION Site en construction.</h3>
<div class="chapeau"><p>Veuillez revenir d’ici quelques jours. Le site est actuellement en cours de refonte. le contenu n’est donc absolument pas à jour pour le moment.
Merci.
</p></div>
<figure>
<a href="#"><img src="masource"></a>
</figure>
</article>
<article>
<h3 class="typo">ATTENTION Site en construction.</h3>
<div class="chapeau"><p>Veuillez revenir d’ici quelques jours. Le site est actuellement en cours de refonte. le contenu n’est donc absolument pas à jour pour le moment.
Merci.
</p></div>
<figure>
<a href="#"><img src="masource"></a>
</figure>
</article>
</div>
</section>
<div id="push"></div>
<footer id="pied">
<div id="social">
<a href="http://www.cas-p.net/spip.php?page=backend" rel="nofollow"><img class="survol" src="squelettes/IMG/social_rss_off.png" alt="Rss Casp" ></a>
<a href="http://twitter.com/pipol" rel="nofollow"><img class="survol" src="squelettes/IMG/social_twitter_off.png" alt="Twitter Casp" ></a>
</div>
<ul id="menu_bas">
<li><a href="-Qui-suis-je-" rel="nofollow"> Qui suis je ? -</a></li>
<li><a href="-tarifs-facturation-" rel="nofollow"> tarifs & facturation -</a></li>
<li><a href="-mentions-legal-" rel="nofollow"> mentions légal -</a></li>
<li><a href="-Contact-" rel="nofollow"> Contact -</a></li>
</ul>
</footer>
</body>
</html>
Pensez vous que ma structure HTML5 soit correcte ?
Car quand on réalise des article de journaux avec beaucoup de contenu l'HTML5 parait assez logique.. mais quand il s'agit d'adapter le graphisme d'un site plutôt visuel c'est une autre paire de manche.
Au début je voulais faire classqiue. Une entete avec un titre et mon menu de navigation.
Seulement premier souci. Si je veux utiliser la balise nav il parait qu'elle est elle même considéré comme une section.
Donc je peux pas la mettre dans le head,et en prime si je veux que mon site apparaisse correctement ici: http://gsnedders.html5.org/outliner/ il faut que je titre mon nav
Bon soit...
Alors je me retrouve avec un head qui n'as pour seul contenu ma balise H1 et deux trois bricol.
Sinon j'aurai pu supprimer complètement le head et le remplacer par simplement nav .. mais ca aurait été bizzare je trouve.
A la réflexion les navigation liste de xhtml2 me paraissait plus intelligente.
D'autant que je me pose la question de l'intérêt de mettre une liste dans une balise nav si la liste n'as pas besoin de nav pour être stylé. Ajouter une balise juste pour elle même n'est ce pas un peu stupide ?
Passons;
Ensuite j'ai donc une section général avec un head qui est ma colonne gauche dans lequel j'ai mis un titre.. Et la balise adress. Je sais pas si c'est approprié pour un contact mail. Mais cela me paraissait sympa.
Ensuite les article s'enchaine avec titre et si ils ont des images, figure.
Et enfin mon footer. dans lequel je voulais mettre des nav au début aussi, mais toujours à cause de cet histoire de titre j'ai finalement opté pour des div.
Qu'en pensez vous.
----
Alors ensuite deuxième point important, si quelqun ayant à disposition sur son ordi les différente version de IE pouvait m'aider ce serait très sympa.
j'ai utiliser PIE.htc , -ms-transform.htc ainsi que ces script pour pouvoir utiliser au maximum le CSS3, l'HTML5 et les PNG dans à priori tous les IE a partir du 6 compris:
<!--[if lte IE 8]>[<script type="text/javascript" src="(#CHEMIN{INC/IE/IE9.js})">IE7_PNG_SUFFIX=".png";</script>]<![endif]-->
<!--[if lte IE 8]>[<script type="text/javascript" src="(#CHEMIN{INC/IE/HTML5fix.js})">]</script><![endif]-->
<!--[if lte IE 9]>[<script type="text/javascript" src="(#CHEMIN{INC/IE/CSS3MultiColumn.js})"></script>]<![endif]-->
mais j'ai un peu des doutes.. Si quelqu'un voulait bien checker que le site fonctionne aussi sur ce damned IE ce serait très gentil de sa part. (notamment le fait que le titre de la colonne gauche soit incliné, et que lorsqu'on clique sur le petit plus d'un article le texte est bien en 2 colonnes.)
----
Ah et enfin dernier point que je voulais aborder,
comment faire pour avoir une feuille de style valide CSS3 si tous les style moz et webkit sont non valide ....
Merci
Cordialement,
Casp.
Modifié par casp (11 Oct 2010 - 14:04)
...