Padding trop gros

Bonjour à tous,

Mon problème concerne mon menu gauche.
L'espace entre les gros titre et les sous titre (liens) et bien trop grands.

Site en question ici

Voici le code Html

<div id="menu_gauche">       			
	      <img src="images/titre_menu.png" />
           <div class="element_menu">
               <h4>Le Club</h4>
               <ul>
                   <li><a href="page1.html">Accueil</a></li>
                   <li><a href="page2.html">Calendrier</a></li>
                   <li><a href="page3.html">Classement</a></li>
               </ul>
           </div>
       
           <div class="element_menu">
               <h4>L'Equipe</h4>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>       
		    <div class="element_menu">
               <h4>L'Equipe</h4>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>       
      
</div>

et le code css

#menu_gauche {
width: 136px;
float: left;
background-image: url("images/menu_corps.png");
background-repeat: no-repeat;
list-style-type: none;
padding:0px;
}


/* Quelques effets sur les menus */


.element_menu h4 /* Tous les titres de menus */
{   
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   border-bottom: 1px dashed;
   padding:0px;
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */


}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 1px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
   list-style-type: none;
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: black;
}

Merci d'avance de votre aide.

Bonne soirée
Modifié par Snipy (19 Feb 2007 - 20:46)

Salut,

ben tu mets un margin-bottom aux h4...

Merci !

Et sinon y a t'il moyen qu'il n'y ai pas de bordure autour de mon icone MENU qui est une image appartenant au bloc (a qui j'ai rajouté un border)

Oui, en corrigeant la structure de ton menu.

Actuel :

<div id="menu_gauche">
	<img src="images/titre_menu.png" />
	<div class="element_menu">
	<h4>Le Club</h4>
	<ul>
		<li><a href="page1.html">Accueil</a></li>
		<li><a href="page2.html">Calendrier</a></li>
		<li><a href="page3.html">Classement</a></li>
	</ul>
	</div>
	<div class="element_menu">
	...
	</div>
	<div class="element_menu">
	...
	</div>
</div>

Corrigé :

<div id="menu_gauche">
<h3><img src="images/titre_menu.png" alt="Menu" /></h3>

	<div class="bloc-menu">
	<h4>Le Club</h4>
	<ul>
		<li><a href="page1.html">Accueil</a></li>
		<li><a href="page2.html">Calendrier</a></li>
		<li><a href="page3.html">Classement</a></li>
	</ul>

	<h4>L'équipe</h4>
	<ul>...</ul>

	<h4>Bla bla</h4>
	<ul>...</ul>
	</div><!-- fin de div.bloc-menu -->
</div><!-- fin de div#menu_gauche -->

On appliquera la bordure à div.bloc-menu et non pas à div#menu-gauche.

Au fait : lorsque je désactive les styles ou les images de fond, je ne vois plus l'information de l'en-tête. Où diable est-elle passée ?

Je testerais ça des demain matin, merci de ton aide!

Par contre je n'ai pas compris ton dernier post


Bonne soirée

Snipy a écrit :
Par contre je n'ai pas compris ton dernier post

L'en-tête de ton site dit « Basket - World ». Or, si je désactive l'affichage des images dans mon navigateur, je n'ai plus cette information. Et si je désactive les feuilles de style, je n'ai plus cette information non plus. La raison est simple : cette information n'existe pas dans le code source, elle fait partie d'une image de fond appelée via la feuille de style CSS. Je rappelle rapidement à quoi ressemble l'en-tête dans le code source de ta page :

<div id="en_tete"></div>

Alors qu'on devrait plutôt avoir quelque chose de ce genre :

<div id="en_tete">
	<img src="entete.jpg" alt="Basket - World" />
</div>

Bref, vu que l'image d'en-tête transmet une information, ce n'est pas une image de décoration mais bien une image de contenu, et elle n'a rien à faire dans la feuille de style.

Bonjour,

1 /J'ai écouté ton dernier conseil (merci car j'y avais pas pensé).

Mais par contre le rendu n'est plus le même. Mon menu horizontale est avalé par la bannière.

http://www.snipy.info/nevrus/index.php

2/ Par contre concernant mon menu j'ai suivi ta technique mais il faut que je fasse des petites modifs pour que ça se remette bien.

Au départ mon menu était une image (un bloc complet =fond dégradé + le titre + les bordures). mais je suis passé à un bloc simple avec le fond actuel.
Est ce mieux ? Car d'un coté l'image d'avant était plus jolie, mais je suis passé ainsi afin qu'il n'y est pas de problème de hauteur.

J'attends l'avis de personnes ayant l'expérience, pour m'indiquer le meilleur chemin.
Modifié par Snipy (20 Feb 2007 - 11:38)

