[Résolu] Problème conteneur global

Question

Julihus

27 Feb 2006 à 19:22

Désolée je n'avais pas changé les liens Smiley smile

Donc voici la bonne adresse :

http://julihus.free.fr/www.ville-unieux.fr/citoyenne/citoyenne.php

Et voici mon code CSS :


#conteneur_global {
	position: relative; /* on positionne le conteneur */
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	text-align: left;
	background-color: #CCCCCC;
}

#conteneur {
	position:relative;
	top:30px;
	width:735px;
	margin:0 auto 0 auto;
}

#contenu {
	top: 0px;
	position: absolute;
	width: 735px;
	top: 53px;
	background-repeat: repeat-y;
	background-position: right top;
}

#en-tete {
	width:735px;
	z-index:500;
	margin:0 auto 0 auto;
}

#liens_generaux {
margin:0 auto;
position:absolute;
width:735px;
z-index:100;
}

#menu_general,#bandeau_flash {
	margin:0;
}

#contenu_cible {
	width: 570px;
	top: 50px;
}

#rubriques_page {
	width:147px;
	position: absolute;
	top: 0;
	left: 588px;
}

#liens_relatifs {
	width: 130px;
	margin-top: 20px;
	position: absolute;
	right: 0;
	top: 300px;
	text-indent: 10px;
}

#bandeau_titre_rub {
	background-position:top;
	background-repeat:no-repeat;
	height:50px;
	width:735px;
	position: absolute;
}

#pied_de_page {
	height: 40px;
	width: 735px;
	background-color: #FFFFFF;
	text-align: center;
	position: absolute;
	margin-top: 10px;
	border-top-width: 1px;
	border-top-style: solid;
}

Et le code html :


<!--CONTENEUR GLOBAL -->
<div id="conteneur_global">

<!--EN-TETE -->
<div id="en-tete">   

	<!--Bandeau Flash -->	
	<div id="bandeau_flash"><img src="../accueil/images/banniere_accueil.jpg" alt="banniere_accueil" width="735" height="100" />
	  <!--<object type="application/x-shockwave-flash" data="accueil/flash/bandeau_accueil.swf" width="735" height="100">
	   <param name="movie" value="accueil/flash/bandeau_accueil.swf"/>
	  <p>Il vous manque le plugin flash pour visionner l'animation.</p>
		</object>-->
	</div>
	<!--Fin bandeau_flash -->
	
	
	<!--Menu général -->	
	<div id="menu_general">
	
			<!--Liens généraux -->	
			<div id="liens_generaux">
			
			<?php include ("../commun/liens_generaux.html"); ?>  <!--Le fichier liens_generaux.htm est inclus à cet endroit -->
			</div>
	</div>
	<!--Fin menu général -->
</div>  
<!--FIN EN-TETE -->




<!--CONTENEUR -->
<div id="conteneur">

	<!--Bandeau contenant titre et chemin -->
	<div id="bandeau_titre_rub">
	
		<div id="titre_rub">
		<ul>
		<li class="gros_ssrub">Votre mairie à la loupe !</li>
		<li class="petit_ssrub"></li>
		</ul>
		</div>
  </div>

	
	<div id="contenu">
	
		<div id="contenu_cible">
		Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>Ceci est un test de contenu<br/>
		</div>

		<!--Liens de page à droite -->
		<div id="rubriques_page">
		
	
		<div class="rubriques">
		<?php include ("../citoyenne/rubriques_citoyenne.html"); ?> <!--Les rubriques accueil sont inclues à cet endroit -->
		</div>
		
		<div id="liens_relatifs">
			<ul>
		 	<li class="gif_accueil"><a href="../index.php" name="Accueil" accesskey="1" title="Accueil">Accueil</a></li> 
			<li class="gif_contact"><a href="#" accesskey="7" title="Contact">Contact</a></li> 
			</ul>
		</div>
		</div>
		<!--Fin liens de pages -->
		
		
		<!--PIED DE PAGE -->
		<div id="pied_de_page">
			<ul>
		 	<li><a href="#" accesskey="0" title="Raccourcis">Raccourcis</a></li> 
			<li><a href="#" accesskey="3" title="Plan du site">Plan du site</a></li> 
		 	<li><a href="#" accesskey="5" title="Mentions légales">Mentions légales</a></li> 
			</ul>

			<br />

		  <ul>
			
			<li><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjulihus.free.fr%2Fwww.ville-unieux.fr%2F">
			<img src="../commun/images/valid-xhtml10.png" alt="Valid Xhtml!" style="border:0;width:88px;height:31px" /></a></li>
			
			<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://julihus.free.fr/www.ville-unieux.fr/">
			<img src="../commun/images/vcss.png" alt="Valid CSS!" style="border:0;width:88px;height:31px" /></a></li>			
		  </ul>
		</div> <!--Fin pied de page -->
	</div>
	<!--Fin contenu -->
