28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un problème avec d'une part mon menu horizontal, mais aussi avec mon conteneur.

Commençons par le menu, pas moyen de le mettre à la bonne taille... J'aimerai qu'il fasse la même taille que mon bandeau, soit 801px, mais il dépasse à droite et je n'arrive pas à résoudre ce mystère. Voilà ce que ça me fait : upload/14599-screenshot.JPG

Voici le CSS que j'ai utilisé : upload/14599-menu.JPG
Et le code HTML : upload/14599-html.JPG

Ensuite, j'ai un problème avec le conteneur. Je ne sais pas pourquoi, à partir du moment où j'ai mis le menu horizontalement et non plus verticalement, il s'est tout réduit et le height auto ne fonctionne plus...

Le CSS du conteneur : upload/14599-conteneur.JPG

J'espère n'avoir pas été trop longue et assez claire... et surtout que vous pourrez m'aider !
Merci beaucoup Smiley smile
Salut,

Pour la largeur du menu, le calcul est vite fait :

160px + 10px de padding = 170px par lien, 170px * 5 = 850px pour les 5 liens, ça ne peut pas rentrer dans les 801px prévus Smiley cligne

Pour le conteneur, je ne comprend pas ce qui ne fonctionne pas ... Si la hauteur est sur "auto", il doit simplement s'adaper à son contenu Smiley ohwell
Hello,

Merci pour la réponse concernant le menu, j'ai fini par m'en rendre compte avant même d'avoir reçu ta réponse... décidément les maths ça a jamais été ma tasse de thé, mais là j'ai battu un record. Smiley lol

Par contre pour mon conteneur, j'pige toujours pas. Smiley confus
Pour la largeur du menu, attention, il me semble que IE (en tous cas le 6-) fait n'importe quoi avec le padding et le fout à l'intérieur de la zone que tu as définie (donc non pas 160px + 10px comme cela devrait être, mais 160px tout court).

Concernant la hauteur, pourquoi un height:auto et pas un height:100% ?
N'oublie pas que certains éléments ont des marges/padding définis par défaut, il est bon de les reset pour être sûr.

Et dernier point, si tu veux centrer ton texte verticalement, n'oublie pas de spécifier line-height aussi, n'est ce pas.

Ah et j'oubliais, copie colle ton code à l'intérieur de balises "[ code ]" (sans espaces) au lieu de faire des screenshots, les uploader, et les lier Smiley smile
Modifié par Lideln (31 Oct 2007 - 15:30)
le height est d'une part en auto et d'autre part en 100%, donc normalement avec les deux il devrait me faire ce que je veux ce fourbe...

Je vais revérifier les marges et paddings, puis voir pour le texte.

J'avais pas vu qu'il y avait un bouton code... désolée
Ben c'est surtout pour toi que je dis ça la balise [ code] Smiley cligne

Oublie pas qu'une height:100% n'est pas valable si le conteneur n'est pas en hauteur fixe ! En gros sinon ça correspondra à un height:auto, c'est à dire la place nécessaire pour contenir ton "contenu" (bravo ! Smiley smile ).

(et juste pour être sûr : tu ne peux pas spécifier 2 méthodes de calcul de height pour un seul et même div, car la dernière spécifiée écrase la précédente, sauf avec le !important évidemment, mais que IE ne comprend pas)
Ton pb vien du fait que tu as mis un float left sur la balise a

tu doit donc pour récupérer ta hauteur mettre un div en clear both:

sous ton ul tu mets :
<div class="clear"></div>

avec

.clear {
width:auto;
height:1px;
font-size:1px;
visibility:hidden;
clear:both;
}