Accueil  > [Imbrication Element Relatif dans un Absolu]

Ici une boîte flottante à droite {$.sidebar$}. La classe de l'élément est définie dans la feuille de style par une position relative à partir du haut de la page (top mesuré en pixels) position: relative;
float: right;
font-weight: bold;
padding: 1em;
width: 275px;
Note ou disclaimer : Les exemples présentés ici n'ont aucune intention de détourner les droits de l'excellent ouvrage DHTML et CSS de Jason CranFord et Teague paru aux Editions Peachit. L'ouvrage regorge de tas d'astuces qu'il me serait difficile de recopier sans atteinte aux droits d'auteurs. Tous les codes source de l'ouvrage sont  intégralement en ligne (fichiers zip) sur le site de l'éditeur : http://www.informit.fr (rechercher l'ouvrage dans le moteur de recherche). Les liens de référence présentés sur le weblog proviennent directement de ces fichiers zip et ne m'appartiennent pas. Les commentaires ajoutés au code source le sont à titre personnel et font partie d'un auto-apprentissage. Ils ne sauraient être considérés comme dénués d'erreurs d'interprétation. Le site officiel des auteurs est aussi recommandé pour son actualité et les correctifs qui s'imposent au fil du calendrier. xtof

Imbrication d'un élément relatif dans un élément absolu. (Continuation du "Lego" CityDesk ;-))

Même avec un éditeur sophistiqué de CSS comme TopStyle, le placement des boîtes m'a toujours semblé bien mystérieux... Et pourtant, les CSS sont vraiment puissantes pour bousculer rapidement une mise en page des éléments constituants la page. Lorsqu'un élément absolu est imbriqué dans un élément relatif, il utilisera l'angle supérieur gauche de son parent comme origine. Et un élément relatif placé dans un élément absolu se déplace avec l'élément absolu. (Rassurez-vous, j'ai aussi du mal parfois...sans dessin ! mais on peut y arriver en calquant les exemples ci-après).

Deux Liens de référence pour cet exercice (visite recommandée pour mieux comprendre après)

1. Type de Positionnement Absolu et Relatif (exemple à déshabiller pour voir la Feuille de Style et capter la nuance entre Absolu et Relatif...)
2. Le lien de référence de l'exercice par Lewis Caroll et Jason Cranford Teague. (Coordonnées sur le Centre de Ressources CSS CityDesk)

Intentions de l'exercice :

• Approndir la maîtrise de positionnement des boîtes, à savoir positionner un élément dans la fenêtre du navigateur à un endroit maîtrisé (pas essayé sur Mac) ?
• Tentative d'intégration du Menu de Mike (non terminé*){$.BarreMenuHorMike$} (voir exercice précédent) dans un masque plus joli (comme un fond noir, avec police qui ressort et sidebar à droite) 
• Positionner précisément la Sidebar à droite en y incluant une image de lapin par exemple. (plus tard dans la Variable on pourra appeler une table des matières autogénérée par un CityScript recensant tous les articles publiés dans un dossier par exemple)

Ici l'élément absolu défini dans la feuille de style avec une position:absolute, top et left mis à zéro pixel + définition de la taille de la police. Si vous regardez la CSS, vous retrouverez...

position: absolute;
left: 100px;
border-style: none none none solid;
border-width: 0px 0px 0px 1px;
border-color: #FFB415;
padding: 10px;

Attention au contrôle de la taille de la page (ne pas hésiter à mettre plein de balises <br> en bas de page si la side bar venait à être longue (pour forcer une coupure de la page...)

Note de paramétrage CityDesk :

• La variable {$.body$} constitue ici le corps de l'article appelé par une Feuille de Style élément absolu
• Attention à ne pas entrer de données textes dans la boîte Sidebar sous peine de non validation du code.
• 1 variable dans la {$.Sidebar$} : {$.VariableLapin$} = le texte valide HTML appelant également une autre variable appelée ici  {$.ImageLapin$}. (Les noms donnés ici le sont uniquement à titre d'exemple et sont interchangeables. Méfiance néanmoins à prendre des noms de variable faciles à mémoriser. (Pour ne pas m'emmêler les pédales, je risque ici d'abuser de prénoms ou d'animaux !)

A faire plus tard en attendant un designer compétent sur la couleur et la mise en page ....:

• Jouer avec le nuancier de la Feuille de Style pour rechercher une meilleure lisibilité des hyperliens (à cette heure ils demeurent difficilement perceptibles, mais la Feuille de Style peut tout chambouler à tout moment).
• *Terminer une Belle Barre de Menu Horizontale pour l'intégrer en Variable dans le gabarit.  Boire une Bière avec Mike et penser à  le remercier ;-) . Lui demander son avis sur le risque d'intégrer un module de conversation ou de forum.
  

Toutes les marques évoquées sur cette page sont la propriété de leurs auteurs. (La citation de la marque Lego n'est qu'anecdotique. CityDesk n'a pas fusionné avec Lego et reste bien une marque de FogCreek Software à NYC). Cette page pesant plus de 8ko est bien trop grasse pour participer au défi http://www.the5k.org/