Titre sur une seule ligne

**gaya102** · 05/09/2009, 22h45

oups je suis vraiment étourdie désolé

c'est vrai que du coup c'est mieu mais y a quelque bug encore snif

FoxLeRenard · 05/09/2009, 23h05

Envoyé par Erwan31

T'as CSS (gaya.css) n'est pas en ligne

C 'est le moment d'apprendre,
pour toi, le rapport html/css te parait Ok ou il y a qq points que tu changerais ?

Merci

**gaya102** · 05/09/2009, 23h24

je t'envoie mes prints

le premier est avec IE6
et l'autre c'est firefox

**gaya102** · 05/09/2009, 23h45

ce que je fais c'est que demain j'essaierai de le modifs car en prenant la version de firefox qui la meilleure

- le menu en haut pour qu'il prenne toute la place sur la partie rose
- le menu en bas le remonter un peu
- que le texte colle plus les images
- faire en sorte que la partie centrale ne déborde pas de la page
-Faire que ma page soit plus haute pour éviter le scrolling a droite

tu vois ce que je veux dire

Par contre pour la partie ie6 la je seche

**Erwan31** · 06/09/2009, 00h55

Envoyé par FoxLeRenard

C 'est le moment d'apprendre,
pour toi, le rapport html/css te parait Ok ou il y a qq points que tu changerais ?

Merci

Oui pas mal de chose et j'ajouterais principalement des titres de sections (cachés ou pas) pour améliorer la compréhension du document en l'absence de CSS (entre autres). Ces pratiques sont assez connues à partir du moment ou l'accessibilité est prise en compte.
Le tableau n'est pas approprié ici, il vaut mieux le remplacer par un liste non-ordonnée.
Le menu interne devrait être une liste non-ordonnée et non une suite de liens, histoire de conventions.

Quelque remarque pour Sandrine:
la meta keyword est obsolète et n'est plus prise en considération par les principaux moteurs de recherche depuis quelques années.
Veiller à ne pas dépasser les 200 caractères pour l meta description (google coupe par exemple son contenu à partir de 165 caractères)
Le revisit after ne sert çà rien et le meta robot avec all comme valeur revient à ne rien mettre.

Je te conseil si tu n'as pas le temps de te former, de commencer par du XHTML transitionnal puisque tu ne connais pas encore les attributs de présentation déconseillés (align, vspace, hspace ect)
Ces attribut sont encore valide en XHTML transitionnal mais je te conseil vivement de les oublier et de trouver l'équivalent en CSS

Il n'est pas inutile pour clarifier la structure de diviser tes contenus en grand bloc (header, content et footer ici)
Pour la CSS j'ai pas le temps de faire les adaptations nécessaires mais je te conseil de partir sur une structure de ce genre (il n'y a pas qu'une solution possible mais voici la mienne):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>La collection faire-part mariage - le monde de gaya</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;" />
<meta name="description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ..." />
<meta http-equiv="content-language" content="fr, en" />
<meta name="author" content="Thaon Sandrine" />
<link rel="shortcut icon" type="image/x-icon" href="gaya_files/favicon0.htm" />
<link rel="stylesheet" href="gaya.css" type="text/css" media="all" />
</head>
<body>
<div class="centreX">
	<div id="header">
<p><a href="#contenu">Aller au contenu</a> <a href="#nav">Aller à la navigation interne</a></p>
		<p class="texte"><strong><span class="titre">Le monde de Gaya <span class="hidden">:</span></span> <span id="slogan">Faire-part de mariage originaux et personnalisés.</span></strong></p>
		<h1 class="hidden">Rubriques du site</h1>
		<ul id="menuHorizon">
			<li><a class="uli" href="http://www.lemondedegaya.fr/Accueil.php">Accueil</a></li>
			<li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Mariage</a></li>
			<li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Naissance</a></li>
			<li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Création</a></li>
			<li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Divers</a></li>
			<li><a class="uli" href="http://www.lemondedegaya.fr/mariage.php">Contact</a></li>
		</ul>
	</div>
	<div id="content">
<a name="nav" id="nav" href="#nav" class="hidden"></a>
		<h2>Mariage <span class="hidden">: Sous-rubriques</span> </h2>
		<ul class="menuG">
			<li><a class="gauche" href="http://www.lemondedegaya.fr/collection.php">La collection</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/format.php">Les formats</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/conditions.php">Conditions de ventes</a> </li>
		</ul>
		<div class="fenetre">
<a name="contenu" id="contenu" href="#contenu" class="hidden"></a>
			<h1>La collection faire-part mariage </h1>
			<ul>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_si.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_si.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_si.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_si.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_si.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">...</div>
</div>
</body>
</html>

Tu devrais reprendre le titre de rubrique (mariage ici) en titre de menu secondaire pour faciliter l'identification de ce menu comme sous menu de la rubrique mariage. Actuellement le sentiment d'appartenance à une rubrique du menu principal n'est pas assez évident.

Le <span class="hidden">: Sous-rubriques</span> permet par exemple d'améliorer la compréhension du document via un logiciel de synthèse vocal (pour les déficient visuels qui utilisent ce type de logiciels).

Je finirai les commentaires demains, j'attends d'abord ta réaction

**gaya102** · 06/09/2009, 01h46

Je viens de lire ton code plus calmement et je comprend parfaitement ton code

Par contre je viens de penser à quelque chose

au départ dans mon menu en haut je devais mettre un menu déroulant (en gros mon menu qui est à gauche) mais je n'y suis pas arrivée. Si le menu de gauche n'étais plus la ça faciliterai les choses je crois non?

**Erwan31** · 06/09/2009, 11h41

Envoyé par gaya102

Je viens de lire ton code plus calmement et je comprend parfaitement ton code
au départ dans mon menu en haut je devais mettre un menu déroulant (en gros mon menu qui est à gauche) mais je n'y suis pas arrivée. Si le menu de gauche n'étais plus la ça faciliterai les choses je crois non?

Pas forcément. Le seul avantage du menu déroulant est d'éviter un clic supplémentaire en accédant directement à la bonne rubrique dans un contexte d'utilisation standard en plus d'ajouter un sentiment d'intéractivité, mais même bien implémenté, il pose certains problèmes d'accessibilité (handicap cognitif, moteur, visuels...) et d'ergonomie (difficultés d'accès aux sous-rub en accès clavier ou via un lecteur d'écran et sous-rub non affichées de manière permanente impliquant une manip plus longue pour passer d'une sous rub à l'autre une fois qu'on se retrouve dans une des sections principales).
De ce point de vue, un menu secondaire affiché de manière permanente est un des meilleur modèle de nav existant. Tu peux aussi si ça te gêne, implémenter un sous menu statique horizontal placé au dessous du menu principal.

Au fait, on dit pas merci chez toi?

**gaya102** · 06/09/2009, 11h43

sisisi je te remercie
Franchement je suis super contente que vous m'ayez aidé car je ne m'en sortais plus

Titre sur une seule ligne

Tableau en CSS

Discussions similaires

Partager

Partager