1/ J'ai rajouté un
margin-bottom: 50px; à l'en-tete masi cela ne règle le problème que sous FF IE laisse encore mon menu horizontale dans la bannière..

Une idée?

Je n'ai pas le temps d'explorer les détails maintenant. Par contre, il sera peut-être utile de passer l'image de l'en-tête en affichage de type bloc.

div#en_tete img {
	display: block;
}

Ça peut éviter quelques sueurs froides si on ne sait pas bien gérer l'affichage de type en-ligne des images.

Je pense revenir comme avant car ça me donne plein de problème pour pas grand chose je pense.
De plus cela n'était pas mon problème de base.

a écrit :
2/ Par contre concernant mon menu j'ai suivi ta technique mais il faut que je fasse des petites modifs pour que ça se remette bien.

Au départ mon menu était une image (un bloc complet =fond dégradé + le titre + les bordures). mais je suis passé à un bloc simple avec le fond actuel.
Est ce mieux ? Car d'un coté l'image d'avant était plus jolie, mais je suis passé ainsi afin qu'il n'y est pas de problème de hauteur.

J'attends l'avis de personnes ayant l'expérience, pour m'indiquer le meilleur chemin.

Snipy a écrit :
Je pense revenir comme avant car ça me donne plein de problème pour pas grand chose je pense.

Je suis un peu étonné de voir que ça peut donner autant de problèmes. Un petit problème de décalage vertical à cause d'une image en affichage de type en-ligne, je veux bien. Mais rien de plus méchant que ça, normalement. Si tu as des problèmes plus méchant, c'est surtout le signe que le positionnement des blocs avoisinant n'était pas robuste...

Snipy a écrit :
Au départ mon menu était une image (un bloc complet =fond dégradé + le titre + les bordures). mais je suis passé à un bloc simple avec le fond actuel.
Est ce mieux ? Car d'un coté l'image d'avant était plus jolie, mais je suis passé ainsi afin qu'il n'y est pas de problème de hauteur.

Ne pas faire un seul bloc de hauteur fixe pour le menu, oui.
Je n'ai rien vu de bien compliqué dans ce menu. Une utilisation raisonnée d'éléments HTML correctement imbriqués, quelques marges, padding, bordures et couleurs/images de fond, et le tour sera joué. Je vois mal quoi te dire de plus, à paire te faire le code tout prêt...

Pour le premier probleme

#en_tete
{
   width: 760px; /* mettre la taille de la bannière */
   height: 100px;
   background-repeat: no-repeat;
   	margin-bottom:50px;

}

div#en_tete img 
{
	display: block;
}

Sous FF la barre est bien replacé, mais sous IE la barre reste sous la bannière


Pour le second problème

Après les modifs, il ne reste plus qu'un seul problème.
C'ets l'espace blanc entre l'image et le reste du menu.
Je me doute qu'il est du au margin-top fait aux H4 mais il faudrait que je l'enleve pour le premier H4.
y a t'il une autre solution que de renommer mon premier h4 afin de lui changer sa classe.

#menu_gauche {
width: 136px;
float: left;
list-style-type: none;
padding:0px;
padding-bottom:5px
}


/* Quelques effets sur les menus */

#menu_gauche h3
{
margin:0px;
}

.element_menu
{
border-bottom: 1px solid;border-left: 1px solid;border-right: 1px solid;
background-color:#FFD26E;

}

.element_menu h4 /* Tous les titres de menus */
{   
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   border-bottom: 1px dashed;
   padding:0px;
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin-bottom:1px;
   margin-top:3px;

Modifié par Snipy (20 Feb 2007 - 23:33)

Ton en-tête est stylé n'importe comment, en fait. Tu demandes une marge de 50px en bas, alors qu'en fait tu voudrais que le menu qui suit l'en-tête soit écarté de quelques pixels seulement si j'ai bien compris. Ensuite, tu fixes la hauteur à 100px, alors que le contenu de l'en-tête est une image de hauteur 144px !

Firefox interprète ainsi : le bloc est figé à 100px, l'image dépasse de 44px, mais ça ne se voit pas à cause de la marge de 50px qui ménage un espace pour afficher les 44px restants + une petite marge visuelle de 6px.

IE6 interprète ainsi : le bloc a une hauteur minimale de 100px, mais une hauteur réelle de 144px (IE6 interprète mal la propriété height). À quoi se rajoute une marge de 50px, qui crée donc un écart important.
Note : IE7 devrait avoir un rendu proche de celui de Firefox. De même qu'Opera, Konqueror, Safari, etc.

Solution :

#en_tete {
	width: 760px;
}

Et voilà, juste ça et le tour est joué.

Snipy a écrit :
Après les modifs, il ne reste plus qu'un seul problème.
C'est l'espace blanc entre l'image et le reste du menu.

