Centrage dans un menu css

Question

fuerchan

21 Mar 2008 à 19:00

Bonjour,

Je voudrais savoir comment je peux centrer les lien 01, lien 02 et lien 03 verticalement. J'ai tourné le cade dans tous les sens mais là je bloque...
J'ai mis quelques repère /*...*/

Voici la feuille de style :


.para {  /* dl, dt, dd, ul, li */
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menuhaut {
	position: absolute;
	margin: 130px 0px 0px 295px; /* position générale menus */
	z-index: 50;
	height: auto;
	/*border: 1px solid yellow;*/
}
#menuhaut .dlmh {
	float: left;
	width: 130px; /* espace entre les menus */
	margin: 0 1px;
}

#menuhaut .dtmh {
	text-align: center;
	font-weight: bold;
	background-image: url(images/menu01.jpg);
	width: 110px; /* largeur menus */
	height: 26px; /* hauteur menus */
	/*border: 1px solid red;  /*cadre menus */
	
}
#menuhaut .ddmh {
	border: 1px solid #000000; /* cadre sous-menu */
	margin-top: 1px ; /* espace entre menu et sous-menu */
	width: 130px; /* largeur sous-menu */
	height: 90px; /* hauteur sous-menu */
	background-image: url(images/sousmenu01.jpg);			
}

#menuhaut .limh { /* menuhaut = utile pour Bg sous-menu */
	text-align: left;	
	height: 1%;
}

#menuhaut .limh a, #menuhaut .dtmh a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menuhaut .dtmh a:hover  { 
background-image: url(images/menu02.jpg);	
}

#menuhaut .limh a:hover{
background-image: url(images/sousmenu02.jpg);	
height: 20px;	
} 

.ulmh{
	margin: 5px 0px;
}
.liajust{
	padding: 0 5px;	
}

Et voici le html :


<div class="para" id="menuhaut">

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre();"><a href="#">Lien 01</a></dt>
    </dl>

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre('smenu1');"><a href="#">Lien 02</a></dt>
        <dd class="para ddmh" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
        <ul class="para ulmh">
            <li class="para limh"><a class="liajust" href="#">Lien 01</a></li>
            <li class="para limh"><a class="liajust" href="#">Lien 02</a></li>
            <li class="para limh"><a class="liajust" href="#">Lien 03</a></li>
            <li class="para limh"><a class="liajust" href="#">Lien 04</a></li>
            <li class="para limh"><a class="liajust" href="#">Lien 05</a></li>                           
        </ul>
        </dd>
    </dl>

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre('smenu3');"><a href="#">Lien 03</a></dt>
    </dl>

</div>

Merci à vous Smiley cligne

F.

fvsch

21 Mar 2008 à 20:25

Bonjour,

Le centrage vertical d'un contenu dans un bloc se fait uniquement avec des tableaux (vertical-align: middle sur la cellule du tableau) ou un bloc en display: table-cell (cette dernière déclaration n'étant pas supportée par IE 6 et 7).

Les autres solutions sont du trompe-l'oeil. Ça peut être très bien dans certains cas, mais c'est limité.
Tu en trouveras certaines mentionnées dans la FAQ. On peut aussi penser à l'utilisation du padding.

fuerchan

21 Mar 2008 à 20:45

Bonsoir,

Alors, j'ai effectivement tenté avec vertical-align: middle mais rien.

Le padding fonctionne mais agrandi "dt" alors je réduit "height" pour compenser. Mi alor c'est l'image de survole qui est décalée à ce moment là...

Bon je vais aller voir la FAC.

Je reste toujours à l'écoute...

Merci.

F.

fvsch

21 Mar 2008 à 22:05

fuerchan a écrit :
Je reste toujours à l'écoute...

On pourra difficilement en dire plus sans voir la page en ligne. Si je copie-colle le code que tu donnes, je n'obtiendrais rien de fiable vu que je n'ai pas les images de fond... ni le script JS.

fuerchan

22 Mar 2008 à 10:07

Bonjour,

C'est bon la FAQ avait la solution, donc le problème est résolu. Il fallait rajouter "line-height:;" à "dtmh". Soit :

line-height: 26px; /* hauteur menus */

a écrit :
On pourra difficilement en dire plus sans voir la page en ligne.

Oui effectivement de voir un problème dans son "fonctionnement" est toujours plus évident à comprendre. Malheureusement c'est un site professionnel qui n'est pas encore ouvert, bien qu'en ligne...

J

a écrit :
Si je copie-colle le code que tu donnes, je n'obtiendrais rien de fiable vu que je n'ai pas les images de fond... ni le script JS.

