vaurel.free.fr/diner/diner.html

**oceane751** · 19/09/2013, 17h05

Bonjour à tous

Je me remets doucement à l'HTML5/CSS3 et j'aimerai avoir votre avis sur mon code HTML5/CSS3 dont voici l'url (il y a 4 pages) :

http://vaurel.free.fr/diner/diner.html

N'hésitez surtout pas à me faire des remarques car j'en ai besoin pour ne pas faire les mêmes erreurs 2 fois

ps : tests effectués sous ie7, ie8, ie9, ie10, chrome et ff

Merci d'avance !

**Bovino** · 19/09/2013, 17h58

Premières impressions.

Tes images ne sont pas optimisées (trop lourdes donc longues à charger).

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

tu es en HTML5, donc privilégie

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta charset="utf-8" />

Pour tes balises <link> et <script>, l'attribut type est désormais optionnel et dans ton cas, tu peux les virer.

Tu utilises des balises <section> à mauvais escient, les premières devraient être des <header> (de même, des <section> dans un <footer>, ça n'a pas de sens

).

**oceane751** · 19/09/2013, 18h12

Merci super bovino et toujours au taquet

pour ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta charset="utf-8" />

Je l'avais noté de coté et j'ai omis de le mettre

"l'attribut type est désormais optionnel et dans ton cas, tu peux les virer"
Je ne savais pas merci

"de même, des <section> dans un <footer>, ça n'a pas de sens".
ah ok mais du coup je mets quoi car j'en ai besoin

Merci encore de ton aide précieuse !

**oceane751** · 19/09/2013, 20h59

alors j'ai mis ça comme prévu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta charset="utf-8" />

puis ""l'attribut type est désormais optionnel et dans ton cas, tu peux les virer"
OUT

j'ai fait ça pour le préchargement d'image notamment pour la grande image en home page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <script>
		function precharg()
{
	image1 = new Image(952,566);
	image1.src = "images/burger.png";
	
}
	</script>

puis un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="precharg();">

C'est bon? tu vois une différence?

Sinon pour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<section class="hot_dog"><img src="images/hot_dog.png" alt="hot dog"/></section>

J'ai mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/hot_dog.png" alt="hot dog" class="hot_dog"/>

Est ce correct? (pour éviter les <section>)

**rodolphebrd** · 19/09/2013, 21h53

Bonjour,

J'aime bien la charte graphique.
Joli travail et bravo pour le validateur.

Au rétrécissement de fenêtre :
- le contenu se colle à droite : un margin appliqué au body de 5% serait pas mal (valable sur mobile -Iphone-).
- mieux gérer le positionnement des 3 images du bas pour éviter l'effet d'empilement peu harmonieux.

Pas d'effet de survol sur le menu ?

Border-radius n'a plus besoin d'être préfixé et la fonte lobster est désuète voir même montrée du doigt

Ok sur Safari

**oceane751** · 19/09/2013, 22h08

En fait c'est un template que j'ai récupéré sur le net et j'ai fait l'intégration derrière

J'ai donc récupéré les différentes polices qu'il y avait

Tu penses à quel type de survol sur le menu?

Et que penses tu de mon dernier message?

Cet exercice est important pour moi et je veux que se soit parfait d'où ma venue ici (j'ai bien bossé avant de venir ici

)

**Muchos** · 20/09/2013, 06h45

Envoyé par oceane751

Sinon pour

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<section class="hot_dog"><img src="images/hot_dog.png" alt="hot dog"/></section>

J'ai mis

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/hot_dog.png" alt="hot dog" class="hot_dog"/>

C'est exactement ça, et c'est pareil pour vos liens.
Comme son nom l'indique, SECTION sert à faire des sections thématiques, sur une page entière ou dans un élément (dans ARTICLE par ex.).
Si vous voulez un conteneur bloc qui n'a pas de fonction sémantique particulière, utilisez DIV

NOTA: j'ai l'impression que vous n'osez pas mettre un ID et une/des CLASS dans une même balise. Peut-être que je me trompe…

**oceane751** · 20/09/2013, 12h26

ah je peux aussi utiliser des div !!
j'en apprends tous les jours, merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/hot_dog.png" alt="hot dog" class="hot_dog"/>

je vais donc aussi faire pareil pour les liens

"j'ai l'impression que vous n'osez pas mettre un ID et une/des CLASS dans une même balise. Peut-être que je me trompe…"

je vais voir si j'en ai l'utilité

**Bovino** · 20/09/2013, 13h55

Effectivement, rien n'interdit d'utiliser des div.
En fait, quasiment rien de ce qui existait en HTML 4 / xhtml 1 n'a été retiré dans HTML5 (voir HTML elements - HTML5).
Ce qu'il faut ensuite comprendre, c'est que la balise <div> pour les éléments de type bloc ou la balise <span> pour les éléments de type inline correspondent à des balises génériques sans sens sémantique particulier. Donc si aucune balise ne correspond à la sémantique du contenu de l'élément (mais bien souvent, il en existe une

) aolrs il faut les utiliser. Mais sémantiquement parlant au moins (et pour la cohérence du code aussi) il est fortement déconseillé d'utiliser une balise dont la sémantique ne correspond pas au contenu réel.

**oceane751** · 20/09/2013, 14h18

Merci beaucoup Bovino

J'ai fait des modif sur la home page
http://vaurel.free.fr/diner/diner.html

Est ce bien?
Ou y a t'il encore des choses à modifier?

Merci encore à tous

**oceane751** · 20/09/2013, 17h27

Re

Est ce que vous voyez sous ie, quand vous cliquez sur un onglet, une espèce de background ?

**Ynostel** · 22/09/2013, 15h51

Bonjour,

Je ne suis pas un pro du langage web mais j'aurais pour ma part optimisé certains images avec du css à coup de repeat-x ou repeat-y

.

**oceane751** · 22/09/2013, 17h21

je ne veux pas que ça se repete

par contre as tu une idée concernant mes onglets sous ie (toutes versions) ?

merci

**hx2508** · 28/11/2013, 13h26

non pas pour récurer les casseroles

, mais pour ne charger que les éléments nécessaires et non pas des pages entière !

Ton design à 2 zones : entête et pied

et deux demies zones : le corps soit avec une zone principale et zone droite, soit uniquement zone droite !

Avec de l'Ajax tu te simplifiera la vie.

Ps : pas sympa de ne pas respecter les règles, et donc de préciser que c'est un Template de http://www.freewebsitetemplates.com que l'on peut voir ici : http://www.freewebsitetemplates.com/preview/retrodiner/...

Claude

vaurel.free.fr/diner/diner.html

Mon site

Discussions similaires

Partager

Partager