28173 sujets

CSS et mise en forme, CSS3

Comment faire un design centré 768px (non extensible ) avec menu fixe?

Bonjour à tous!

J'aurais voulu savoir comment faire pour obtenir un site centré avec une largeur totale de 768 px tout en gardant le menu fixe?
Si possible en n'utilisant pas de javascript pour le menu fixe.
J'ai essayé avec un overlow:auto mais je me retrouve avec un gros problème lorsque je réduis la page au niveau inférieur : il y a alors 2 barres de scroll qui apparaissent! Smiley confus

Merci d'avance de votre aide! Smiley biggrin

CI-joint les codes CSS et Xhtml de ma page Web:

Code: Xhtml


<!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">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Fashion 4 Blogs, Colour Your Blogs!</title>
	<link rel="stylesheet" media="screen" type="text/css" title="Design_Essai2" href="Design_Essai2.css" />
</head>

<body>
	<div id="menu">
		<ul>
			<li><a href="Essai2.html">Accueil</a></li>
			<li><a href="#">blabla</a></li>
			<li><a href="#">blabla</a></li>			
			<li><a href="#">blabla</a></li>
			<li><a href="#">blabla</a></li>
			<li><a href="#">blabla</a></li>
			<li><a href="Liens.php">Liens</a></li>
			<li><a href="Newsletter.php">Newsletter</a></li>
			<li><a href="Contacts.html">Nous Contacter</a></li>
		</ul>
		
	
	</div>

<div id="conteneur">
	<div id="en_tete">
	</div>
	
	<div id="contenu">
	<p>
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
	    blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	
		blablablablablabla<br />
		blablablablablabla<br />
		blablablablablabla<br />
	</p>
	</div>
	
	<div id="bas_de_page">
		<ul>
			<li>|<a href="Essai2.html">Accueil</a>|</li>
			<li>|<a href="#">blabla</a>|</li>
			<li>|<a href="#">blabla</a>|</li>			
			<li>|<a href="#">blabla</a>|</li>
			<li>|<a href="#">blabla</a>|</li>
			<li>|<a href="#">blabla</a>|</li>
			<li>|<a href="Liens.php">Liens</a>|</li>
			<li>|<a href="Newsletter.php">Newsletter</a>|</li>
			<li>|<a href="Contacts.html">Qui Sommes Nous</a>|</li>
		</ul>
	
	<p>Copyright DeMoNMaTT &copy; Tous Droits Réservés 2007</p>
	</div>
</div>


</body>
</html>

Code: CSS


html, body
{
	height:100%;
	width:100%;
	overflow:auto;
}

body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	margin:0px;
	padding:0px;
	background:#FF9900; 
}

#conteneur
{	
	height:100%;
	width:512px;
	margin-left:256px;
	overflow:auto;
	background-color:#FF9900;
}

#en_tete
{
	height:200px;
	background:url(http://demonmatt.ifrance.com/Images/Fashion4Blogs.jpg);
	text-align:center;
	margin:0 auto;
	border:2px groove black;
}

a.infobulle
{
	position:relative;
	color: #FF99FF;
	text-decoration:none;
}

a.infobulle span
{
	display:none;
}

a.infobulle:hover
{
	background:url();
	z-index:500;
}

a.infobulle:hover span
{
	display:inline;
	position:absolute;
	white-space:nowrap;
	padding:10px;
	padding-top:10px !important;
	padding-top:25px;
	top:30px;
	left:200px;
	color:#CC66CC;
	font-size:0.8em;
	line-height:30px;
	text-decoration:underline;	
}

#contenu
{
	border:2px groove black;
	border-top:0px;
	padding-top:5px;
	padding-bottom:5px;
	margin:0 auto;
	text-align:center;
	background-color:white;
	background:url(http://demonmatt.ifrance.com/Images/Background3.jpg);
}

#contenu h2
{
	border-top:2px groove white;
	border-bottom:2px groove white;
	margin-left:10px;
	margin-right:10px;
	padding:5px;
	font-size:1.4em;
	color:yellow;
	text-align:center;
}


#contenu h2 a
{
	text-decoration:none;
	color:yellow;
}

#contenu p
{
	color:#FFCC66;
	text-align:center;
	border-top:1px solid white;
	border-bottom:1px solid white;
	margin-left:150px;
	margin-right:150px;
	padding:5px;
}

#contenu p span
{
	color:#CCCCCC;
}

#contenu p a
{
	color:white;
	text-decoration:none;
}

#contenu p a:hover
{
	color:yellow;
	text-decoration:underline;
}

#menu
{
	position:absolute;
	background-color:#FF9900;
	background:url(http://demonmatt.ifrance.com/Images/Background_Menu.jpg);
	border:2px groove black;
	width:224px;
	height:200px;
	left:16px;
	top:214px;
}

#menu ul
{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#menu li
{
	border-top:1px solid black;
	text-align:center;
	line-height:20px;
}

#menu li a
{
	display:block;
	width:100%;
	text-decoration:none;
	color:#FFFFCC;
}

#menu li a:hover
{
	text-decoration:underline;
	color:yellow;
	background-color:black;
}

#bas_de_page
{
	height:140px;
	margin:0 auto;
	border:2px groove black;
	border-top:1px groove black;
	text-align:center;
	background-color:white;
	background:url(http://demonmatt.ifrance.com/Images/Background3.jpg);
}

#bas_de_page p
{
	text-align:center;
	color:#CCCCCC;
}

#bas_de_page ul
{
	list-style-type:none;
	margin-left:60px;
	padding-top:5px !important;
	padding-top:10px;
	padding-bottom:35px !important;
	padding-bottom:20px;
	text-align:center;
}

#bas_de_page li
{
	float:left;
	line-height:15px;
	font-weight:0.8em;
	padding:3px;
	text-align:center;
}

#bas_de_page li a
{
	text-decoration:none;
	color:#FFFFCC;
}

#bas_de_page li a:hover
{
	text-decoration:none;
	color:yellow;
	text-decoration:underline;
}
Salut.

Je suppose que par menu fixe, tu veux dire un menu qui ne bouge pas lors du défilement de la page, auquel cas il faut te tourner vers la propriété CSS 
position: fixed
tout en étant conscient que ça ne fonctionnera pas sous IE6 (le menu se déplacera normalement au scroll, ce qui peut en général être considéré comme une dégradation de l'affichage acceptable pour IE6).

Pour centrer un site en largeur fixe, il suffit d'utiliser les marges automatiques : 
<body>
   <div id="global">
   <!-- Contenu de la page -->
   ...
   <!-- fin du contenu de la page -->
   </div>
</body>
#global {
   width: 768px;
   margin: 0 auto;
}
Salut!

Tout d'abord merci de te m'avoir répondu Smiley smile mais comment alors puis-je faire pour que le menu reste fixe et ne bouge pas sur IE?
Sujet clos
Aller à