</div>
<!--FIN CONTENEUR -->
</div>
<!--CONTENEUR GLOBAL -->

Mon probleme c'est le conteneur global en gris qui ne contient pas la totalité.

Merci
Modifié par Julihus (28 Feb 2006 - 14:03)

Hermann

27 Feb 2006 à 20:56

Bonsoir,
Problème fréquent. Je te conseille d'aller lire ça et
les différents tutoriels qui traitent du positionnement.

Je pense que le problème viens de

#contenu {
	top: 0px;
	position: absolute;
	width: 735px;
	top: 53px;
	background-repeat: repeat-y;
	background-position: right top;
}

Le positionnement absolute est en dehors du flux donc son conteneur
(le div parent) ne le prends pas en compte dans la calcul de sa hauteur.

Le positionnment devrait être utiliser seulement quand il est vraiment utile...
Pour placer un div il vaut mieux commencer par utiliser les marges.
Modifié par Hermann (27 Feb 2006 - 21:00)

Julihus

28 Feb 2006 à 11:04

Merci Hermann,

J'avais déjà essayé de changer les positionnements mais sans succès...

J'en ai modifié plusieurs, il n'y avait pas que #contenu.
Je n'ai laissé que mon menu de droite en absolute.

Il me reste tout de même un problème avec le pied de page.
Peux tu me dire où est le problème ?

http://julihus.free.fr/www.ville-unieux.fr/citoyenne/citoyenne.php

Voici le nouveau code CSS


body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
}

/*************************************************/
/*         Contenants                            */
/************************************************/
#conteneur_global {
	position: relative; /* on positionne le conteneur */
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	text-align: left;
	background-color: #CCCCCC;
	height: auto;
}

#conteneur {
	position:relative;
	top:30px;
	width:735px;
	margin:0 auto 0 auto;
}

#contenu {
	width: 735px;
	background-repeat: repeat-y;
	background-position: right top;
}

#en-tete {
	width:735px;
	z-index:500;
	margin:0 auto 0 auto;
}

#liens_generaux {
margin:0 auto;
position:absolute;
width:735px;
z-index:100;
}

#menu_general,#bandeau_flash {
	margin:0;
}

#contenu_cible {
	width: 570px;
	top: 50px;
}

#rubriques_page {
	width:147px;
	position: absolute;
	left: 588px;
	top: 50px;
}

#liens_relatifs {
	width: 130px;
	margin-top: 20px;
	position: absolute;
	right: 0;
	top: 300px;
	text-indent: 10px;
}

#bandeau_titre_rub {
	background-position:top;
	background-repeat:no-repeat;
	height:50px;
	width:735px;
}

#pied_de_page {
	height: 40px;
	width: 735px;
	background-color: #FFFFFF;
	text-align: center;
	margin-top: 10px;
	border: 1px solid #333333;
}

Modifié par Julihus (28 Feb 2006 - 11:05)

Julihus

28 Feb 2006 à 14:02

Super merci !!

Je débute et j'ai appris grâce à ce site et d'autres.
Alors merci beaucoup de m'aider.

A bientôt.

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème conteneur global