28219 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement absolu-menu horizontal déroulant-pied de page

Bonjour,
J'ai fait pas mal de recherches (un peu partout, ici, siteduzero, html.it, etc...) mais je ne trouve pas la soluce à ce problème:
Je fais un site qui est composé comme suit:

1 div qui englobe 2 autres div: la bannière et le menu horizontal (celui du tuto avec effet java qui le fait descendre au passage de la souris)
1 div qui englobe aussi 2 autres div: le contenu propre de la page et une colonne plus petite à droite.
1 dernier div qui est le pide de page

Le gros problème est que lorsque la souris passe sur le menu horizontal, ce menu se déploie et pousse le reste vers le bas.

Partant de là je place en absolu mais le pied de page lui se met en haut, impossible de le placer correctement (tout en gardant à l'esprit que le contenu de la page peut avoir une hauteur variable donc je ne peut pas placer ce pied de page en absolu).

Je vous montre le site: http://www.cilu.it (pas dans l'idée de faire de la pub car mon site ne s'adresse qu'au marché italien et est en italien)

Voici le code Css simplifié:

/*LE BODY*/
body{
position:relative;
margin:auto;
padding:0;
width:800px;
}



/*LE DIV QUI ENGLOBE LES DIV HEADER ET MENU*/
#top{
position:absolute;
width:100%;
}

#header{
height:90px;
width:100%;
}
/*LE FAMEUX MENU HORIZONTAL AVEC EFFET JAVA QUI POUSSE LE RESTE DE LA PAGE QUAND LA SOURIS PASSE DESSUS*/
#menu{
height:20px;
width:100%;
}



/*LE DIV QUI ENGLOBE LES DIV MAIN ET RIGHT MENU, TOUT 2 PLACéS EN FLOAT*/
#center{
position:absolute;
top:110px;
left:0;
}
	
#main{
float:left;
width:625px;
padding:10px 25px 10px 0;
margin:0;
}

#rightmenu{
float:right;
width:150px;
padding:10px 0 10px 0;
}



/*LE DIV DU PIED DE PAGE QUI NE SE PLACE PAS DU TOUT CONVENABLEMENT*/
#footer{
padding:0;
width:100%;
}


Le xHTML est expliqué plus haut. A savoir que j'appelle ds l'ordre:
le div de la bannière #header
le div du menu horizontal #menu
le div de la colonne droite #rightmenu
le div du contenu de la page #main
le div du pied de page #footer

En tous cas si quelqu'un prend le temps de jeter un oeil et me résoud ça je lui en serais super reconnaissant.

Merci d'avance.

Cirilo
Modifié par cirilo (05 Jan 2007 - 12:40)
Bonjour,

Tu as essayé un clear: both; sur ton footer ?

Pourquoi #center est en absolute ?
Modifié par ghost (04 Jan 2007 - 19:39)
Ciao Ghost,

Le clear:both; ne donne rien, j'avais essayé oui. Le truc c'est que le reste est sorti du flux de par le positionnement absolu, donc le dernier div (qui n'est pas placé en absolu se met en haut de la page).

Pour le positionnement absolu sur le center, c'est pour pouvoir le "maintenir" ferme quand le menu déroulant se déploie, sinon ce dernier pousserait tout le reste de la page vers le bas.
Re,
Pourquoi pas ton header en absolute et le center en relative avec des z-index adéquats et un clear sur le footer.

Sinon positionne ton footer en absolute dans ton center en bottom: 0;
Je viens de tester les 2 solutions:
- la première: le center en relative se colle sur le haut de la page.
- la seconde: le footer a ... disparu...!
Ca devient mystique à présent...
Je ne vois pas pourquoi le centre est en absolu, le déroulement d'un menu ne fait rien bouger normalement puisque les sous-menus doivent être en position absolue ...
Modifié par CNeo (04 Jan 2007 - 20:44)
Je précise que les menus sont soumis à un effet Javascript onmouseover(). Lorsque que le curseur passe dessus, les sous menus apparaissent.

Tu veux dire par là que je devrais changer quelquechose sur les sous-menus? Les passer en absolute avec un z-index supérieur?
Ceci dit la superposition d'éléments par z-index ne peut pas fonctionner si les éléments ne sont pas positionnés en absolute (dixit le tuto sur les types de positionnement de ce site)...
Marre de chez marre, je supprime ce menu déroulant et surtout cet effet JavaScript (qui soit dit en passant doit seulement rester un + coté client)!

Merci d'avoir essayer de m'aider Smiley biggrin

Bonne soirée!

Cirilo
Re,

Vois si ce gabarit fait ton affaire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>	

<script type="text/javascript">
<!--
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>

<style>
*{margin: 0; padding: 0;}

body {
margin: 0;
padding: 0;
background: white;
}

#conteneur{
width: 800px;
margin: auto;
position: relative;
overflow: hidden;
border: 1px solid black;

}

