28173 sujets

CSS et mise en forme, CSS3

[Résolu] PB de menu trop long qui passe sur le footer

Bonjour,

Voilà j'ai décidé pour mon futur projet d'abandonner les bons vieux tableaux et d'enfin me mettre au CSS/DHTML. Mais j'avoue avoir encore beaucoup de mal et donc beaucoup de problémes dans l'intégration de mon design.

J'ai beau eu chercher, impossible de trouver une solution à celui-ci :
Je possède des menu a gauche qui sont plus long que le contenu de droite, et là horrible, le menu passe sur le footer. Cela fait plusieurs heures que j'essais de trouver une solution mais rien ne marche Smiley decu Je vais craquer.

Je vous joint le code dhtml suivi de la feuille de style css : 


<body>
<div id="conteneur">
	<div id="header">
	</div>
	<div id="principal">
		<div id="gauche">
			<div>
				<p><img src="css/membres.png" /></p>
				<form>
				<p><label>Login</label></p>
				<p><input type="text" /></p>
				<p><label>Mot de passe</label></p>
				<p><input type="password" /></p>
				<p><a href="">Mot de passe oublié ?</a></p>
				</form>
			</div>
			<div>
				<p><img src="css/menu.png" /></p>
				<ul>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
				</ul>
			</div>
			<div>
				<p><img src="css/menu.png" /></p>
				<ul>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
					<li><a href="#">Chien</a></li>
				</ul>
			</div>
		</div>
	
		<div id="centre1">
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
			<a class="pave" href="#"><img src="css/chien.jpg" /></a>
		</div>
	</div>
	<hr />
	<div id="footer">
	<p>Copyright - Animoz.net 2006 <span><a href="#">Contactez-nous</a> | <a href="#">Infos</a></span></p>
	</div>
</div>
</body>




body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
	background:  #660;
	color:#000;
}

hr {
  clear: both;
  visibility: hidden;
}

p{
	margin:0;
	padding:0;
}

a{
	color:#000;
}

#conteneur{
	position: absolute;
	width: 780px;
	left: 50%;
	margin-left: -390px;
	background: #f4eadb url('fond-contenu.png') repeat-y;
	
}

#header{
	height:120px;
	background: url('fond-header.png') no-repeat;
}

#principal{
	overflow:auto;
}

#gauche{
	position: absolute;
	left:20px;
	top:120px;
	width:155px;
}

#gauche div{
	width:147px;
	padding:0;
	padding-bottom:20px;
	margin: 15px 0 15px 0;
	background: url('fond-bloc.png') bottom no-repeat;	
}

#gauche form{
	margin:0;
	padding:7px;
}

#gauche label{
	color:#5a1b06;
	font-weight:bold;
	font-size: 12px;
}

#gauche input{
	background:#FFF;
	border : 1px solid #CCC;
	width : 90px;
}

#gauche ul{
	padding: 0;
	margin:0 0 0 30px;
}

#gauche li{
	list-style-image: url(puce.png);
	list-style-type: none;
	margin:3px;
}

#gauche li a {
	color:#000;
	font-size: 12px;
	font-weight:bold;
	text-decoration:none;
}

#gauche li a:hover {
	background:#FEC20E;
}


#centre1{
	margin-left: 175px;
}

#footer{
	height:32px;
	background: url('fond-footer.png') bottom no-repeat;
	color:#FFF;
	text-align:center;
}

#footer p{
	padding:5px;
}

#footer span{
	font-weight:bold;
	margin-left : 50px;
}

#footer a{
	color:#FFF;
	text-decoration:none;
}

.pave{
	display:block;
	float:left;
	width:185px;
	height:185px;
	margin:5px;
}

.pave img{
	border : 0;
}


Merci beaucoup pour votre aide Smiley smile
Modifié par Siffly (04 Jan 2007 - 16:29)
J'avais en fait déjà lu cette page.
J'ai retenter quelques modifs mais ca ne veut pas Smiley decu

J'ai t'enter avec le spacer, ca ne marche pas. Et dans la version de mon premier post, c'est avec un <hr /> et ca ne marche pas.
Modifié par Siffly (04 Jan 2007 - 15:05)
Pourtant je t'assure que c'est la bonne façon de procéder. En effet, avec un code semblable à celui-ci, ça marche Smiley cligne

A toi d'adapter maintenant Smiley cligne 


#gauche {
    background : red;
    float: left;
    width: 150px;
}
#centre1 {
    float: left;
    width: 550px;
    background: yellow;
}
hr {
    clear: both;
}
#conteneur {
    width: 700px;
    margin: 0 auto;
}
#header {
    height: 100px;
    background: green;
}
#footer {
    background : blue;
}
Ca marche merci beaucoup pour ton aide Antoine !
Toute une aprés midi pour faire ça... Mon design n'est pas fini d'être intégré :s

Si je rencontre d'autres problèmes je les metterai à la suite Smiley smile
Sujet clos
Aller à