18041 sujets

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

PB : Menu deroulant vertical + gabarit 750px fixe menu gauche

Bonjour à tous ,

j'ai pris le gabarit de 750px fixe avec header footer et menu à gauche http://css.alsacreations.com/modeles/modele3.htm , j'y ai mis le menu déroulant vertical http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm.

Mon probleme est celui-ci : j'ai parfois peu de contenu dans la div centre , mon menu comporte(ra) pas mal de liens , si je deroule celui-ci il passe au dessus du footer , est-ce possible de faire descendre le footer avec le menu ?

HTML :

<body>

<div id="conteneur">

	  <div id="header">header de largeur fixe : 750px <a 

href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>

	  <div id="gauche"><dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="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.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="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.1</a></li>
				</ul>
			</dd>

	
</dl>
		
	  </div>
	  
	  <div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />

  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	</div>

	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
	  

</body>
</html>


CSS
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}


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';}
}
//-->


Exemple : http://rs459.free.fr
Modifié par rs459 (14 Feb 2007 - 07:04)
Bonjour,

Le menu doit être restylé sans positionnement absolu (en passant par float, par exemple).

Cela dit... Ah que ce site serait plus ergonomique avec le même menu statique et tout ouvert, sans avoir à cliquer sur les petits tiroirs qui s"ouvrent et qui se ferment, et qui ne font rien qu'à ralentir la navigation ! Smiley ravi
Merci,

je vais voir ca avec les proprietes float ,

oui c'est vrai qu'il serait plus ergonomique avec le menu deployé mais à vrai dire c'est plus dans un but pedagogique que je "crée" (assemble ?) ce site, le menu est fictif.


decidemment ce satané pied de page m'en fera toujours baver Smiley fache ....
Sujet clos
Aller à