28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement

Bonjour à tous,

Je fais appel à vos conseils car j'ai un petit soucis pour le positionnement de mon texte en fonction de l'action d'un menu. Une bonne illustration valant mieux qu'un long texte, voici mon soucis :

Sans utiliser le menu : http://img177.imageshack.us/img177/1708/image1mp4.jpg
Pendant l'utilisation du menu : http://img155.imageshack.us/img155/4066/image2pf1.jpg

Il faudrait, vous l'aurez compris, que mon texte reste au même endroit et ne se déplace pas lorsque le menu est déroulé. Je galère depuis plusieurs jours sans trouver de solutions. Merci d'avance.

Et bonne journée. Smiley cligne

Edit : voici mon code source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #222222;
	font-size: 12px;
}
body {
	background-color: #FFFFFF;
	margin: 0px;
}
a {
	font-size: 12px;
}
a:link {
	color: #84BD2B;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #84BD2B;
}
a:hover {
	text-decoration: underline;
	color: #84BD2B;
}
a:active {
	text-decoration: none;
	color: #84BD2B;
}

#entete {
	width: 100%;
	height: 100px;
	background-image: url(images/fond_entete.jpg);
}
#banniere {
	width: 800px;
	height: 100px;
	margin: 0px auto;
	border-left: 5px solid #CCCCCC;
	border-right: 5px solid #CCCCCC;
}
#fond_menu {
	width: 100%;
	height: 30px;
	background-image: url(images/fond_menu.jpg);
}
#menu {
	width: 800px;
	height: 30px;
	margin: 0px auto;
}
#page {
	width: 800px;
	height: 600px;
	margin: 0px auto;
	border-left: 5px solid #CCCCCC;
	border-right: 5px solid #CCCCCC;
	border-bottom: 5px solid #CCCCCC;
}
#texte {
}

.boutonFF {
    width: 160px;
	height: 30px;
    color: #FFFFFF;
    display: block !important;
    display: none;
    text-align: center;
    float: left;
    text-decoration: none;
    line-height: 30px;
    overflow: hidden;
 }

.boutonFF:hover {
    height: auto;
    cursor: pointer;
    color: #000000;
	background-image: url(images/fond_menu_hover.jpg);
 }


a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display: block;
    width: 158px !important;
    width: 88px;
    height: 30px;
    text-decoration: none;
    color: #000;
    font-family:  verdana;
    font-size: 10px;
    text-align: center;
    background: #FFFFFF;
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
}
a.SousMenu:hover {
	background-color: #84BD2B;
	color: #FFFFFF;
	font-size: 13px;
}

-->
</style>
</head>

<body>
<div id="entete">
	<div id="banniere"><img src="images/logo.jpg" alt="Logo" /></div>
</div>
<div id="fond_menu">
	<div id="menu">
		<div class="boutonFF">Menu general 1<br />
			<a class="SousMenu" href="#nogo">Sous-menu 1</a>
			<a class="SousMenu" href="#nogo">Sous-menu 2</a>
			<a class="SousMenu" href="#nogo" style="border-bottom: 1px solid #888888">Sous-menu 3</a>
		</div>
		<div class="boutonFF">Menu general 2<br />
			<a class="SousMenu" href="#nogo">Sous-menu 1</a>
			<a class="SousMenu" href="#nogo">Sous-menu 2</a>
			<a class="SousMenu" href="#nogo" style="border-bottom: 1px solid #888888">Sous-menu 3</a>
		</div>
		<div class="boutonFF">Menu general 3<br />
			<a class="SousMenu" href="#nogo">Sous-menu 1</a>
			<a class="SousMenu" href="#nogo">Sous-menu 2</a>
			<a class="SousMenu" href="#nogo" style="border-bottom: 1px solid #888888">Sous-menu 3</a>
		</div>
		<div class="boutonFF">Menu general 4<br />
			<a class="SousMenu" href="#nogo">Sous-menu 1</a>
			<a class="SousMenu" href="#nogo">Sous-menu 2</a>
			<a class="SousMenu" href="#nogo" style="border-bottom: 1px solid #888888">Sous-menu 3</a>
		</div>
		<div class="boutonFF">Menu general 5<br />
			<a class="SousMenu" href="#nogo">Sous-menu 1</a>
			<a class="SousMenu" href="#nogo">Sous-menu 2</a>
			<a class="SousMenu" href="#nogo" style="border-bottom: 1px solid #888888">Sous-menu 3</a>
		</div>
	</div>
