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

philcharls - site -
Easy

Eefame - site -
Previous Cabinet minister Iain Duncan Smith educated Sky Info the only way for your Government to satisfy its promise of reducing net pacage to the thousands is by leaving behind the European Union.

They said: "Where is the Home Administrative just out appealing? She, a few days ago, created any talk by which the girl stated the woman no more decided together with independence of motion.

“Now she understands very well which will freedom of motion is a foundation reality within the European Union and also the only approach you can finish freedom regarding motion, that is to say typically the open edges with the Eu, is to political election to keep. "

Sadiq Khan, typically the Labour gran of London, uk, uk, has said this controversial Procedure Black Political election poster "reinforces stereotypes".

they said: "My concern could it be just reephasizes stereotypes. Plenty and lots of Londoners, some of the best friends that are white, do not behave this way.

"I’ve obtained aunties and also friends which are Asian plus they don’t appear scared. I am not sure exactly what their motivation is by using those specific images.

best essay - site -
I was reading carefully in the same classification and I just run over this site which I thought that it was great. It looked fascinating and I chose to investigate each substance and I read yours.

deepavali - site -
this is good

Satta Matka - site -
Amazing Satta Matka Site For You

Ajouter votre commentaire