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.

Happy New Year 2018 Greetings - site -
For this Happy New Year 2018 let us dream big and be annoyed with the simple blessings that activity has able us with. Let us accomplish boss affairs for the advancing approaching and plan acute to accomplish them. Let us not avoid the little blissful moments as they may accomplish up our day. Let us accomplish every moment memorable and aces of living. Let us bang alpha the New Year with a blithesome affection and bright apperception that will let us adjudge the appropriate affair to do. Let us airing appear the doors of arete this year.

Happy New Year 2018 Wallpapers - site -
New beginnings, beginning starts, reaffirmations of adulation and promises for a brighter approaching all appear to apperception as we ring in a New Year. There are the superficial, yet purposeful, promises we accomplish to ourselves. 2018 Best new year unique messages greeting cards wishes for your family friends and loved ones. We boldness to get in shape, lose weight, advance career paths, and the like. Then, there are the ardent promises we accomplish to others, whether aloud or in our minds. We wish to affliction more, accurate adulation more, about-face bad animosity in old relationships or seek out new admiring relationships. We try our actual best to put these desires into words. Though New Years can be a time of anniversary and cheer, there are abounding humans who are adverse difficult circumstances. They may be entering this time of year with alarm or anxiety. If that’s the case for anyone in your amphitheater of accompany or family, you can ability out and be an advance by adulatory them the best for the accessible year.

MathCad Project Help - site -
Great Information,it has lot for stuff which is informative.I will share the post with my friends.

matlab tutoring - site -
This site and the resources you provide is really nice keep it up.

Ajouter votre commentaire