18041 sujets

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

Mon menu ne veut pas se placer à droite !

Bonjour, j'essaie de faire une mise en forme très simple avec des css; en gros, un header; ensuite le contenu et une colonne prenant toute la hauteur pour le menu; et puis enfin un footer.

Mais j'ai quelques bêtes problèmes.
1) mon menu de droite ne veut pas s'afficher à droite.
(et il faudrait aussi qu'il touche le header et le footer... bref, qu'il occupe toute la hauteur de la cellule centrale)
J'ai essayer en chipotant avec les floats et tout ce que vous voulez; rien n'y fait !
2) Je voudrais que le cadre principal "bodycadre" s'adapte au contenu et, si celui-ci est trop petit; que le cadre prenne au moins la hauteur de l'écran.
3) mon "footer" refuse de se coller à la bordure inférieure de "bodycadre".

La page est là : http://tinyurl.com/yjmdva
et le css ici : http://tinyurl.com/ykba3j

Merci infiniment d'avance pour votre aide. J'en demande beaucoup, ce n'es t pas de la paresse mais après 2h d'arrachage de cheveux j'ai envie de laisser tomber Smiley cligne

Merci !

B.
Modifié par gordie (28 Oct 2006 - 20:46)
Slt,

J'ai peu de temps mais voilà pour commencer : modifie déjà ton code HTML pour placer menudroite juste après l'ouverture de bodycontenu. Externalise le code CSS que je te donne dans le code HTML.

<div class="bodycontenu">
<div class="menudroite" style="margin-bottom:100%;">aaaaaaaaaaaaaaaaaaaaaaa<br>aaaa<br>aaa</div>
		
			Lorem ipsum
Bonsoir,

Une des solutions:
		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>

<style>

body {
	background-color: #232e38;
	color: #CCCCCC;
	font: 0.7em Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.6em;
}
.bodycadre {
	background-color: #343F49;
	border: 10px solid #445566;
	margin: 10px 30px;
	padding: 0px;
}
.bodytop {

	background-color: #000000;
	height: 150px;
}

#conteneur{
    width: 100%;
	background-color: #232E38;
}

.bodycontenu {
    float: left;
    width: 73%;
	background-color: #343f49;
}

.bodycontenu p{
    margin: 10px; 
	text-align:justify;
}

.menudroite {
	background-color: #232E38;
	width: 25%;
    float: right;
    margin-right: 10px; 

}
.bodyfooter {
	background-color: #000000;
	text-align: center;
	clear:both;
	background-position: bottom;
	font-size:smaller;
    height: 50px;	
}

</style>
</head>
<body>

	<div class="bodycadre">
	
		<div class="bodytop"><img src="images/titre.jpg"></div>
			<div id="conteneur">
				<div class="bodycontenu">

			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum f			ormas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. 
           </p>
				</div>
				<div class="menudroite">
				<p>aaaaaaaaaaaaaaaaaaaaaaa<br>aaaa<br>aaa</p>
				</div>
				<div class="bodyfooter">
		  		<p>Créé par Gordie.Lachance, avec l'aidé de Jack Torrance pour le contenu) le 9 			septembre 2001.<br> Tous droits réservés.</p>
				</div>
			</div>
 		</div>
</body>

</html>


Bon courage.
Sujet clos
Aller à