18066 sujets

Questions générales et questions de débutants

[Résolu ] Menu en bas à droite

Bonsoir à tous !!

Voilà je cherche à mettre un menu en bas à droite, j'y suis arrivé sous FF mais sous IE s'est décalé.
J'ai pensé à utiliser un hack pour régler mon petit probléme mais voulais savoir si vous voyez une autre solution !

Merci d'avance! Smiley langue 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#header {
border:1px solid #ccc;
height:140px;
}

#menu {
float:right;
margin: 34px 0 0 0  ;
padding:0;
}

ul#menu li {
display:block;
float:left;
margin:0;
padding:0;
text-align:center;
border : 1px solid black;
}

ul#menu li a {
color:#000;
display:block;
font-weight:700;
text-decoration:none;
line-height:40px;
width:90px;
}


#infos_site {
float:right;
width:306px;
margin:5px 2px 0 0;
height : 60px;
border : 1px solid #000;
text-align : center;
}

#logo {
float:left;
margin:0 0 0 20px;
padding:0;
width : 220px;
height : 131px;
border : 1px solid #000;
text-align : center;
}
-->
</style>

</head>
<body>
<div id="header">
			   <div id="logo">[logo]</div>
		           <div id="infos_site">[infos sur site]</div>

         <ul id="menu">
             <li><a href="" title="">Menu 1</a></li>
             <li><a href="" title="">Menu 2</a></li> 
             <li><a href="" title="">Menu 3</a></li>
             <li><a href="" title="">Menu 4</a></li>
             <li><a href="" title="">Menu 5</a></li>
       </ul>
</div>
</body>
</html>

Modifié par bibine (27 Apr 2006 - 20:07)
bibine a écrit :
Voilà je cherche à mettre un menu en bas à droite

Hello bibine.

J'avoue ne pas trop savoir ce que tu veux faire exactement…
Le problème, c'est que « en bas à droite » ne nous permet pas de savoir en bas à droite de quoi tu veux placer le menu.
En bas à droite de son bloc conteneur ? En bas à droite de la page ? En bas à droite de la fenêtre ?
Modifié par mpop (27 Apr 2006 - 01:03)
Bonjour mpop et bibine,

mpop > Je pense qu'il s'agit de mettre le menu en bas à droit du conteneur car c'est ce que bibine a réussi à faire avec FF

Je me suis penchée sur la question hier soir, mais il me reste à régler un souci d'espace
bibine > Voilà ce que j'ai trouvé :

J'ai tout d'abord pensé à mettre une balise <hr /> avec la propriété clear: both, après le bloc "infos", pour éviter qu'il ne soit adjacent au bloc "menu".

Balise <hr /> dont j'ai enlevé l'espace du haut, sous IE, en mettant une marge haute négative et l'espace du bas en donnant une épaisseur à la balise elle même (l'épaisseur, plus grande que la hauteur de l'espace du bas, l'annule)

Cela donne donc :

hr { /* pour éviter que le bloc info soit adjacent au bloc menu */
clear: both;
margin-top: -7px; /* pour supprimer l'espace du haut sous IE */
height: 16px; /* pour supprimer l'espace du bas sous IE */
visibility: hidden;
}


Ensuite, j'ai mis les blocs "infos" et "menu" dans un conteneur en float: right pour que le bloc "menu" rejoigne le bloc "infos" à droite du bloc "logo".
ex :

#conteneurInfosMenu { /* pour faire remonter le bloc menu sous le bloc infos */
width: 462px;
float: right;
border : 1px solid black;
}


Puis j'ai mis la marge haute du bloc "menu" (que tu a mis à 34px) à 0 pour le faire remonter
soit :

#menu {
float:right;
margin: 0; /* margin-top à 0 pour faire remonter le bloc menu */
padding:0;
}


et voila, c'est fini Smiley smile

sans oublier la balise <hr /> dans le html après la div "infos"

<div id="infos_site">[infos sur site]</div><hr />


edit : sans oublier les sources
http://openweb.eu.org/articles/initiation_float/
http://blog.alsacreations.com/2004/11/27/92-supprimer-les-marges-de-la-balise-hr-sous-ie
Modifié par blue (27 Apr 2006 - 14:44)
Bonsoir mpop et blue !!

Mpop >> Et bien c'était de mettre en bas à droite du bloc header , désolé pour le manque de précision.

Blue >> Merci pour le coup de main cela m'a rendu service . Et bien pour résoudre mon probléme , j'ai gardé ton idée du bloc conteneur "#conteneurInfosMenu" par contre au lieu d'utiliser la balise <hr /> , j'ai mis une largeur et un margin-top au "bloc menu" :

ex : 

#menu {
margin: 30px 0 0 0 ;
width : 462px;
padding:0;
background : #fff;
float : right;
}



Et cela marche impec !! Smiley lol Mici !!!
Sujet clos
Aller à