28220 sujets

CSS et mise en forme, CSS3

Probleme de superposition blocs flotant + bloc relatif ou absolu

Bonjour,

J'ai un conteneur qui se retaille a volonte (width: 100%)
Dans ce conteneur, je veux ajouter 2 types de blocs :
- Un bloc de 200x200 qui doit se trouver a 350px du haut du conteneur et 200px du cote droit du conteneur.
- Une multitude de petits blocs de 50x50 qui se mettent en lignes et qui vont a la ligne a chaque fois qu'un recontre le bords droit du conteneur.

Mon probleme, c'est que les petits blocs ne veulent pas contourner le bloc 200x200. Ils viennent en superposition du bloc 200x200

En gros je voudrais


|------------------|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxx[[[[[[xx|
|xxxxxxxxxxx[[[[[[xx|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxx|
|------------------|

et si j'agradie la fenetre
|-----------------------|
|xxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxx[[[[[[xxxxxxx|
|xxxxxxxxxxx[[[[[[xxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxx|
|-----------------------|

Legende :
conteneur : -|

bloc 200x200 : [[[[[[[
[[[[[[[
[[[[[[[

petit bloc 50x50 : x


Je vous remercie par avance.
Bonsoir,

Tous d'abord je te remercie de porter attention a ma question.
J'ai volontairement simplifie ma question, car en realite il y a plus de bloc.
Le code est d'ailleurs inspire d'un "template" originaire d'ici.

Pour le CSS

#conteneur {
position: absolute;
width: 100%;
min-width: 750px;
}

#centre {
background-color:#888888;
margin-left: 150px;
margin-right: 150px;
}

#bloc50x50 {
float:left;
width: 50px;
height: 50px;
margin: 0;
padding:0;
}

#bloc200x200 {
position: absolute;
float: right;
top: 300px;
right: 200px;
width: 200px;
height: 200px;
margin: 0;
padding: 0;
}


Pour le html

  <body>
    <div id="conteneur">
...

      <div id="centre">

       <div id="bloc200x200">
		<img src="grandeimage.jpg" />
      </div>

        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
...
        <div id="bloc50x50">
		<img src="image1.jpg" />
        </div>
      </div>
  </div>
</body>


Voila la partie de code qui pose probleme.
En fait dans le conteneur, il y a aussi des menu verticaux, horizontaux, ...
Mais ce qui me pose probleme, c'est les petis bloc qui se superposent a mon bloc 200x200

Merci par avance
Ton probleme n'est peut-être pas resoluble puisque un bloc200x200 en position absolute est retiré du flux donc les images flottantes ne pourront le contourner.
d'abord nettoie un peu ton code :
tu n'as pas besoin de mettre chaque img dans un div et de lui attribuer une class (voir mon code)
le HR du bas sert a augmenter la hauteur du div conteneur pour qu'il englobe tous tes images flottantes.
D'autres part tu dois donner un height et un width a ttes tes images pour de raisons d'accessibilités.

<style type="text/css">
* {margin: 0; padding:0;}
#centre {
	position: relative;
	width: 750px;
	background:#888;
	margin-left: 150px;
	margin-right: 150px;
}
#centre img{
	float:left;
}
#bloc200x200 {
	float:right;
	margin: 10px;
}
hr {
	visibility:hidden; 
	clear:both
	}
</style>
</head>

<body>
 <div id="conteneur">
     <div id="centre">
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img src="/images/" width="50" height="50"/>
		<img id="bloc200x200" src="/images/" width="200" height="200" />
		<hr />
     </div>
</div>
</body>

Modifié par Hermann (19 Jan 2006 - 00:56)
Je te remercie de te pencher sur mon probleme.

Mais le code que tu me propose ne repond pas du tout a ma problematique.

Concernant les blocs avec les images, ils sont censes conenir d'autres information, d'ou la necessite de mettre les images dans ces blocs

Sinon mon probleme se limite uniquement a trouver une methode pour contourner (entourer) l'objet 200x200 par mes objet 50x50

Merci encore
Soit tout en position:absolute;
Soit on triche en créant des blocs 200×200 pour englober des groupes de blocs 50×50 (16 par groupe ?)...

Ça me semble tarabiscoté tout ça. En Flash ça marcherait mieux Smiley sweatdrop
Salut,

Merci pour ta reponse.

Si je mets tout en absolu, je pers le redimentionnement.

Et en flash je t'avoue que je connais pas trop, surtout que tout ca va etre dynamique avec php et mysql (pour le contenu des blocs)
Sujet clos
Aller à