28173 sujets

CSS et mise en forme, CSS3

Mise en page en-tete et 2 colonnes et positionnement absolu

Bonjour

Je souhaite réaliser une mise en page avec une en-tete et 2 colonnes dont une fixe. La colonne fixe correspond au menu et la colonne occupant le reste de l'écran correspond au contenu.

Pour des questions de référencement, la colonne de contenu doit se trouver dans le code html, avant la colonne de menu. Je me suis donc dit que le positionnement absolu serait la solution par rapport au positionnement en float.

Le code css
body {
	color: #FFFFFF; 
	font-size: 11px; 
	line-height: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align: left;
	margin: 0 10px 0 20px; 
	padding: 0;
}

/* conteneur principaux */
div#principal {
	width: 100%;
	padding: 2px;
	position: relative;
}

div#enTete {
 	height: 100px;
	background-image: url(../../commun-v/fond.gif);
	background-repeat: repeat-x;
}

div#enTete h1{
	background-image: url(../../commun-v/entete.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 100px;
	width: 765px;
}

div#enTete h1 span{
	display: none;
}
	
div#document {
	position: absolute;
	width: 100%;
}

div#contenu {
	position: absolute;
	left: 160px;
	top: 10px;
}

/* minor divs */
.contentbox {
 	width: 95%;
	border: 1px solid #e4c55b;
 	background-image: url(../swirl.gif);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-color: #FFFEFA;
	margin: 0px -10px 10px -10px;
	padding: 10px 10px 20px 10px;
}
	
/*menu*/
div#menu {
	width:150px;
	font-size:93%;
	line-height:normal;
	position: absolute;
	left: 0;
	top: 10px;
}


Le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Del'Arte Canina</title>
<link href="styles/commun.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- conteneur principal -->
<div id="principal">
	<!-- Entete de page -->
	<div id="enTete"><h1><span>Titre du site</span></h1></div>
	<!-- menu et contenu -->
	<div id="document">
		<!-- contenu -->
		<div id="contenu">
			<div class="contentbox">
				<h3>Sous-titre</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce fermentum dolor nec lorem. Integer elit magna, blandit eu, molestie non, mollis in, mi. Duis adipiscing. Ut porta justo eget purus. Donec condimentum. Praesent pulvinar, dui egestas hendrerit elementum, nunc odio congue dui, id venenatis justo dolor sagittis metus. Integer est. Aliquam aliquam suscipit felis. Nunc non pede viverra magna tincidunt convallis. Cras vulputate tincidunt dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula est, congue in, commodo porttitor, accumsan quis, libero.</p>
			</div>
		</div>
		<!-- Menu sous forme de listes -->
		<div id="menu">
			<ul>
					<li><a href="#" title="Accueil" class="ongletActif"><span>Accueil</span></a></li>
					<li><a href="#" title="Lien 1"><span>Lien 1</span></a></li>
					<li><a href="#" title="Lien 2"><span>Lien 2</span></a></li>
					<li><a href="#" title="Lien 3"><span>Lien 3</span></a></li>
					<li><a href="#" title="Lien 4"><span>Lien 4</span></a></li>
					<li><a href="#" title="Lien 5"><span>Lien 5</span></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>


Comment faire pour que le div contenu occupe l'espace restant du div document sous IE et sous Firefox ?

mercid'avance
Bonjour,

En relisant ma question, je me suis rendu compte que ma formulation était vraiment trop imprécise.

Le problème que je rencontre avec le code que je vous ai donné est un problème d'ascenceur horizontal. En effet, je souhaite que mon contenu vienne se placer à droite de mon menu et qu'horizontalement, le contenu occupe l'espace libre laissé à droite du menu.

A l'heure actuelle, le contenu vient bien se positionner à droite du menu. Par contre, il occupe une largeur plus grande que l'espace libre laissé d'où l'apparition d'un ascenceur horizontal.

Sachant que je souhaite pas utiliser de positionnement en float mais un positionnement absolu.

Que dois-je faire ?

merci d'avance
Sujet clos
Aller à