[Résolu] Balises de positionnement

Bonjour à tous,

j'ai un petit problème avec la disposition de mon menu + sous-menu


voici le code:

<div id="menu_horizontal">
	<dl onmousemove="IncrementerTimer();">
		<dt id="menu_horizontal_accueil" onmouseover="FermerSousMenu(); AfficherSousMenu('sousmenu1',4); lancement_timer();"></dt>
		<dd id="sousmenu1">
			<ul>
				<li><a href="javascript:void(0);" onclick="ChargePage('historique','','','contenu_page'); ModifierUrl('page=index'); FermerSousMenu();">Historique</a></li>
				<li><a href="javascript:void(0);" onclick="ChargePage('activite','','','contenu_page'); ModifierUrl('page=index'); FermerSousMenu();">Activit&eacute;</a></li>
				<li><a href="javascript:void(0);" onclick="ChargePage('situation','','','contenu_page'); ModifierUrl('page=index'); FermerSousMenu();">Situation</a></li>
				<li><a href="javascript:void(0);" onclick="ChargePage('methodes','','','contenu_page'); ModifierUrl('page=index'); FermerSousMenu();">M&eacute;thodes de travail</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>
		<dt id="menu_horizontal_separateur"></dt>
	</dl>
	
	
	...
	
	
</div>

Css

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

#menu_horizontal
{
	width: 760px;
	float: left;
	position:absolute;
	top: 189px;
	z-index: 100;
}
#menu_horizontal dd
{
	background-color: #ab9a7d;
	visibility:hidden;
	display:none;
	text-align: center;
	overflow:hidden;
}
#menu_horizontal dl
{
	float: left;
}
#menu_horizontal dt
{
	text-align: center;
	cursor: pointer;
}
#menu_horizontal li
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #464646;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #464646;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #464646;

	padding: 5px 5px 5px 5px;
}

#menu_horizontal_accueil
{
	background-image: url(../Images/menu/menu1/accueil.jpg);
	width: 83px;
	height: 53px;
}
#menu_horizontal_separateur
{
	background-image: url(../Images/menu/menu1/separateur.jpg);
	width: 1px;
	height: 53px;
}

Comment puis-je modifier mes balises afin que lors du survol de la souris sur l'image accueil.jpg le sous menu s'affiche sans élargir le block contenant l'image acceuil ?
Modifié par lOeil (31 Mar 2007 - 11:19)

Hello et bienvenue,

Une "balise de positionnement" n'existe pas
Les balises sont du domaine de la structure (= du HTML) et non du domaine de la mise en forme (= des CSS).

Ce que tu cherches est une propriété CSS, donc je vais déplacer ton sujet dans le salon CSS.

lOeil a écrit :
Comment puis-je modifier mes balises afin que lors du survol de la souris sur l'image accueil.jpg le sous menu s'affiche sans élargir le block contenant l'image acceuil ?

Pour cela, ton code HTML ne suffit pas, il faut absolument nous confier ton code CSS.

voila j'ai mis à jour

Salut,
en le rendant indépendant du bouton. Ben oui, je sais bien que c'est le truc du moment les listes de définitions contenant des listes à puces contenant... pour faire des menus déroulant mais ça présente ce genre d'inconvenient (en dehors d'être, à mon sens, autant une bidouille que les tables imbriquées à leur grande époque... Aujourd'hui, c'est haro sur les tables qui ne doivent servir qu'à mettre en page des données tabulaires, demain, quand il y en aura bien partout, ce sera peut-être haro sur les listes à puces et/ou à définition qui ne devraient servir qu'à contenir que... des listes à puces ou de définitions, bon, je sais, c'est un peu mon dada en ce moment )

Enfin bref, sinon c'est normal, qu'un conteneur prenne la taille de son plus long élément, du coup, la solution consiste peut-être pour toi à faire ta liste à puces pour la barre de menu et à mettre le (ou les) sous-menu(s) dans des dive en position absolute en dessous et à les activer de la même façon avec ton javascript. En plus, ça te facilitera la vie pour le reste, tes sous-menus prendrons ton z-index de 100 mais ton menu pourra rester dans le flux normal de la page ce qui te simplifiera la vie pour le positionnement de la suite. J'ai fait un truc comme ça il y a peu pour un site avec des menus déroulants qui se passaient les uns par-dessus les autres (en escalier donc horizontaux et verticaux) et ça marche très bien.

Have swing

Merci, en effet ca va mieux
Modifié par lOeil (30 Mar 2007 - 22:49)