#header{
height: 90px;
border: 1px solid red;

}

dl, dt, dd, ul, li { /* --------------- menu --------------*/
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 92px;
left: 50%;
z-index:100;
width: 40em;
margin-left: -20em; 

}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#contenant {
position: relative;
z-index: 1;
top : 30px;
color: #000;
background-color: #ddd;
border: 1px solid gray;
width: 100%;
overflow: hidden;
}

#droite {
float: right;
border: 1px solid gray;
width: 150px;
overflow: hidden;
}

#gauche {


overflow: hidden; 
}

#footer{
border: 1px solid blue;
height: 130px;
clear: both;
background: white;
}

p{
margin: 5px 20px 5px 20px;
}

</style>


</head>

<body>
<div id="conteneur">
	<div id="header">
	header
	</div>
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
</div>


<div id="contenant">
		<div id="droite">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ut mauris sed massa porta vehicula. Phasellus vestibulum pretium augue. Donec aliquam dictum urna. Donec aliquam. Phasellus nisi elit, ultrices sed, rutrum sed, rutrum quis, dolor. Donec ipsum. Vivamus luctus sagittis felis. Nam sodales dui at eros. 
		</p>
		</div>
		<div id="gauche">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ut mauris sed massa porta vehicula. Phasellus vestibulum pretium augue. Donec aliquam dictum urna. Donec aliquam. Phasellus nisi elit, ultrices sed, rutrum sed, rutrum quis, dolor. Donec ipsum. Vivamus luctus sagittis felis. Nam sodales dui at eros. Sed sit amet nunc at libero molestie imperdiet. Morbi egestas, leo nec pulvinar pretium, tortor nisi congue elit, eget ullamcorper mauris nisl at odio. Fusce interdum. In mollis, neque ac venenatis fermentum, ante eros eleifend augue, eu mattis ligula neque id lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas viverra. Morbi ut libero. Integer rhoncus, dolor quis iaculis pulvinar, ante tortor mattis dui, eu sodales purus ligula in mi.

Sed blandit erat. In id pede sed neque pulvinar viverra. Fusce venenatis quam tincidunt orci. Sed a diam. Nulla congue libero non orci. Phasellus est ipsum, pretium vitae, interdum a, faucibus vel, lectus. Phasellus posuere, velit in pharetra sagittis, metus libero accumsan purus, sed dignissim orci metus sed dolor. Vestibulum malesuada massa sit amet dui. Donec eu erat. Nam id justo. Sed gravida rhoncus turpis. Nulla vel risus nec nisl vulputate congue.

Pellentesque et ligula. Cras blandit luctus libero. Etiam gravida auctor tellus. Phasellus et nisi. Vestibulum odio felis, cursus tincidunt, cursus eget, semper vitae, ipsum. Quisque in eros. Suspendisse eleifend dui vel mi. Maecenas nec elit. Fusce justo. Nam auctor elit et ipsum. Cras at lectus. Sed vestibulum. Praesent ac nulla vitae ligula tincidunt tincidunt. Phasellus viverra pede non turpis. Quisque tellus diam, vehicula in, rutrum ut, laoreet quis, magna. Cras sit amet lectus sit amet quam hendrerit viverra. Praesent dignissim nisi non leo. Sed egestas suscipit dui. Quisque neque. 
		</p>
		</div>
		<div id="footer"> 
		footer
		</div>
</div>
</div>
</body>

</html>
Ciao Ghost et surtout un grand merci car ça marche parfaitement.

Je te suis très reconnaissant, surtout quand je vois que tu as posté ce message de bon matin - Edit:minuit passé de 8 minutes!

Je mettrai donc le site avec cette disposition dès lundi ou mardi (car ce week-end je vais en France).

Je te remercie personnellement et sincérement.

Ciao!

Cirilo
Modifié par cirilo (05 Jan 2007 - 09:54)
Sujet clos
Aller à