Eternel problème: Centrage dynamique de blocs

Eternel problème: Centrage dynamique de blocs - HTML/CSS - Programmation

Marsh Posté le 14-04-2004 à 17:56:40    

Bonjour,
 
J'ai un problème de centrage avec les Div .
Après avoir fais pas mal de recherche sur le forum (et apris pas mal de trucs), j'ai l'impression que ce genre de prob. est récurent mais je n'ai pas vu de réponses.
 
Je m'explique :  
Je voudrais avoir de 1 à plusieurs blocs (contenants images text etc...) centrés horizontalement sur une page sachant que le nombre de bloc varie dynamiquement.
 
Si j'utilise float pour les blocs c'est bien quand il y à pas mal de blocs (en plus ça va à la ligne automatiquement) mais si il y en à 1 ou 2 ils sont centrés du coté du float et pas horizontalement (pourquoi il n'y à pas un float center  :fou: !!!!)
 
j'ai essayé d'utilser des div inline en mettant les margin en auto  
<div style="text-align:center;">
  <div style="margin-left:auto; margin-right:auto; display:inline; width:200px;>
 images text etc...
  </div>
  <div style="margin-left:auto; margin-right:auto; display:inline; width:200px;>
 images text etc...
  </div>    
</div>
mais le problème c'est que le width ne marche pas (puisque width ne marche pas avec les éléments en ligne ...)
 
Bon donc je bloque ... (a part faire de la marmelade de tableau ou mettre plein de conditions dans mon code en fonction du nombre de bloc... mais à ce moment là autant utiliser un tableau ...)
 
Quelqu'un aurait il une idée ???
 
Sinon, tous les tuyaux pour réussir à aligner verticalement et horizontalement sont les bienvenus (j'ai l'impression que c'est le principal truc que les div ne peuvent pas faire par rapport aux tableaux ...)
 
Merci d'avance  :)  
 
 
 
 
 
 

Reply

Marsh Posté le 14-04-2004 à 17:56:40   

Reply

Marsh Posté le 14-04-2004 à 19:55:48    

ya un chapitre complet sur le sujet sur openweb.eu.org ou dans la  FAQ Xhtml/css de ce forum
 
http://openweb.eu.org/articles/initiation_centrage/
http://forum.hardware.fr/forum2.ph [...] 10#t229960
 


Message édité par Mjules le 14-04-2004 à 19:57:34

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 15-04-2004 à 09:47:21    

Mjules a écrit :

ya un chapitre complet sur le sujet sur openweb.eu.org ou dans la  FAQ Xhtml/css de ce forum
 
http://openweb.eu.org/articles/initiation_centrage/
http://forum.hardware.fr/forum2.ph [...] 10#t229960
 
 


 
Merci je vais de suite lire ça !
 
FX :)

Reply

Marsh Posté le 15-04-2004 à 11:07:34    

http://forum.hardware.fr/forum2.ph [...] 10#t229960
 
j'en ai révé, gm_superstar l'a fais !!!
 
Bon, super lien, pour ceux qui conaissent pas précipitez vous pour aller lire sa FAQ  
 

Reply

Marsh Posté le 15-04-2004 à 15:54:57    

Merci, grace à tous ça, j'ai réussi ...
 
En gros, pour avoir 2 blocs centrès j'utilise deux blocs comme cela:

Citation :


<div style="float:left; width:50%;">
  <div style=" text-align:center;"><!--- centrage pour IE --->
 <div id="mon_bloc_a_centrer" style="margin-left:auto; margin-right:auto;"><!--- centrage pour mozilla --->
          <!--- du contenu  ... --->  
   <img src="">
   <div style="width:50px">qsdfqsdfqsdqsd sdf fsdf</div>    
 </div>
  </div>
</div>


pour en avoir 3 je change le width à 33%, 4 je le met à 25% etc ...
 
Pour faire ça dynamiquement j'utilise un peu de code: en gros je récupére le nombre de bloc (résultat de ma requête) que je divise par le nombre de bloc par ligne que je veux (fixe), ca me donne le nombre de ligne.
Pour les n-1 premières lignes je met un width=(100/nombre_de_bloc_par_ligne)%, pour ma dernière ligne je met width=(100/nombre_de_bloc_restant)%.
 
Résultat tous mes blocs sont centrès quelque soit le nombre de blocs ...
 
En + le code (source + html resultant) est carrèment plus clean que si j'avais fais ça avec des tableaux !!! je vais finir par aimer les Div  :love: ...
 
 
 
 
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed