[css] centrer une série de blocs alignés

centrer une série de blocs alignés [css] - HTML/CSS - Programmation

Marsh Posté le 20-06-2009 à 00:05:19    

Bonjour, j'ai une question de débutant en css...
 
J'ai ça
http://img193.imageshack.us/img193/8562/sanstitredbv.jpg
 
Avec le code html :

Code :
  1. <div id="espace_reponse">
  2. <div id="lettre_1"></div><div id="lettre_2"></div><div id="lettre_3"></div><div id="lettre_4"></div>
  3. <br class="clear" />
  4. </div>


 
et le css

Code :
  1. .clear{
  2. clear: both;
  3. visibility: hidden;
  4. }
  5. #espace_reponse{
  6. border: 1px solid black;
  7. margin-top: 50px;
  8. }
  9. #espace_reponse div{
  10. border: 1px solid black;
  11. float: left;
  12. width: 30px;
  13. height: 30px;
  14. margin: 10px;
  15. }


 
et ce que je voudrais c'est que le cadre extérieur ait une largeur adaptée à son contenu (les 4 cases), et qu'il soit centré sur la page.
Je peux lui donner la largeur voulue en le passant en float: left (mais c'est bof je pense) mais là le margin-left et margin-right: auto ne centrent plus le cadre.
Ou je peux lui donner une largeur à la main et là je peux centrer avec les margin auto mais la largeur n'est pas adaptée si je change le nombre de cases ou leur taille...
 
Comment je faiiiiiis  [:psywalk]  
 
Si c'est une question trop débile y'a moyen de m'orienter vers un bon tutoriel/site sur le css et ce genre de problèmes ? J'ai l'impression de programmer comme un porc et j'en chie dès que je dois faire 3 trucs en css, je dois louper des trucs :o
 
Merci.

Reply

Marsh Posté le 20-06-2009 à 00:05:19   

Reply

Marsh Posté le 20-06-2009 à 02:06:32    

Ce n'est pas le conteneur qui doit être en float:left mais plutot les cases que tu veux aligner.
 
Style de ton conteneur :
 
margin-left:auto; (Pour centrer ton conteneur)
margin-left:auto;
(ne fixe pas de width pour qu'il s'adapte à son contenu)
 
Style de tes cases :
 
float:left;
width:30px;
 
A la fin, casse le float avec un <div style="clear:both;"></div>


Message édité par Pascal le nain le 20-06-2009 à 02:10:35
Reply

Marsh Posté le 20-06-2009 à 09:15:32    

Ca ne répond pas à sa question.
 
Il veut que le cadre principale s'adapte à la largeur des 4 petits et soit centré dans la page.
A ma connaissance, ce n'est pas possible "facilement".
 
On peut évidemment utiliser une table (mais bon...)
On peut aussi tester la largeur des divs en JS et construire la largeur du div conteneur (le tout avec un JS complêtement externalisé évidemment).
Mais une solution uniquement avec CSS + div, je n'y crois pas bcp...
 


---------------
Expert en expertises
Reply

Marsh Posté le 20-06-2009 à 11:04:00    

Ah bon ?!
Voilà pourquoi j'aime pas le css :o Tableaux, me voilà ! [:uriel]
 
Merci bien :hello:

Reply

Marsh Posté le 20-06-2009 à 14:12:10    


 
Non. Les tableaux dans ce cas, c'est le mal. :o
 
Un tableau, ca sert à représenter un tableau. Point.
 
Ensuite, si ce que tu veux faire n'est pas réalisable avec des div + css, ben tu externalise du JS dans le pire des cas, mais tu vas pas niquer la sémantique de ta page.


---------------
Expert en expertises
Reply

Marsh Posté le 20-06-2009 à 20:14:50    

Ca me semblait encore pire de devoir utiliser du JS mais bon, je vais voir de ce côté.
 
Ca me dépasse quand même que ce soit pas possible, c'est pourtant pas énorme ce que je cherche à faire, quelle daube le css :o

Reply

Marsh Posté le 21-06-2009 à 06:31:31    

En fait, ce qui n'est pas possible en CSS, c'est la plupart du temps des trucs qui sert à rien dans un vrai site construit correctement...
Après, c'est vrai que si tu veux faire du freestyle, faudra utiliser des méthode moins orthodoxes du genre js ou même php ;)

Reply

Marsh Posté le 22-06-2009 à 13:11:58    

Pascal le nain a écrit :

En fait, ce qui n'est pas possible en CSS, c'est la plupart du temps des trucs qui sert à rien dans un vrai site construit correctement...
Après, c'est vrai que si tu veux faire du freestyle, faudra utiliser des méthode moins orthodoxes du genre js ou même php ;)

Mais ce que je voulais faire c'est pas exactement du genre "funky qui sert à rien" pourtant [:cerveau totoz]

Reply

Marsh Posté le 22-06-2009 à 13:22:56    

Ajouter un position: absolute; (ou n'importe quoi d'autre qui te ferais sortir du flux) corrige ton problème, mais peut potentiellement foutre en l'air ce que tu as autour.

Reply

Sujets relatifs:

Leave a Replay

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