HTML - Sources décoration
Décoration... :Mon passage en version gold, suite à mon résultat au concours de "Décoration de Noël", grâce à vos votes, me permet aujourd'hui d'utiliser les bordures de page et de pouvoir décorer toutes mes pages avec le code saisi dans ces bordures. Dans la version gratuite le code est rentré dans la page d'accueil et le résultat apparaît que dans cette page, il faudrait copier le code dans chaque page, pour décorer tout votre blog.
Donc pour vous montrer le résultat du code expliqué dans cette page, je vous conseille de cliquer sur la miniature ci-contre pour afficher une capture écran de la déco du jour de l'an.
La capture d'écran de la décoration du jour de l'an vous permet de constater le positionnement sur la page d'accueil des blocs "div" contenant les images mais qui pourraient également afficher des textes, listes ou menu.
Les images sur les bordures, grâce à la propriété du langage CSS "position", en lui donnant comme valeur "fixed", nous pouvons faire sortir du flux courant les blocs et les positionner sur l'écran à un endroit bien précis avec les propriétés : top right bottom left.
Pour voir en détail les propriétés de positionnement suivez ce [lien]
Les images sur les bordures, grâce à la propriété du langage CSS "position", en lui donnant comme valeur "fixed", nous pouvons faire sortir du flux courant les blocs et les positionner sur l'écran à un endroit bien précis avec les propriétés : top right bottom left.
Pour voir en détail les propriétés de positionnement suivez ce [lien]
Dans le HTML du composeur éditeur d'article, il faut insérer le code suivant pour les 4 angles de la page affichée dans votre navigateur Internet.
Angle gauche en haut
Angle gauche en bas
Angle droit en haut
Angle droit en bas
Angle gauche en haut
<DIV style="LEFT: 1px; POSITION: fixed; TOP: 1px; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804722_201004154952920.gif" border=0>
</DIV>
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804722_201004154952920.gif" border=0>
</DIV>
Angle gauche en bas
<DIV style="LEFT:1px; BOTTOM: 1px; POSITION: fixed; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804724_201004154953979.gif" border=0 >
</DIV>
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804724_201004154953979.gif" border=0 >
</DIV>
Angle droit en haut
<DIV style="RIGHT: 1px; POSITION: fixed; TOP: 1px; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_806483_201004150158337.gif" border=0>
</DIV>
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_806483_201004150158337.gif" border=0>
</DIV>
Angle droit en bas
<DIV style="RIGHT: 1px; BOTTOM: 1px; POSITION: fixed; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_806488_201004150159804.gif" border=0>
</DIV>
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_806488_201004150159804.gif" border=0>
</DIV>
Pour les 2 images de 3 boules sur la bordure gauche "left", elles seront décalées par rapport au haut "top" de façon à se suivre et ne faire qu'une image.
<DIV style="LEFT: 5px; POSITION: fixed; TOP: 100px; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border=0>
</DIV>
<DIV style="LEFT: 5px; POSITION: fixed; TOP: 250px; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border=0>
</DIV>
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border=0>
</DIV>
<DIV style="LEFT: 5px; POSITION: fixed; TOP: 250px; BACKGROUND-COLOR: transparent">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border=0>
</DIV>
Les 3 ballons de droite avec "Bonne Année" seront positionnés par rapport à la bordure droite "right" et le haut "top".
<DIV style="right: 50px; POSITION: fixed; TOP: 50px; BACKGROUND-COLOR: transparent"><IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_835807_201004153558306.gif">
</DIV>
</DIV>
Le lanceur de feu d'artifice en bas à droite, un peu caché par la déco de l'angle, sera positionné par rapport à la bordure droite "right" et le bas "bottom".
<div style="right: 15px; bottom: 30px; position: fixed;"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835825_201004153702575.gif"></div>
src="https://static.blog4ever.com/2006/01/490/artimage_490_835825_201004153702575.gif"></div>
Ci-dessous le code complet des images qui ne défileront pas, à placer en début de la page que l'on souhaite décorer, soit comme la page actuelle ou dans votre page d'accueil.
<!-- angle gauche en haut -->
<div style="left: 1px; position: fixed; top: 1px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804722_201004154952920.gif" border="0"></div>
<!-- angle gauche en bas -->
<div style="left: 1px; bottom: 1px; position: fixed; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804724_201004154953979.gif" border="0"></div>
<!-- angle droite en haut -->
<div style="right: 1px; position: fixed; top: 1px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_806483_201004150158337.gif"></div>
<!-- angle droit en bas -->
<div style="right: 1px; bottom: 1px; position: fixed; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_806488_201004150159804.gif"></div>
<!-- bordure gauche les boules -->
<div style="left: 5px; position: fixed; top: 100px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border="0"></div>
<div style="left: 5px; position: fixed; top: 250px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border="0"></div>
<!-- bordure droite les ballons -->
<div style="right: 50px; position: fixed; top: 50px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_835807_201004153558306.gif"></div>
<!-- feu artifice bas à droite -->
<div style="right: 15px; bottom: 30px; position: fixed;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_835825_201004153702575.gif"></div>
<div style="left: 1px; position: fixed; top: 1px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804722_201004154952920.gif" border="0"></div>
<!-- angle gauche en bas -->
<div style="left: 1px; bottom: 1px; position: fixed; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804724_201004154953979.gif" border="0"></div>
<!-- angle droite en haut -->
<div style="right: 1px; position: fixed; top: 1px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_806483_201004150158337.gif"></div>
<!-- angle droit en bas -->
<div style="right: 1px; bottom: 1px; position: fixed; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_806488_201004150159804.gif"></div>
<!-- bordure gauche les boules -->
<div style="left: 5px; position: fixed; top: 100px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border="0"></div>
<div style="left: 5px; position: fixed; top: 250px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_804666_201004154911673.gif" border="0"></div>
<!-- bordure droite les ballons -->
<div style="right: 50px; position: fixed; top: 50px; background-color: transparent;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_835807_201004153558306.gif"></div>
<!-- feu artifice bas à droite -->
<div style="right: 15px; bottom: 30px; position: fixed;">
<img src="https://static.blog4ever.com/2006/01/490/artimage_490_835825_201004153702575.gif"></div>
HTML - blocs avec des images
Les blocs s'afficheront à l'emplacement où ils sont insérés dans le code source HTML avec le style du "div", mis directement dans la balise style="...." ou class="....", si celui-ci a une "class" dans la feuille de style.
Les trois premières images en début de page sont insérées avant le texte mis en évidence par les balises <H2> et </H2>. Ces images sont mises en "div" centré et les images à l'intérieur avec des espacements horizontaux "hspace" et verticaux "vspace"précisés dans le style direct.
Pour les trois images suivantes, même principe, ells peuvent être placées ensemble ou séparément.
Les trois premières images en début de page sont insérées avant le texte mis en évidence par les balises <H2> et </H2>. Ces images sont mises en "div" centré et les images à l'intérieur avec des espacements horizontaux "hspace" et verticaux "vspace"précisés dans le style direct.
<div align="center"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835787_201004153551105.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835796_201004153554599.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835784_201004153550177.gif"
border="0" hspace="10" vspace="5">
</div>
src="https://static.blog4ever.com/2006/01/490/artimage_490_835787_201004153551105.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835796_201004153554599.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835784_201004153550177.gif"
border="0" hspace="10" vspace="5">
</div>
Pour les trois images suivantes, même principe, ells peuvent être placées ensemble ou séparément.
<div style="background-color: transparent;" align="center"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835791_201004153552327.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835818_201004153701142.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835790_201004155135306.gif"
border="0" hspace="10" vspace="5"></div>
src="https://static.blog4ever.com/2006/01/490/artimage_490_835791_201004153552327.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835818_201004153701142.gif"
border="0" hspace="10" vspace="5"><img
src="https://static.blog4ever.com/2006/01/490/artimage_490_835790_201004155135306.gif"
border="0" hspace="10" vspace="5"></div>
Voilà mes secrets de la décoration de mes pages d'accueil de la période des fêtes, pour Noël c'était le même système avec quelques images différentes.
Pour l'image du fond de page voir mon article sur la transparence :
CSS - Modifications Transparence
Si vous ne connaissiez pas mon Bric à Brac à ce moment
suivez ce lien Mes Accueils
Si vous ne connaissiez pas mon Bric à Brac à ce moment
suivez ce lien Mes Accueils
