28173 sujets

CSS et mise en forme, CSS3

Divers problèmes d'alignement

Bonjour,

Tout d'abord le menu:
voici l'adresse a laquelle vous pourrez voir ce qui ne vas pas
http://david.boujenah.free.fr/home.html

Je viens de réaliser le tuto qui se trouve a l'adresse suivante:
http://www.babylon-design.com/site/index.php/2005/07/11/73-faire-un-menu-en-css-accessible

Mon menu fonctionne avec explorer mais avec mozilla (le comble!), le premier bouton est décalé ce qui fait que le dernier bouton reviens a la ligne.

Par ailleurs vous remarquerez que mon footer n'est pas a la bonne position.

Si vous pouviez jeter un coup d'oeil et regarder ce qui ne vas pas ça m'aiderais car cela fait 3 heures que j'essaye de faire quelque chose!

Merci
Salut,

Il suffit d'annuler les marges intérieurs et extérieures du menu pour que tout rentre dans l'ordre: 
#menu {
   margin: 0;
  padding: 0;
}

La méthode de "menu accessible" présentée dans ce tuto est en fait problématique : les lecteurs d'écrans par exemple risquent de ne pas restituer le texte en display: none;, et les utilisateurs se retrouveront sans menu de navigation Smiley sweatdrop

La solution la plus robuste est de laisser les images en dur dans le code HTML et d'utiliser javascript pour les effets de rollover ...
Merci ça fonctionne !
Par contre qu'est ce que les lecteurs d'écrans ?

a écrit :
La solution la plus robuste est de laisser les images en dur dans le code HTML et d'utiliser javascript pour les effets de rollover ...


j'ai déja utilisé cette méthode pour un autre site mais j'avais envie de changer...

Sinon j'ai encore quelques petit au niveau du pied de page. Je voudrais faire un menu centré, le problème est qu'il est a gauche. Je ne comprend pas pourquoi le copyright n'est pas dans le cadre avec mozilla et pourquoi sous explorer la taille du footer que j'ai définie a 20 px dépasse largement cette taille.

Merci beaucoup !
Utiliser javascript permet de fournir un contenu intact dans le code HTML à tout le monde et de ne créer l'effet de rollover que pour ceux qui peuvent en profiter (javascript actif), sans altérer la perception de la page par les autres utilisateurs.

Pour le pied de page, tous tes items de liste sont flottants, ils sont sortis du flux. Tout se passe comme si la liste <ul> était vide, et sa hauteur n'est due qu'aux marges/padding. Pour englober les flottants dans le calcul de la hauteur, il faut définir un contexte de formatage : 
#menufooter {
   overflow: hidden;
   margin: 0;
   padding: 0 10px;
}
Attention à ne pas préciser la hauteur de ce menu, sinon certaines parties de son contenu risquent de disparaitre. Pour que cela fonctionne dans IE6, il faut donner le layout à l'élément qui doit recevoir le contexte de formatage. On utilise les commentatires conditionnels : 
<!--[if lte IE 6]>
<style type="text/css">
#menufooter {
   overflow: visible;
   height: 1px;
}
</style>
<![endif]-->
à placer dans la section <head>.

Edit : au fait, qu'est ce que ton pied de page fabrique à l'intérieur d'un titre <h3> ???
Modifié par Thomas D. (25 Mar 2007 - 16:34)
ok merci, j'avoue que j'ai un peu de mal avec les flux mais bon c'est en forgeant qu'on devient forgeron.

j'ai toujours des problème, je suppose que c'est bête mais bon je demande quand meme. J'aimerais centrer le menu footer et réduire la taille du footer.

Par ailleurs je ne comprend pas a quoi sert le padding: 0 10px;
Comme il me décalait le menu footer je l'ai mis a 0.

Pour le <h3> dans le pied de page c'est la meilleure solution que j'ai trouvé pour mettre en forme le texte.

Si vous avez mieux a me proposer, je suis ouvert a toutes propositions
Smiley biggrin
boudouba a écrit :
Par ailleurs je ne comprend pas a quoi sert le padding: 0 10px;
Comme il me décalait le menu footer je l'ai mis a 0.
ça ne servait à rien d'autre Smiley cligne

a écrit :
Pour le <h3> dans le pied de page c'est la meilleure solution que j'ai trouvé pour mettre en forme le texte.
Supprimer purement et simplement la balise h3, qui n'a rien à faire là (plus exactement, qui ne peut pas être là. Ca devrait déjà aider à diminuer la hauteur du pied de page ...
Sujet clos
Aller à