</div>
<div id="page">
	<div id="texte">tesdfsd</div>
</div>
</body>
</html>

Modifié par sebastiano (06 Mar 2008 - 12:47)
bonjour
il faut que tu places ton menu en absolute pour qu'il vienne par-dessus :

#fond_menu {
	width: 100%;
	height: 30px;
	background-image: url(images/fond_menu.jpg);
            [#red]position: absolute;
            top: 100px;
            left: 0;[/#]
}
#page {
	width: 800px;
	height: 600px;
	margin: 0px auto;
            [#red]padding-top: 30px; /*sinon le texte commencerait sous le menu*/[/#]
	border-left: 5px solid #CCCCCC;
	border-right: 5px solid #CCCCCC;
	border-bottom: 5px solid #CCCCCC;
}

en espérant que ça n'ait pas de conséquences autres inattendues ....
ce menu est sympa (je n'avais pas encore vu ce système), mais il ne fonctionne pas sous IE6.
Modifié par verdan (06 Mar 2008 - 15:33)
(Re-)Bonjour !

Le menu ci-haut n'étant plus à l'ordre du jour (à cause d'IE6), j'ai donc mis en pratique un des articles d'Alsacréations concernant la mise en place d'un menu horizontal, avec sous-menu également horizontal. Celui-ci, pour être précis : http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm

Le mien fonctionne donc parfaitement, cependant j'ai encore un petit soucis : j'aimerai que le sous-menu disparaisse complètement une fois le curseur de la souris en-dehors de la zone de ce menu. Car en l'état actuel, les sous-menus restent affichés.

Existe-t-il une solution en CSS ? Ou dois-je me tourner vers le javascript ? (Sachant que je ne connais que très très peu ce dernier langage).

Merci d'avance !
sebastiano a écrit :
Existe-t-il une solution en CSS ? Ou dois-je me tourner vers le javascript ? (Sachant que je ne connais que très très peu ce dernier langage).

Les menus déroulant corrects utilisent à la fois CSS et Javascript. Celui proposé sur Alsacréations est vieux et soufreteux, et je déconseille son utilisation. Regarde plutôt du côté de celui-ci:
http://www.htmldog.com/articles/suckerfish/dropdowns/
Modérateur
bonsoir,

sur ce topic : http://forum.alsacreations.com/topic-4-32178-2-Menu-deroulant-full-horizontal--Resolu.html#p240775

en deuxieme page , c'est en français Smiley smile , je laisse une explication a propos de ce menu (pour le code js) :

http://gcyrillus.free.fr/essai/menu_deroulant.html

Ce js fait sensiblement la même chose que celui proposé par FlorentV , JS basé sur le DOM (architecture des balises) et ajoute ou enleve une class a des élements qui en ont deja peut-etre une d'appliqué.

Le principe est de doublé dans la portion css le li:hover par un li.classover.

LE js est appliqué a IE6 et inferieur par les commentaires conditionnels.

Ce js chargé lancé aprés le chargement complet de ta page , va recherché un element doté d'une id précise (ton menu) , une fois celui-ci trouvé , il recherche des li 'enfants' auxquel seront ajouté a la volé : on mouseover et onmouseout , selon l'evenement sera alors ajouté ou enlevé la class (couplé au li:hover) .

Sur l'exemple proposé , seul le code js t'interesse , repere bien l'id a donné a ton menu (ou a appelé dans le js) et n'oublie pas de nommé et declaré dans le js et le css la 'class' qui affichera ou pas ton sous-menu.

GC
Modifié par gcyrillus (21 Mar 2008 - 23:29)
Sujet clos
Aller à