Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

29.04.2009

Modifier la hauteur d'une colonne pour qu'elle "descende"

Depuis l'antiquité, nous sommes sensibles à l'harmonie des temples grecs, maisons carrées, peristyles et autres colonnades. Alors comment supporter que les colonnes de son blog ne fassent pas ce que l'on souhaite ?

C'est que, ce ne sont pas réellement des colonnes, comme on peut en avoir dans un tableau. Dans un modèle, vous avez la division "droite", la division "centre" et la division "gauche". Peu importe que vous ayez deux divisions seulement, ou dans un ordre personnalisé, dans le code vous retrouverez les trois dénominations que j'ai utilisé. Mais en anglais.

La hauteur d'une division est fonction de son contenu, c'est souvent la partie centrale la plus fournie, qui semble entrainer, les autres. Mais c'est une illusion. La division la plus "haute" détermine la hauteur du conteneur (container), qui lui comprend toutes les divisions. Chaque division a une hauteur propre. D'habitude, cela ne se voit pas. Si vous appliquez une couleur, ou un motif de fond, cela vous apparaîtra.

C'était la question de Thierry du blog Citrouille (Cette fois-ci les enfants qui se perdent ici, DOIVENT se retrouver là-bas avec leurs parents, ou tout adulte argenté pourvu qu'il soit bien intentionné). La colonne de gauche n'est pas assez haute à son goût, l'image de fond ne se poursuivant pas jusqu'en bas du conteneur.

 


Comment poursuivre l'arrière-plan de la colonne jusqu'en bas du conteneur ?

On peut tricher, en n'attribuant pas d'arrière-plan à la colonne, mais au conteneur lui-même. On préparera dans ce cas une image qui établira visuellement la différence entre les divisions. Bien sûr, les colonnes ne devront pas avoir d'arrière-plan elles mêmes, pour ne pas masquer l'arrière-plan du conteneur.

Si on veut gérer l'arrière-plan d'un colonne indépendemment, on peut intervenir dans la feuille de style pour spécifier une hauteur, avec "height"

#right {
overflow: hidden;
float: right;
width: 225px;
height: 4012px;
background: #ddb866 url(images/aspire/body-bg.jpg);
color: #000000;
}


On peut aussi "forcer" la hauteur en créant un module de calage

capture_cale.gif

Dans la gestion du contenu des colonnes, on crée un nouvel élément, dont on n'affiche pas le nom.

Cet élément aura pour unique contenu, l'appel d'une image transparente dont on ajustera la hauteur au gré des besoins. Cela permettra aussi de caler en bas de page un élement dans lequel on glissera des crédits et ou un lien pour un retour en haut de page.

Vous pouvez récupérer une image transparente de 1x1 pixel en enregistrant la cible de ce lien (soit dit entre-nous, cliquer sur une image de 1x1, ce n'est déjà pas facile, mais quand elle est transparente...)

L'instruction HTML de l'élément est évidemment à personnaliser en fonction de l'emplacement choisi pour enregistrer l'image sur votre propre blog.

C'est du bricolage, mais c'est peut-être plus facile pour ceux qui hésitent à intervenir dans la feuille de styles.


La maison ne reculant devant aucun sacrifice...

Je me suis appliqué cette dernière recette pour faire descendre la colonne de droite. Cela vous permet aussi de voir certains défauts de mon propre design :-(

Dans de telles circonstances, un outil comme Measure It peut s'avérer très utile.

10:31 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : modifier, colonne, module, hauteur | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

Vous noterez que le calage correspond à la page d'accueil, avec son contenu au 29/04 vers 10:30. Sur cette page, rien ne justifie de tant prolonger la colonne.
Pour que le calage suive le contenu, il vaut mieux envisager un arrière-plan pour le conteneur.

Écrit par : Gee Mee | 29.04.2009

Répondre à ce commentaire

Merci Gee Me :
- pour la sympathique redirection vers le blog Citrouille :-)
- pour la recherche de résolution de ce fichu problème d'ajustement de colonne à la hauteur du conteneur.

Je viens de trouver une troisième solution bricolée :
- J'attribue la même image background à ma colonne de gauche et à au conteneur, avec uniquement un repeat-y
- Pour le conteneur, je positionne également l'image à XXX pixels sur l'axe y, XXX pixels étant la hauteur de ma bannière, afin que l'image background "répétée y" du conteneur démarre au même endroit que l'image background "répétée y" de ma colonne de gauche.

Ainsi, l'image background de la colonne de gauche se superpose exactement sur l'image background identique du conteneur... et quand ma colonne de gauche va s'interrompre faute de contenu, c'est l'image background du conteneur qui va prendre le relais, sans que l'œil ne distingue qu'on vient de reculer d'un plan.

;-)

Thierry

Écrit par : Thierry | 29.04.2009

Répondre à ce commentaire

» Thierry : C'est moi qui vous remercie.
Nous en avons parlé ensemble, pour intéressante qu'elle soit, votre "troisième voie" à vous n'est pas strictement indispensable ;-)
Mais que le premier bricoleur de code n'ayant pas fait d'erreur de raisonnement me jette la première pierre !

Écrit par : Gee Mee | 01.05.2009

Répondre à ce commentaire

Les commentaires sont fermés.