28220 sujets

CSS et mise en forme, CSS3

Mise en page en 4 parties

Bonjour,

Je dois réaliser une mise en page pour un site.
Le cahier des charges exige une compatibilité IE, Firefox et Opera.

La mise en page se constitue comme suit :
- une barre d'outil en haut qui fait 100% en largeur,
- du contenu à gauche,
- un menu à droite d'une largeur de 200 px,
- un encadré à droite d'une largeur de 200 px et d'une hauteur de 50 px et qui doit toujours se caler en bas à droite de l'écran.

J'ai utilisé le principe des marges négatives pour les 3 premiers éléments, ça marche nickel. En revanche, je bute sur l'intégration du 4ème élément (l'encadré).

Pour les 3 premiers éléments, voici mon code html :

<div id="toolbar">la barre d'outil</div>
<div id="container">
<div id="content">
Ici le contenu de gauche
</div>
</div>
<div id="menu">Menu de droite</div>


et voici la CSS :


#toolbar {
  height: 30px;
}
#container {
  width: 100%;
  float: left;
  margin-right: -200px;
}
#content {
  margin-right: 200px;
}
#menu {
  float: right;
  width: 200px;
}


Pouvez-vous me dire comment faire pour intégrer le fameux encadré qui me pose pb...
Merci d'avance pour votre aide Smiley smile
Modifié par jimor (19 Feb 2006 - 18:03)
ton bloc de droite n'est pas dans le bloc conteneur
essaye ca :
	<body>
		<div id="toolbar">la barre d'outil</div>
		<div id="container">
			<div id="content">
				Ici le contenu de gauche
			</div>
			<div id="menu">Menu de droite</div>
		</div>		
	</body>

puis voici ton fichier.css un peu modifié

div{
/*ceci permet de mieux distingué la position des blocs.*/
/*Tu peux laisser les valeurs des paddings et margins à 0, puis les redefinir pour chaque bloc.*/
/*Ainsi tu sera à l'abris des valeurs aléatoires des différents navigateurs*/
	border:1px red solid;
	margin:0px;
	padding:0px;
}
#toolbar{
	height:30px;
}
#container{
	float:left;
	margin-right:-200px;
	width:100%;
}
#content {
	width:80%;
	float:left;
}
#menu {
  float: right;
  width: 200px;
}
Merci pour ta réponse... mais ça ne répond pas vraiment à ma question.
Mon problème est l'intégration de l'encadré en bas à droite de l'écran.

Raphaël, à l'aide Smiley cligne
Tu veux un bloc qui, comme les publicités soit toujours en bas à droite même si on a un ascenceur sur la page et que l'on descend c'est ça ?

si c'est ça, ca se fait en javascript et non en css sauf erreur de ma part
Modifié par Artusamak (21 Feb 2006 - 18:20)
Sujet clos
Aller à