c'est vrai, dans le feu de l'action j'ai oublié le js... Smiley confused

. je vous redonne le tout corrigé plus bas... Smiley cligne

Je vous remercie pour ce coup de main "de maître" Smiley cligne

----------------------------------------------------------------
Je laisse tout le code (html, css, js) à disposition, des fois que...

A savoir que :
Ce menu est basé sur une ressource d'Alsacréations , que j'ai modifié.
Aussi, les bidouilles du genre "dtmh" (pour dtmenuhaut) à la place de "dt" sont dues au fait que j'ai 2 menus de ce type ans le même site et donc j'ai dû différencier les css pour éviter tout conflit. Bon, c'est pas très élégant comme code mais ça fonctionne (IE, Opéra, Netscape et bien sure Firefox) Smiley cligne

Pour les images je donne les dimensions. Il faudra adapter leur chemin avec les votre bien sure... :
menu01 : 110 x 26
menu02 : 110 x 26
sousmenu01 : 130 x 110
sousmenu02 : 130 x 20 (19 en réglage hauteur dans le css)

Et voici le code intégrale :


<html>
<head>
<title>Menu horizontal en images (ressource Alsacréations -Modifié par fuerchan-)</title>

<script type="text/javascript">
             <!--
            window.onload=montre;
            function montre(id) {
            var d = document.getElementById(id);
            for (var i = 1; i<=10; i++) {
            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
            }
            if (d) {d.style.display='block';}
            }
            //-->
        </script>
        <script src="kml_validation.js" language="javascript" type="text/javascript">
        </script>

<style type="text/css">

/*Couleurs des liins*/

a:link{
	color: #DAA520;
	text-decoration: none;
}

a:visited{
	color: #DAA520;
	text-decoration: none;
} 

a:hover{
	color: #cccccc;
	/*text-decoration: underline;*/
}

/* ++++++ MENU */

.para {  /* dl, dt, dd, ul, li */
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menuhaut {
	position: absolute;
	margin: 130px 0px 0px 295px; /* position générale menus */
	z-index: 50;
	height: auto;
	/*border: 1px solid yellow;*/
}
#menuhaut .dlmh {
	float: left;
	width: 130px; /* espace entre les menus */
	margin: 0 1px;
}

#menuhaut .dtmh {
	text-align: center;
	font-weight: bold;
	background-image: url(../images/menu01.jpg);
	width: 110px; /* largeur menus */
	line-height: 26px; /* hauteur menus */
	/*border: 1px solid red;  /*cadre menus */
	
}
#menuhaut .ddmh {
	border: 1px solid #000000; /* cadre sous-menu */
	margin-top: 1px ; /* espace entre menu et sous-menu */
	width: 130px; /* largeur sous-menu */
	height: 110px; /* hauteur sous-menu */
	background-image: url(../images/sousmenu01.jpg);			
}

#menuhaut .limh { 
	text-align: left;/*position liens de sous menu*/
	height: 18px; /*espace entre les liens de sous menu*/
}

#menuhaut .limh a, #menuhaut .dtmh a {
	text-decoration: none;
	display: block;
	height: 100%;	
}

#menuhaut .dtmh a:hover  { 
background-image: url(../images/menu02.jpg);	
}

#menuhaut .limh a:hover{
	background-image: url(../images/sousmenu02.jpg);	
	height: 16px;	/*hauteur image hover liens sous menu*/
} 

.ulmh{
	margin-top: 10px;/*hauteur liens de sous menu*/
}
.liajust{
	padding-left: 8px;/*retrait liens de sous menu*/		
}
</style>


</head>
<body>

<div class="para" id="menuhaut">

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre();"><a href="#">Lien 01</a></dt>
    </dl>

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre('smenu1');"><a href="">Lien 02</a></dt>
        <dd class="para ddmh" id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
        <ul class="para ulmh">
            <li class="para limh"><a class="liajust" href="#">S/Lien 01</a></li>
            <li class="para limh"><a class="liajust" href="#">S/Lien 02</a></li>
            <li class="para limh"><a class="liajust" href="#">S/Lien 03</a></li>
            <li class="para limh"><a class="liajust" href="#">S/Lien 04</a></li>
            <li class="para limh"><a class="liajust" href="#">S/Lien 05</a></li>                           
        </ul>
        </dd>
    </dl>

    <dl class="para dlmh">
        <dt class="para dtmh" onmouseover="javascript:montre('smenu3');"><a href="#">Lien 03</a></dt>
    </dl>

</div>

</body>
</html>

Sujet clos

CSS et mise en forme, CSS3

Centrage dans un menu css