28172 sujets

CSS et mise en forme, CSS3

Bonjour Bonjour,

Je suis sur l'intégration d'un wordpress, jusque là rien de bien compliquer...

Il s'agit de la création d'un template 3 colonnes, mais chaque colonne dispose d'une image différente.

upload/47894-Capturede7.png

Rien de très grandiose mais sur l'ensemble ça donne un petit cachet.

Le problème c'est que mes colonnes ne sont pas de la même hauteur !

J'ai donc passé en revu les templates Alsacreation avec colonne factice, mais je me suis vite confronté à un problème, celui de la solution avec une trame de fond.

Effectivement le templates sera responsive, est si je mets une image de fond et que je déplace mes colonnes l'image de répond pas. Je dois donc mettre une images par colonne... Est la la solution de colonne factice ne marche pas... Ou alors il y a quelque chose qui m'échappe...

J'aimerais savoir si vous connaissiez une petite astuce en Javascript qui me permettrai de régler le problème...

Merci d'avance. Smiley cligne
Bonjour.

La déclaration display: table-cell appliquée à tes trois colonnes leur donnera la même hauteur, en l'espèce, celle de la colonne comportant le plus de contenu (en hauteur).

Mais je crois qu'elle n'est pas supportée par les versions d'IE antérieures à 9.
tu as aussi les multiples background qui te permettront d'afficher trois images de fonds.
une left, une en right et l'autre en center pour les position et repeat en hauteur.

Reste que l'on ne sait pas ce que tu veut dire par "responsive" ?
1) largeur de colonnes exprimées en pourcentages ?
2) nbre de colonnes qui se réduisent et qui passent les unes sous les autres ?
3) un mixe des deux ?

Cdt,
GC

EDIT, display:table est compatible avec IE8 Smiley smile , ++
Modifié par gc-nomade (21 Jan 2013 - 20:42)
thierry a écrit :
Bonjour.

La déclaration display: table-cell appliquée à tes trois colonnes leur donnera la même hauteur, en l'espèce, celle de la colonne comportant le plus de contenu (en hauteur).

Mais je crois qu'elle n'est pas supportée par les versions d'IE antérieures à 9.



Bonjour et merci de votre réponse ! Effectivement j'ai lu ça sur les forums mais malheureusement il reste encore des IE7 ... Mais je pense qu'il s'agira de la solution si je n'arrive pas à en trouver d'autre Smiley smile !
gc-nomade a écrit :
tu as aussi les multiples background qui te permettront d'afficher trois images de fonds.
une left, une en right et l'autre en center pour les position et repeat en hauteur.

Reste que l'on ne sait pas ce que tu veut dire par "responsive" ?
1) largeur de colonnes exprimées en pourcentages ?
2) nbre de colonnes qui se réduisent et qui passent les unes sous les autres ?
3) un mixe des deux ?

Cdt,
GC

EDIT, display:table est compatible avec IE8 Smiley smile , ++


Bonjour Bonjour ! Alors pas responsive, je veux dire que les colonnes sont en pourcentage avec un design qui change en fonction de la taille du support (sidebar qui disparaît sur mobile, footer qui apparaît ailleurs etc...), donc en gros un mixe des deux Smiley cligne !