fastclemmy.com

Article original 24.09.03 - Une question reçue par mail, me permet de faire mon log du jour facilement. La question était de savoir comment réaliser un site comme celui-ci ou comme ma participation au CSSZenGarden avec un défilement horizontal, sans tableau et en XHTML strict.

En fait par défaut, le comportement des navigateurs est de caser les infos dans l'espace visible du navigateur, donc d'éviter de préférence les scrollbars, surtout horizontales !

C'est pourquoi, si on met des <div> avec la même propriété float:left; les premiers se mettront bien les uns à la suite des autres de gauche à droite. Par contre dès qu'un <div> flottant atteindra la limite visible de l'écran, il se placera en-dessous des autres pour éviter justement une scrollbar horizontale.

Il faut donc contraindre d'une manière ou d'une autre le navigateur à le faire, donc à passer par du positionnement absolu (stratégie identique pour les soumissions horizontales du cssZenGarden).

Sur fastclemmy.com, chaque <div> correspondant à un log a un attribut id spécifique ainsi qu'un attribut class qui régit les règles communes à tous les éléments de ce type. Evidemment, la position en x ne peut pas être définie dans la feuille de style étant donné que je créé les blocs dynamiquement à partir de la base de données. J'utilise donc la balise <style> dans le corps de ma page HTML pour fixer la propriété left de chaque bloc. En PHP, dans la boucle d'affichage de mes blocs, j'incrémente simplement un compteur de la largeur d'un bloc + de la distance voulue entre chaque bloc.

Et le tour est joué (et valide !).

Bien sûr, on pourra regretter ce petit écart "philosophique" qui consiste à insérer des informations de présentation (<style="left:1650px;">) dans le fichier HTML, mais c'est le seul moyen que j'ai trouvé pour réussir un design horizontal dynamique.

Mise à jour 25.09.03 - Suite à ce log, vos commentaires par mail ont fait avancé le problème. Tout d'abord, un collègue bloggeur m'a suggéré, étant donné que je ne publie qu'un log par jour, de préremplir ma feuille de style avec les valeurs

#logID1 {position:absolute; width:415px; left:300px;} #logID2 {position:absolute; width:415px; left:750px;} et ce jusqu'à #log31 (dans l'hypothèse où j'écrive 31 logs par mois)

Effectivement ça résoudrait mon problème de séparation contenu dans HTML/présentation dans CSS.

Mais étant donné que ce site est dynamique, une autre idée m'a été envoyée par mail encore meilleure. Tant qu'à générer des informations de présentation dynamiquement, pourquoi ne pas le faire directement dans la CSS plutôt que dans le HTML ?

Pour cela deux méthodes : soit renommer tout simplement ton fichier weblog.css en weblog.php et hop le tour est joué ou alors dire à Apache d'interpréter les .css comme des scripts.

Youpi, un item de plus sur ma ToDo List !

#xhtmlCSS

Vos commentaires

a10 - site -
You’ve written nice post, I am gonna bookmark this page, thanks for info.

color switch - site -
I actually appreciate your own position and I will be sure to come back here.

animal jam - site -
Much informative article, and I really appreciate this info and willing for moreinteresting article like this.

luke daniels tricks central - site -
Here TricksCentral is a place where we will share latest Android Tricks, Windows Tips, iOS apps, Android Apk Downloads and more.

Ajouter votre commentaire