Bonjour,

J'ai installé sur l'en-tête de mon forum un tableau avec trois colonnes en effet zoom, en utilisant ce tutorial : http://www.css-actif.com/t12278-trois-colonnes-avec-effet-zoom

Jusqu'à la, rien à dire, tout était parfait.

L'envie nous a pris, à un de mes graphistes et moi, d'ajouter une colonne à ce tableau. Ajouter une colonne a été une chose plutôt simple, j'ai juste rajouté une ligne dans la fiche CSS, et le tour était joué.
Le problème est le suivant : la dernière colonne s'est retrouvée en dessous du tableau, et non pas à côté.

J'ai donc essayé de rajouter une nouvelle colonne (donc la 5ème colonne du tableau), et encore une fois la dernière colonne de la première ligne s'est retrouvé en dessous du tableau. J'ai donc actuellement un tableau à 2 lignes : une premières à 3 colonnes, une seconde à 2 colonnes.

Voici ce que j'ai modifié dans le CSS

Code:

.colgauche .cssactif_pa_header {background-color: #01c6d9;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #d9015d;}/* Colonne du centre, couleur du header */
.colcentre2 .cssactif_pa_header {background-color: #ffe81c;}/* Colonne du centre 2, couleur du header */
.colcentre3 .cssactif_pa_header {background-color: #ffe81c;}/* Colonne du centre 3, couleur du header */
.coldroite .cssactif_pa_header {background-color: #7fbf33;  } /* Colonne de droite, couleur du header */

J'ai ajouté les colonnes "colcentre2" et "colcentre3".


Dans le HTML, à la fin du "bloc" de chaque colonne ce trouve la balise suivante "div class="cssactif_pa_colonne colcentre">" (ici, à la fin du premier bloc, annonçant le bloc suivant).

J'ai donc rajouté à deux endroits :
- à la fin du bloc 2 :

Code:

<div class="cssactif_pa_colonne colcentre2">

- à la fin du bloc 3 :

Code:

<div class="cssactif_pa_colonne colcentre3">

Je souhaiterai savoir s'il existe une solution à ce problème, ou si le tableau n'est conçu que pour avoir 3 colonnes par ligne.

Merci.

|Al3x| a écrit:

Ajouter une colonne a été une chose plutôt simple, j'ai juste rajouté une ligne dans la fiche CSS, et le tour était joué.

Le problème est le suivant : la dernière colonne s'est retrouvée en dessous du tableau, et non pas à côté.

J'ai donc essayé de rajouter une nouvelle colonne (donc la 5ème colonne du tableau), et encore une fois la dernière colonne de la première ligne s'est retrouvé en dessous du tableau. J'ai donc actuellement un tableau à 2 lignes : une premières à 3 colonnes, une seconde à 2 colonnes.

Heuuuuu, en gros ça donne :

• Tu essaies de rajouter une colonne
  
• Ca marche pas, elle se crée en dessous de la ligne
  
• Pour "corriger" ça tu te dis "je vais créer une colonne de plus"
  
• Ca re-marche pas, tu te retrouve avec 2 colonnes en dessous de la ligne

Stop ! Arrête d'essayer d'ajouter des colonnes, ça marchera pas plus en forçant bêtement (si ça rentre pas, c'est que ça rentre pas)

|Al3x| a écrit:

Je souhaiterai savoir s'il existe une solution à ce problème, ou si le tableau n'est conçu que pour avoir 3 colonnes par ligne.

Merci.

Alooooors :

• Oui il existe une solution à ce "problème" (qui n'en est pas un en fait)
  
• Oui ce tableau est conçu pour avoir 3 colonnes par ligne, c'est d'ailleurs le titre du code à copier-coller : "Trois colonnes avec effet Zoom"

Donc, il faut remanier un peu le code de base.

En fait, si tu regarde bien le CSS, tu as :

Code:

.cssactif_pa_colonne { /* Style général des colonnes */
    float: left; /* Place les colonnes un à côté de l'autre */
    width: 33%; /* Donne la grandeur des colonnes */
    ...
}

Tout réside dans le width: 33%. C'est la largeur d'une colonne.
En gros ça veut dire que une colonne = 33% = 1/3 de la largeur max.
Donc il ne peut y avoir que 3 colonnes par ligne (pour le moment en tout cas).

Pour avoir une colonne de plus, pourquoi ne pas essayer de modifier cette valeur ?
Pour 4 colonnes par ligne, il faut que chaque colonne fasse 1/4 de la largeur, soit 20%. Quid de width: 25%; par exemple ?

Je ne sais pas si ça réalise complètement l'effet désiré (j'ai pas testé à vrai dire), mais au feeling je pense que c'est déjà une bonne piste (quitte à améliorer le rendu derrière, vu qu'il y aura peut-être des question de marge toussa).

Ca marche impeccable !
Merci mon sauveur, je sacrifiera un mouton en ton honneur ce soir.

Pour ma défense, j'débute, et je préfère pas bidouiller à tout, parce qu'après c'est plus difficile pour remettre en ordre. x)

Vous pouvez donc locker ce topic, le détruire, ou même le brûler.

Mais non, on va pas le brûler... on va même en garder une trace. Des fois qu'un autre petit rigolo voudrait faire 5 colonnes. a^a

Et puis, on va tranquillement l'archiver.
Et hop.

A bientôt, alx3xb58ds !