Discussion :

[Skima]

Bonjour à tous,

Je travaille sur un portail web et pour des raison d'accessibilité (accès aux personnes handicapées), j'ai besoin de mettre en place des "zones" dans ma page html. C'est à dire définir des parties de la page qu'ils pourront parcourir au clavier pour accéder plus vite au contenu qui les intéresse.
Pour cela, je dois modifier le header de ma page, sans en changer l'aspect visuel. Mais je n'arrive pas à trouver la solution exacte.

Voilà une maquette (très) simplifiée de la page actuelle :


HTML :

Code html :

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
<link rel="stylesheet" type="text/css" href="style.css">
 
<div id="niveau1">
	<div id="divLogo">
		<div id="logo" class="bloc">logo</div>
	</div>
	<div id="divGauche">
		<div id="text" class="bloc">text</div>
	</div>
	<div id="divDroite">
		<div id="icon1" class="bloc">icon1</div>
		<div id="icon2" class="bloc">icon2</div>
		<div id="champSearch" class="bloc">champSearch</div>
	</div>
</div>
<div id="niveau2">
	<div id="navigation">
		<div id="menus" class="menu">Menus de navigation</div>
	</div>
</div>

CSS :

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
#niveau1 {
	height:50px;
}
 
#divLogo {
	float:left;
}
#divGauche {
	float:left;
}
#divDroite {
	float:right;
}
#icon1 {
	float:left;
}
#icon2 {
	float:left;
}
 
#champSearch {
	float:left;
}
 
 
 
#niveau2 {
	height:50px;
}
#navigation {
	border:2px solid green;
}
 
 
 
.bloc {
	border:1px dotted black;
	width:200px;
	height:50px;
}
.menu {
	border:1px dotted black;
}

Je dois donc le modifier pour 3 zones, à savoir :
- Banner : Logo+text+tous les icons
- Search : Champ de recherche
- Navigation : Menus de navigation

Donc vu comment la page est actuellement faite, je suis obligée de séparer le "divDroite" en deux, pour pouvoir entourer logo+text+icon1+icon2 dans un div, et champSearch dans un autre.
Mais du coup je me retrouve avec des problèmes d'alignement. Le mieux que j'ai réussi à faire c'est ça :


Avec pour le code :
HTML :

Code html :

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
<link rel="stylesheet" type="text/css" href="style.css">
 
<div id="niveau1">
	<div id="banner">
		<div id="divLogo">
			<div id="logo" class="bloc">logo</div>
		</div>
		<div id="divGauche">
			<div id="text" class="bloc">text</div>
		</div>
		<div id="divDroite">
			<div id="icon1" class="bloc">icon1</div>
			<div id="icon2" class="bloc">icon2</div>
		</div>
	</div>
	<div id="search">
		<div id="champSearch" class="bloc">champSearch</div>
	</div>
</div>
 
<div id="niveau2">
	<div id="navigation">
		<div id="menus" class="menu">Menus de navigation</div>
	</div>
</div>

CSS :

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
#niveau1 {
	height:50px;
}
 
 
 
#banner {
	border:2px solid red;
	float:left;
}
 
#divLogo {
	float:left;
}
#logo {
	float:left;
}
 
#divGauche {
	float:left;
}
#text {
	float:left;
}
 
#divDroite {
	float:right;
}
#icon1 {
	float:left;
}
#icon2 {
	float:left;
}
 
 
 
#search {
	border:2px solid blue;
	float:right;
}
#champSearch {
}
 
 
 
#niveau2 {
	height:50px;
}
 
#navigation {
	border:2px solid green;
}
 
.bloc {
	border:1px dotted black;
	display:inline-block;
	width:200px;
	height:50px;
}

Donc c'est quasiment ça, sauf que je n'arrive pas à mettre les icon1 et icon2 à droite, juste à gauche du champ de recherche.

Est-ce que quelqu'un aurait une idée pour me sauver la vie ? =D (Je suis en galère et c'est en plus assez urgent :/)

Merci d'avance à tous !

[Invité]

Bonjour,

pour faciliter l'accessibilité, il faut aussi et surtout penser à structureer le code avec les bonnes balises (sémantiquement parlant) :

• HTML5 : le guide du débutant
• Initiation à HTML5

Ex. :

• <header> et <footer> pour entête et pied de page
• <nav> pour une navigation (menu, sous-menu,... avec liens de navigation)
• <figure> pour des blocs image
• <section>, <article>,...

[Skima]

Bonjour,

Merci pour la réponse.
Bien sur, l'exemple que j'ai donné est une version très simplifiée et je n'ai pas mis certaines balises pour alléger le code sur le forum. Notre navigation est bien structurée par des balsies <nav> typiquement. (Certaines, que je ne connaissais pas, on cependant retenu mon attention et je vais étudier ça de plus près).

Cependant, ici, mon problème est, indépendamment de l’accessibilité en terme de balises, de parvenir à créer ces trois blocs distincts dans la page sans changer sa mise en forme.

Avez-vous une idée là dessus ?

Je vous remercie

[NoSmoking]

Bonjour,
un simple clear:both; sur ton élément niveau2 devrait suffire.

Il y a quand même trop de DIV conteneur dans ton code !

[Invité]

J'ajoute qu'en utilisant les balises HTML5 adéquates, on peut se passer de définir beaucoup d'id inutiles.
Ex. :

Code html :

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
<header id="entete">
 <div id="h-banner">
   <figure>
      <img ..... />
   </figure>
   <div class="h-group">
      <h1>.... </h1>
      <h2>.... </h2>
   </div>
   <div id="h-icons">
      ..............
   </div>
 </div>
 <aside id="h-search">
      ...
 </aside>
</header>
 
<nav id="mainmenu">
   <ul>
      <li>..............</li>
      <li>..............</li>
      <li>..............</li>
   </ul>
</nav>

avec ça, on devrait s'en sortir sans problème.


N.B. la balise <hgroup> est dépréciée (dommage...). J'ai donc utilisé <div class="h-group"> à la place