Cet espace est dû :
1. à la marge supérieure du h4 (voir ceci pour les problèmes de fusion des marges)
2. à un espace sous l'image du h3 (voire la FAQ pour les espaces indésirables sous les images)

Merci Florent V !

Pour le premier problème je t'ai écouté, sous IE tout est redevenu dans l'ordre, mais sous FF il y a un petit espace entre l'en-tete et la barre de menu

#en_tete
{
   width: 760px; /* mettre la taille de la bannière */
   background-repeat: no-repeat;
}

div#en_tete img 
{
	display: block;
}

div#menu_horizontal {
width : 768px;
height : 19px;
background-image: url("images/barre_header.png");
background-repeat: no-repeat;
border : 1px;
margin-bottom: 20px;
}

Une idée ?


Pour le second problème j'ai appliqué le second tuto (espace en dessous d'une image) ce qui m'a effectivement diminué l'espace.
Puisj'ai modifié l'affichage donc plus de problème pour cela.

Merci encore !
Modifié par Snipy (21 Feb 2007 - 13:28)

Pour le menu horizontal c'est une histoire de fusion des marges. La marge supérieure du ul se communique au div conteneur (sauf sous IE, car comportement non standard). Se référer au lien que je donnais dans le message précédent pour la fusion des marges.

Plus simplement, on peut juste supprimer la marge par défaut du ul.

div#menu_horizontal ul {
	margin: 0;
}

Sinon plus globalement tu risques d'avoir des problèmes avec les flottants, en particulier les flottants dans le menu horizontal, qui dépassent de leur conteneur (sauf sous IE, car comportement non standard).

Un overflow: auto sur div#menu_horizontal devrait arranger les choses.
Pour référence :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Ah oui, et le ul du menu horizontal ne devrait pas être positionné en relatif. Et l'image de fond devrait être aligné en bas et pas en haut.

Je veux pas être méchant, mais il y a beaucoup de briolage aléatoire dans cette mise en page.

J'ai fait toute les modifs que tu as évoqué exepté l'image de fond dont je ne sias pas comment faire.
Sous FF tout remarche, mais sous IE le texte est mal positionné se qui entraine la mise en place d'une barre de défilement (du au overflow).

Voici le code actuel

div#menu_horizontal {
width : 768px;
height : 22px;
background-image: url("images/barre_header.png");
background-repeat: no-repeat;
border : 1px;
margin-bottom: 20px;
overflow: auto
}

div#menu_horizontal ul
{
   list-style-type : none;
   padding : 0;
   bottom: 6px;
   margin: 0;
}

div#menu_horizontal li {
padding : 0 0.5em; 
line-height : 30px;
}

div#menu_horizontal li.bouton_gauche {
float : left;
/* border-right : 1px dashed black; */
}

div#menu_horizontal li.bouton_droite {
float : right;
/* border-left : 1px dashed black;*/
}

div#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em;
font :  0.7em "Trebuchet MS";
}

div#menu_horizontal a:hover {
text-decoration : underline;
}

div#menu_horizontal a img {
border : none;
padding :  0 0.3em;

}

a écrit :
Je veux pas être méchant, mais il y a beaucoup de briolage aléatoire dans cette mise en page. decu

je le sais bien, et c'est bien en posant des question que j'essaye d'en apprendre plus. Car j'ai largement les bases en Html Css, mais c'est sur que je n'ai pas encore l'expérience que tu as.

Et c'est pour ça que je te remercie une nouvelle fois de la partager

Pour positionner ton image de fond, il y a la propriété CSS background-position. Par exemple :

div#menu_horizontal {
	background-position: left bottom;
}

Attention, si tu supprimes le positionnement relatif (ce qui est une bonne chose) tu te retrouves avec un bottom: 6px qui traine et qui ne sert plus à rien.

Enfin, le overflow: auto sert à obliger div#menu_horizontal à contenir ses enfants flottants (ce qui fonctionnera dans les navigateurs modernes mais pas dans IE6 et inférieur... mais le fait d'avoir donné une largeur fixe à ce bloc oblige déjà IE à contenir ses enfants flottants... une obscure histoire de HasLayout). Par contre, il faut alors supprimer la hauteur fixe en pixels de ce bloc. Donc virer le height: 22px, et laisser ce bloc prendre la hauteur de son contenu.

Si tu as toujours des problèmes de barre de défilement intempestive, utiliser un overflow: hidden plutôt qu'un overflow: auto.

J'ai fait les modif que tu m'as conseillé
C'est à dire : - background-position: bottom;
- supression du bottom : 6px;
- suppresion de la hauteur

Mais maintenant un autre problème se pose... Entre autre la barre qui est redescendu.

Tout ces changements sont juste afin que mon en tete soit sous la forme <img> le jeu en vaut il la chandelle?
Modifié par Snipy (21 Feb 2007 - 18:44)