28220 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement de liens dans pied de page

Bonjour à tous

J'ai un petit problème avec mon pied de page.

J'ai 3 liens à insérer dans ce pied de page et pour les disposer harmonieusement je souhaite aligner le premier à gauche, le deuxième au centre et le troisième à droite (logique).

Voici mon code css:

#pied {

	clear: both;
	height: 30px;
	width: 700px;
	text-align: center;
	background-image: url(fond_pied.png);
	}
                                                                                                                                   
#pied_contenu {

	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 7px;
	}
													#pied a{
        color:#FFFFFF;
	text-decoration:none;
	}
	
#secours {
	text-align: left;
	}
	
#contact {
        text-align: center;
	}
	
#infos {
      text-align: right;
	}


et le code php:

echo"<div id='pied'>";

echo"<div id='pied_contenu'>";
          
		  echo "<a id='infos'  href='#' >Secours</a>";
		  echo "<a id='contact' href='#'>Contact</a>";
		  echo "<a id='infos' href='#'>Informations</a>";

echo"</div>";
echo"</div>";


Et biensur ca ne marche pas. J'ai aussi essayé d'inclure les liens dans des div mais ca me met tout à la ligne (normal me direz vous)

Si quelqu'un pouvait m'aider
Modifié par SugataSan (15 Dec 2005 - 09:59)
Modérateur
bonjour,
... et en reprenant le principe des flottant ?

/*edit */
div {text-align:center;}
/* fin edit :selon les toujours bon conseil de Laurent Denis */
a.premier {float:left;width:100px;text-align:left;}
a.deuxieme {margin:0 100px;}
a.troisieme{float:right;width:100px;text-align:right;}

et le html

<div>
<a href="#"  class="premier">le lien a gauche !</a>
<a href="#"  class="troisieme">le lien a droite !</a>
<a href="#"  class="deuxieme">le lien au centre !</a>
</div>

il faut mettre dans le html les "flottants" en premier .
text-align, a une incidence sur le contenu de la balise et pas son positionnement dans la page.

a plus
Modifié par gcyrillus (10 Dec 2005 - 22:51)
Bonjour,

Petite correction: le text-align:center doit porter sur le conteneur div, et non sur le lien Smiley cligne

Cela dit, un petit (ou gros ?) défaut des inévitables flottants dans ce cas : un ordre de tabulation un peu surprenant (élément de gauche, puis élément de droite, et finalement élément central). Et comme il s'agit d'un pied de page et de la fin du code HTML, l'ordre de tabulation ne peut pas être corrigé avec tabindex sans devoir étendre celui-ci à l'ensemble des liens présents dans la page.

La solution simple conservant un ordre HTML plus rigoureux et un ordre de tabulation "naturel" passerait en fait par un "display:inline-block"... inutilisable à l'heure actuelle, faute de support dans IE Windows et Firefox.

Bilan ? Pour conserver cet ordre de tabulation, la meilleure solution de repli sera finalement... un bon vieux tableau Smiley cligne
Laurent Denis a écrit :
un ordre de tabulation un peu surprenant (élément de gauche, puis élément de droite, et finalement élément central)


Je m'auto-cite, mais dans un but louable : attirer ici l'ami jpv, qui ne manquera pas de soulever, avec raison, le caractère très problématique du référentiel AccessiWeb 1.0 (10.3) sur cette fameuse question de l'ordre linéaire HTML et de l'ordre visuel du rendu CSS Smiley cligne

C'est en effet un bon exemple à étudier, pour lequel il faudrait d'autres retours d'utilisateurs.

Pour ma part, en tant que mal-voyant utilisant à la fois le lecteur d'écran et l'écran :
- je ne suis personnellement pas gêné du tout quand la lecture d'une liste de liens "horizontaux" se fait de droite à gauche, et non dans le sens gauche-droite de la lecture. C'est un chose fréquente, et une habitude que j'ai prise depuis longtemps. Cela dit, ayant eu à réaliser cette semaine un template XHTML CSS où ce type de problème se posait, je n'ai pas pu convaincre mon commanditaire qu'il fallait un certain recul sur cette recommandation du référentiel. Bilan : une structure XHTML passable, mais une CSS hackée et très fragile pour respecter ce fichu critère Accessiweb.
- mais, à l'inverse, ce jeu de saute-mouton, un coup à droite, un coup à gauche, un coup au centre... est très désagréable et parasite vraiment la compréhension.
- Avec plus de 3 liens, ça devient franchement incohérent.
- Et d'un point de vue d'ergonome, c'est une erreur patente.

jjjjjjjjjjjjjjjjjjjjean-pierre ? Smiley cligne
Modifié par Laurent Denis (10 Dec 2005 - 10:20)
Merci pour vos réponses.

Je suis content que ma question soulève un problème d'accessibilité qui je l' avoue me dépasse un peu.

En quoi l'ordre des liens affichés ,différant de l'ordre dans le code, peut-il poser problème au niveau accessibilité si l'ordre des liens lui même n' a pas d'importance ?
Sujet clos
Aller à