18041 sujets

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

Div au centre d'un tableau de div

Bonjour,

Ce que je veux n'est pas simple à expliquer, je vais essayé d'être très clair:

J'ai un tableau de div:
Une grande div conteneur dans laquelle il y en a plein d'autre de taille fixe (50px * 50px) en float:left;

J'ai besoin de mettre une div de 200px * 200px au centre de mon conteneur qui sera fixe, je veut dire par la qu'elle ne doit pas bouger de place en fonction de sa position dans le code html. En revanche les div de taille fixe (50px * 50px) doivent elle se mettre autour de celle-ci.

Un dessin vaux mieux qu'une longue explication :
upload/24981-Sanstitre.jpg

mon style css actuel :

		#conteneur{
			width:680px;
			height:600px;
			border:3px #FF0000 solid;
		}
		
		.bookmark{
			width:80px;
			height:80px;
			float:left;
			margin:4px;
			border:3px #006699 solid;
		}
		
		.ggle{
			width:200px;
			height:100px;
			margin-top:150px;
			margin-left: auto; 
  			margin-right: auto;
			border:3px #9933CC solid;
		}


Le code html


<div id="conteneur"> 
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    .....
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    <div class="bookmark">azerty</div>
    <div class="ggle">ma grosse div central</div>
</div>


Par rapport a mon code actuel et à l'image : la div violet devrait forcer les autres div bleu à se décaler autour. Hors dans le cas présent les div bleu passe dessous.
J'insiste sur le fait que la position de la div violet dans le code ne doit pas avoir d'impact graphiquement.
Pourquoi sa me direz vous ? Parce que les div bleu seront déplaçable grâce à du javascript. En revanche je ne veut pas que la violet soit déplaçable.

C'est clair ou pas ?

Merci
Modifié par geekspirit (10 Feb 2010 - 10:31)
Salut,

c'est clair mais c'est également impossible en html + css : pour avoir ton div violet au centre indépendamment de sa position dans le code html il faut :
* soit sortir cet élément du flux (position fixe ou absolue)
* soit sortir les carrés bleus du flux (ce que tu a fait en les faisant flotter).
Or que tu choisisses l'une ou l'autre de ces méthodes les carrés bleus et le div violet ne peuvent plus intéragir (seul le contenu du div est repoussé en bas après les flottants).

Je ne vois qu'une (grosse) couche de JavaScript pour t'en sortir. Smiley murf
Bonjour,

Je ne sais pas si ça répondra à ton besoin ; mais, je verrais bien du positionnement absolu :
#conteneur {
  /* On positionne le conteneur, de façon à ce que l'élément enfant se positionne par rapport à lui */
  position: relative;
}
.ggle {
  position: absolute;
  top: 150px;
  /* Pour centrer horizontalement l'élément positionné absolument */
  margin-left: -100px; /* Marge gauche négative correspondant à la moitié de la largeur */
  left: 50%;
  /* margin-top et margin-right sont inutiles */
}
Merci,

Victor : ta solution centre bien la div mais elle apparait au dessus des autres.

J'utilise jquery, quelqu'un a une idée de comment je peux faire sa avec jquery ?
geekspirit a écrit :
Victor : ta solution centre bien la div mais elle apparait au dessus des autres.

Connais-tu la propriété z-index ? Smiley cligne
'lut Victor,

Victor BRITO a écrit :
Connais-tu la propriété z-index ?
Si j'ai bien compris le problème il ne s'agit pas seulement de bien positionner le DIV violet mais que les carrés bleus se placent autour de lui (ni dessus ni dessous). Smiley cligne


Pour le JavaScript j'aurais bien vu une boucle qui détermine les coordonnées de chaque carré bleu après vérification que ça ne déborde pas sur le DIV violet.
Heyoan à raison le but est que les div bleu se place autour.

En revanche faire un script qui calcul la position des div ne me dérange pas mais mais gérer la réorganisation lors d'un déplacement de l'une d'entre elles, la sa commence a beaucoup se compliquer. D'autan que jquery fait ce genre de chose mais je ne vois pas comment l'utiliser pour sa. J'ai fait plusieurs test mais aucun de fructueux.

Une idée ?

Je suis prêt à prendre une autre librairie si nécessaire...

Merci
Pour être plus précis, les exemples de jquery montre soit la possibilité de déplacer un élément en plein milieu de nul part, soit d'intercaler correctement un élément à la place d'un autre. Mais moi c'est les deux qu'il me faut.

En gros une gestion d'icône comme sur le bureau : on peut déplacer une icône n'importe ou et à la fois on peut intercaler une icône en plein milieu des autres sans qu'elles se chevauches.

Une idée ? Déjà vu sa sur un site ?

Merci
geekspirit a écrit :
Victor : ta solution centre bien la div mais elle apparait au dessus des autres.

Pourtant, c'est ce que décrit ton schéma...

geekspirit a écrit :
Pour être plus précis, les exemples de jquery montre soit la possibilité de déplacer un élément en plein milieu de nul part, soit d'intercaler correctement un élément à la place d'un autre. Mais moi c'est les deux qu'il me faut.

Je n'ai pas vu de fonction ou de plugin gérant un comportement aussi précis (y compris dans jQuery UI).
Tu peux sans doute créer ta propre fonction mais ça demandera beaucoup de boulot et une bonne maitrise de JavaScript.
Modifié par Florent V. (10 Feb 2010 - 13:30)
Sujet clos
Aller à