28220 sujets

CSS et mise en forme, CSS3

[Resolu] optimisation des divs qui ne veulent pas bouger

Bonjour,

J'ai un petit soucis. j'ai fait un bloc (conteneur1) qui contient 2 zones (une gauche fixe et un centre dynamique) quand j'augmente mon centre le bloc conteneur1 s'agrandit comme prevu il n'y a pas de probleme.

par contre quand derriere ce bloc conteneur1 je veux placer un conteneur2 contenant d'autre bloc (les_autres et suite) celui-ci ne veut pas se placer juste apres mon conteneur1 qui s'agrandit grace au centre1. Je suis obligé d'indiquer une taille fixe a mon conteneur2 (margin-top) ce qui est problematique si jamais mon conteneur1 s'agrandit.

pour plus de clarté je vous invite a essayer le code de ma page html suivante :


<!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" xml:lang="fr" lang="fr"><head>

<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;    
	font-family: verdana, arial, sans-serif; 
	font-size: 11px;
}

.corps {
	float: left;
	width: 540px;
	background-color: #FFFFFF;
}

#conteneur1 {
	margin: auto;
	width: 700px;
	height: auto;
	position: absolute;
	overflow: visible;
	left: 50%;
	margin-left: -350px;
	margin-top: 50px;
	border: 2px solid #000000;
	background-color: #FCFCFF;
}

#centre1 {
	height: auto;
	background-color:#00DD33;
	margin-left: 180px;
}

#gauche {
	position: absolute;
	left:0;
	width: 180px;
	height: 100px;
	background-color:#00AA00;
}

.conteneur2 {
	color: #336699;
	width: 700px;
	float:left;
	height: auto;
	margin-top:200px;/* Quand je supprime cette ligne ce bloc vient tout en haut*/
	margin-left: 350px;
	background-color: #EECCEE;
}

.suite {
	margin-top: 20px;
}

.spacer {
	clear:both;
}

.les_autres {
	height: auto;
}
-->
</style>
</head>
<body>

 <div class="corps">

   <div id="conteneur1">
	<div id="gauche">
		gauche <br/>gauche<br/>
	</div>
	<div id="centre1">
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
		centre1 <br/>centre1<br/>
  	</div>
   </div> <!-- fin conteneur1 -->

   <div class="spacer">&nbsp</div>
   <br>

   <div class="conteneur2">
	<div class="les_autres">
		les_autres <br/>les_autres<br/>
	</div>

	<div class="suite">
		la suite1 <br/>lasuite1<br/>
	</div>
	<div class="suite">
		la suite2 <br/>lasuite2<br/>
	</div>
	
   </div> <!--fin conteneur2-->

   <div class="spacer">&nbsp</div>
   <br>

 </div><!-- fin corps -->

</body>
</html>


j'ai mit du texte du nom de chaque bloc et des couleurs différentes pour bien visualiser les choses et surtout le probleme !

merci d'avance à celui ou ceux qui trouveront mon probleme de dynamisme de blocs

P75
++
Modifié par P75 (10 Jun 2005 - 01:55)
Et, psssit !

Ne parle pas de calque ici ...

Il y a beaucoup de conteneurs dans ton code, un float dans un float ... si tu simplifiais pour tester ...
Mais je ne suis pas un cador, c'est ton titre qui m'a attiré ...

Pour en savoir plus sur les calques, clique sur CCC dans ma signature.

Pssit : tu ne m'as pas vu, d'accord !
Modifié par Vero (09 Jun 2005 - 16:49)
merci pour l'info que je viens de lire ... j'avais utiliser ce mot c*l**e pour eviter les répétitions syntaxiques .. Smiley confused

par contre je ne peux pas simplifié c'est ma structure existante et j'aimerais la faire fonctionné tel que avec cette "complexité" apparente.

je suis sur qu'il y a une solution, je cherche depuis longtemps ... trop longtemps Smiley langue c'est d'ailleur pour ca que je poste sur ce forum à la recherche d'une solution qu'une personne connaiterais ....

merci
++
Ton #conteneur1 n'est pas dans le flux, il ne peut donc avoir aucune influence sur le positionnement des autres éléments, c'est bien normal.

Pour le remettre dans le flux, supprime la règle position:absolute.

Par ailleurs je crois qu'il y a beaucoup d'autres règles inutiles (voire néfastes) dans ta CSS.
Bonjour,

Tu devrais vraiment éditer ton titre, il n'a pas de sens et ne sera jamais retrouver lors de recherches futures. Smiley cligne

Extrait des règles:
aide/règles a écrit :

(...)Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau,(...)

Conventions d'écriture

Ton #conteneur1 n'est pas dans le flux, il ne peut donc avoir aucune influence sur le positionnement des autres éléments, c'est bien normal.

Pour le remettre dans le flux, supprime la règle position:absolute.

effectivement quand je supprime la regle absolute mon div pousse bien l'autre bloc

Par contre j'utilise la regle absolute pour centrer mon bloc sur l'écran maintenant je ne peut plus le centrer en supprimant le absolute .... ou sinon comment faire ?
Modifié par P75 (10 Jun 2005 - 00:44)
j'ai ajouté un bloc qui contient tous mes autres blocs que j'ai appelé "legrand"


.legrand {
	position:absolute;
	width: 720px;
	height: auto;
	left:50%;
	margin-left:-350px;
	background-color:#FF0000;
}

#conteneur1 {
	margin: auto;
	width: 700px;
	height: auto;
	margin-top: 50px;
	border: 2px solid #000000;
	background-color: #FCFCFF;
}

.conteneur2 {
	color: #336699;
	width: 700px;
	margin: auto;
	height: auto;
	background-color: #EECCEE;
}

<div class="legrand">
 (...)
</div>


... la j'arrive a ce que je veux ... par contre pour citer Xavier :


Par ailleurs je crois qu'il y a beaucoup d'autres règles inutiles (voire néfastes) dans ta CSS.


... je vois pas ou optimiser, je commence le css alors au début c'est peut être brutal, mais je vois pas comment simplifier ou épurer ... vous voyez vous ?
P75 a écrit :
j'utilise la regle absolute pour centrer mon bloc sur l'écran
ta div.legrand est inutile, et le centrage ne fait pas bon ménage avec position:absolute. margin-left:auto;margin-right:auto est suffisant pour centrer, en ajoutant text-align:center sur le body pour IE.

Il me semble que l'ensemble de tes position:absolute sont inutiles ainsi que les float:left, mais l'important c'est d'aboutir et tu vas progresser avec la pratique.
Retire juste ta div.legrand et essaye le centrage comme indiqué Smiley cligne
Sujet clos
Aller à