[Problème] mettre les blocs à la même hauteur

[tataye]

bonjour,

quelle est la technique pour mettre deux blocs côté à côte à la même hauteur selon le contenu.
j'ai récupéré un design à manipuler (artisteer) : il y a des blocs mais ils prennent l'espace du contenu et cela fait moche.

http://www.xtrem-paint.fr/17/

est ce que je pourrais m'inspirer d'un autre template ?
une idée ?

[Grand Schtroumpf]

Re : mettre les blocs à la même hauteur

Bonjour,
une solution est de mettre autour une div dont la hauteur va s'ajuster au plus haut des trois modules et de lui mettre une image de fond qui couvre les 3 emplacements : les div n'auraont pas la même hauteur, mais elles en auront l'air.

[tataye]

Re : mettre les blocs à la même hauteur

oui, mais ...
comment fait elle pour prendre la hauteur du bloc le plus haut ?

parce que j'ai de l'ombrage et tout ...
toi, tu proposes de faire une div a avec unes seule image de fond, c'est cela ?
mais les blocs 1.2 et 3 vont rester à leur taille

[ghazal]

Re : mettre les blocs à la même hauteur

@tataye
Salut,
je remarque que tu poses souvent des questions qui pourraient se régler avec du JavaScript.
Dans la plupart des cas, c'est un peu compliqué à expliquer.
Là, ca peut se régler facilement sans trop de complications.

1- tu crées un fichier en .js que tu places qq part dans le dossier de ton template. Nomme-le equalheights.js, par ex.

var Equalizer = new Class({
initialize: function(elements,stop,prevent) {
this.elements = $$(elements);
},
equalize: function(hw) {
if(!hw) { hw = 'height'; }
var max = 0,
prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
offset = 'offset' + hw.capitalize();
this.elements.each(function(element,i) {
var calc = element[offset];
if(calc > max) { max = calc; }
},this);
this.elements.each(function(element,i) {
element.setStyle(prop,max - (element[offset] - element.getStyle(hw).replace('px','')));
});
return max;
}
});

2 - indique le chemin dans la head de index.php, en dessous des autres fichiers JS .
EX :

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/ton_template/javascript/equalheights.js"></script>

3 - dans le site que tu montres, chaque div block (des modules du bas) est affectée de la class suivante :
.xp-layout-cell

4 - juste en dessus de </head>, donc à la fin de head
rajoute :

<script type="text/javascript" charset="utf-8">
window.addEvent('domready',function() {

var columinator = new Equalizer('.xp-layout-cell').equalize('height');
});
</script>

Magiquement(sic) tes trois modules devraient s'aligner sur le module le plus long.
Demo : http://jsfiddle.net/ghazal/Je7YU/
Une condition néanmoins, il faut que au moins un module avec cette class soit présent sur toutes les pages de ton site.
PS : je ne suis pas auteur du code.

Hope it helps.

[Grand Schtroumpf]

Re : mettre les blocs à la même hauteur

Re,
ça doit ressembler à ça :
<div class="AvecLeDessinDuHauf"></div>
<div class="ConteneurAvecUneTrancheDeDessinEnRepeatY">
<div class="Emplacement1"> ... </div>
<div class="Emplacement2"> ... </div>
<div class="Emplacement3"> ... </div>
</div>
<div class="AvecLeDessinDuBas"></div>

mais les blocs 1.2 et 3 vont rester à leur taille

Oui mais la div.conteneur... va prendre la hauteur du module le plus haut ; et comme les images sont portées par le conteneur, c'est gagné !

[Grand Schtroumpf]

Re : mettre les blocs à la même hauteur

Re,
article assez complet sur le sujet :

http://www.alsacreations.com/astuce/lire/15-comment-faire-des-colonnes-de-mme-hauteur.html

[tataye]

Re : mettre les blocs à la même hauteur

@tataye
Salut,
je remarque que tu poses souvent des questions qui pourraient se régler avec du JavaScript.
Dans la plupart des cas, c'est un peu compliqué à expliquer.
Là, ca peut se régler facilement sans trop de complications.

1- tu crées un fichier en .js que tu places qq part dans le dossier de ton template. Nomme-le equalheights.js, par ex.

2 - indique le chemin dans la head de index.php, en dessous des autres fichiers JS .
EX :


3 - dans le site que tu montres, chaque div block (des modules du bas) est affectée de la class suivante :
.xp-layout-cell

4 - juste en dessus de </head>, donc à la fin de head
rajoute :

Magiquement(sic) tes trois modules devraient s'aligner sur le module le plus long.
Demo : http://jsfiddle.net/ghazal/Je7YU/
Une condition néanmoins, il faut que au moins un module avec cette class soit présent sur toutes les pages de ton site.
PS : je ne suis pas auteur du code.

Hope it helps.

j'ai fait tout comme t'as dit et cela ne fonctionne pas.
j'ai donc appliqué à une autre classe : .xp-box-body
et cela me donne le résultat : tous les modules prennnent une min height de 1804 px
ce qui démontre que cela fonctionne, mais que je n'applique pas la bonne class

j'y retourne

et si j'y arrive, promis, j'apprends le JS

[tataye]

Re : mettre les blocs à la même hauteur

j'y comprends rien car firebug m'indique :
<div class="xp-layout-cell xp-layout-sidebar-bg" style="width: 33%; min-height: 1409px;">
mais ne l'applique pas

[tataye]

Re : mettre les blocs à la même hauteur

@Grand Schtroumpf :
ta solution pourrait sembler idéale, et je t'en remercie.
mais comme on m'a refilé le boulot sur un template artisteer, il y a plein de layout etc
danc pas d'image du haut, du bas
en fait c'est censé s'adapter aussi en largeur (ça le fait très bien d'ailleurs)

bon laissez tomber, le client ruse en choisissant une autre option de présentation
mais je continue à tester la solution de ghazal

[ghazal]

Re : mettre les blocs à la même hauteur

Salut,
alors je t'ai certainement indiqué la mauvaise class.
Regarde sur l'exemple de jsfiddle à quels tags sont appliqués le JS. (sauf que jsfiddle est affreusement lent aujourd'hui.)

NB : les blocks de ma solution sont en float: left.