18041 sujets

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

[résolu] Taille div centrer ??

Bonjour

Je suis entrain de refaire le site d' exemple du livre de Rapahel "css2" en réduisant la largeur de la page et en essayant de la centrer , je galére depuis pas mal de temps, je n' arrive pas à mettre la div "centrer (vert clair sur la page exemple http://www.larressore.net/indexbb.htm à la même dimension que le "header"....

[i]Code css[/b]

body{
margin: 0;	
padding: 0;
background: red;
color: black;
font-size:80%;
font-family: verdana, arial, helvetica, serif;
}
#centrer {
margin: auto; width: 80%; height: 100%; background: #97c05f; padding-right: 10 px; background-color:#00FF00;
}
#header {
margin: auto; width: 100%; padding: 0.1em 0.5em 0.1em 0.5em; height: 120px; background: #97c05f url(images/banniere.gif) top left no-repeat;
}
#header img {
float: right; margin: 5px 5px 5px 5px;
}
#header h1 {
margin: 0px; text-indent: -5000px; line-height: 0;
}
#header p {
font-weight: bold; font-size: 1.1em; margin: 45px 0px 0px 400px; color: white;
}
#menuhaut {
margin: auto; width: 100%;
padding: 0.1em 0.5em 0.1em 0.5em;
list-style-type: none;
background-color: black;
color: white;
text-align: right;
}
#menuhaut li{
display: inline;
}
#menuhaut a{
color: white;
text-decoration: none;
}
#menuhaut a:hover{
text-decoration: underline;
}
#menu {
float: left;
width: 15em;
padding: 0.5em 0 8em 0;
background: #336600 url(images/fondmenu.jpg) bottom left no-repeat;
}
#menu ul{
list-style-type: none;
padding: 0;
margin: 0 1em 0 1em;
}
#menu li a{
display: block;
text-decoration: none;
height: 1.4em;
line-height: 1.4em; /* pour centrer vert le texte dans le bouton lien*/
color: white;
font-weight: bold;
font-size: 120%;
text-indent: 1em;
}
#menu li a:hover{
background: #cccc33;
color: #336600;
}


C[b]ode html[/i]

[/code]
<body><div id="centrer"></div>
<div id="header">
  <img src="images/armoirie.gif" alt="armoirie du Labourd" />
  <h1>Larressore, village du Pays Basque</h1>
<p>Larrossoro Village du Pays Basque</p>
</div>
<!-- Menu acces rapide -->
<ul id="menuhaut">
	<li><a href="/livre/" accesskey="1">Retour à l'accueil</a> - </li>
	<li><a href="/livre/?/Contact">Contact</a> - </li>
	<li><a href="/livre/manager">Espace privé</a></li>
</ul>

<div id="menu">
	<!-- Menu de navigation général -->
	<ul>
	<li><a href="/livre/" accesskey="1">Accueil</a></li>
	<li><a href="/livre/?/Sommaire" title="Voir le plan détaillé du livre">Sommaire</a></li>
	<li><a href="/livre/?/Extraits" title="Quelques parties de l'ouvrage">Lire des extraits</a></li>
	<li><a href="/livre/?/Presse" title="Les médias et sites qui mentionnent ce livre">Presse et 		retours</a></li>
	<li><a href="/livre/?/Erratas/" title="Les erreurs et corrections apportées">Erratas</a></li>
	<li><a href="/livre/?/Exemples/" title="Les codes CSS d'exemple du livre">Exemples</a></li>
	<li><a href="/livre/?/Soutien" title="Soutenez et faites connaître ce livre">Soutien</a></li>
	<li><a href="/livre/?/Achat" title="Achetez le livre">Achat</a></li>
	<li><a href="/livre/?/Fan-art" title="Contributions des lecteurs">Fan-art</a></li>
	</ul>
	
	<!-- Formulaire de recherche -->
	<p>Recherche générale :</p>
	<form action="/livre/search.php" method="get">
	<div>
		<input type="text" name="q" value="mot-clé" id="q" />
		<input type="submit" value=" ok " name="s" id="search-s" />
	</div>
	</form>
</div>
</body>



Merci pour votre aide.

Bonne journée

Africa
Modifié par africa (14 Jun 2007 - 13:54)
Bonjour,

<body><div id="centrer"></div>
<div id="header">
...

Tu fermes directement div#centrer, qui devrait normalement contenir tout le reste. Forcément, ça ne risque pas de marcher. Smiley cligne

Sur la page en ligne, div#centrer n'est pas fermé, mais n'a justement pas de balise fermante. Un validateur HTML t'aurait signalé cette erreur, d'ailleurs.
Sujet clos
Aller à