HTML - Présentation Accueil St Valentin

 

 HTML - Présentation 
 HTML - Présentation 

Présentation de la page d'accueil du concours St Valentin



Comme promis je vous livre dans cet article mes astuces de présentation, ce qui fait suite à l'article sur la décoration :
HTML - Sources décoration.

Cliquez pour lancer la galerie St Valentin Au cours du concours de la St Valentin j'ai créé une galerie d'images défilantes dans des sens différents, ceci en employant une balise HTML <marquee> peu utilisée pour des images, en général elle est utilisée pour des textes défilants. Cette galerie est toujours dans mon album photos en cliquant sur l'image de droite les "Amoureux de Peynet" vous la lancerez.


Cette galerie comprend 3 éléments défilants:
  • de droite à gauche sur Peynet
  • de gauche à droite sur Betty Boop
  • de bas en haut sur les Poulbots
<div style="text-align:center;"><h2>Galerie Saint Valentin</h2></div>
<div id="peynet" style="position:relative; width:450px; height:510px;">
<h3>PEYNET - Les amoureux </h3>
<MARQUEE direction="left">
<img style="margin:5px" src="//*** adresse image 1 ***">
<img style="margin:5px" src="//*** adresse image 2 ***">
<img style="margin:5px" src="//*** adresse image 3 ***">
</MARQUEE></div><br><br><a href="#betty">Suite</a><br><br>
<div id="betty" style="position:relative; width:450px; height:510px;">
<h3>BETTY BOOP</h3>
<MARQUEE direction="right">
<img style="margin:5px" src="//*** adresse image 1 ***">
<img style="margin:5px" src="//*** adresse image 2 ***">
<img style="margin:5px" src="//*** adresse image 3 ***">
</MARQUEE></div><br><br><a href="#poulbots">Suite</a><br><br>
<div id="poulbots" style="position:relative; width:300px; height:400px;">
<h3>Les Poulbots</h3>
<MARQUEE direction="up" width="254" height="350">
<img style="margin:5px" src="//*** adresse image 1 ***">
<img style="margin:5px" src="//*** adresse image 2 ***">
<img style="margin:5px" src="//*** adresse image 3 ***">
</MARQUEE></div><br><br>

<a href="//***Nomdevotre***.blog4ever.com/blog/index-******.html" target="_self"><big>Retour Accueil</big></a>


Dans le code de la galerie le CSS est uniquement en direct c'est à dire avec l'attribut style="" incorporé dans la balise, ceci pour
- déterminer alignement du titre
- la position sur l'écran,la largeur, la hauteur
- les marges entre les images

Il vous restera à mettre les adresses des images, à la place de "*** adresse image # ***", puis ajouter une ligne pour chaque image, de modifier les valeurs (width, height) et de créer un article en rentrant ce code dans le composeur en mode HTML

Pour vous aider à employer cette balise <marquee> suivez ce : [lien]
ou cliquez sur l'un de ces attrribut ci-dessous :



Sur la gauche de ma page d'accueil pour la St Valentin, une cascade d'images de petits coeurs, en utilisant également la même technique avec un défilement vers le bas, peu d'espace entre les images et une hauteur qui permettait de voir 2 à 3 images.

L'idée met venue d'utiliser ce système avec la liste des gagnants du concours. Mais pour pouvoir cliquer les liens pour rendre visite aux sites, il fallait 2 scripts (pas utilisables en version gratuite):
- pour arrêter le défilement au survol de la souris : onmouseover="this.stop()"
- pour que le défilement reprenne après que la souris se retire : onmouseout="this.start()"

Voilà le résultat sur la droite de l'article et le code source ci-dessous.


<div style="RIGHT:1px; POSITION:fixed; TOP:1px">
<div style="border:4px inset #FF6600; background:#CCFFFF; width:180px; padding:1px; text-align:center; font-size:10pt">
Concours - St VALENTIN<br />
<a href="//test.blog4ever.com/blog/forum_msg-2-55480-118937.html" target="_blank">Résultats complets</a><br />
</div>
<div style="border:4px inset #FF6600; background:#CCFFFF; width:187px; height:75px; padding:1px">
<marquee direction="up" width="140" height="70" scrollamount="1" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<ol style="margin:1px; padding:1px">
<li><a href="//moi7fille2foyer.blog4ever.com/" target="_blank">moi7fille2foyer</a></li>
<li><a href="//unamoursecret.blog4ever.com/" target="_blank">unamoursecret</a></li>
<li><a href="//tallulah.blog4ever.com/" target="_blank">tallulah</a></li>
<li><a href="//demonange.blog4ever.com/" target="_blank">demonange</a></li>
<li><a href="//ana-struggle.blog4ever.com/" target="_blank">ana-struggle</a></li>
<li><a href="//chezangeljojo.blog4ever.com/" target="_blank">chezangeljojo</a></li>
<li><a href="//pretty-and-thin.blog4ever.com/" target="_blank">pretty-and-thin</a></li>
<li><a href="//melanieloisir.blog4ever.com/" target="_blank">melanieloisir</a></li>
<li><a href="//world-in-drama.blog4ever.com/" target="_blank">world-in-drama</a></li>
<li><a href="//naruto-news.blog4ever.com/" target="_blank">naruto-news</a></li>
<li><a href="//cynd1972.blog4ever.com/" target="_blank">cynd1972</a></li>
<li><a href="//sylviebarras.blog4ever.com/" target="_blank">sylviebarras</a></li>
<li><a href="//leptimondedesofiane.blog4ever.com/" target="_blank">eptimondedesofiane</a></li>
<li><a href="//bricabrac.blog4ever.com/" target="_blank">Bric à Brac</a></li>
<li><a href="//laboiteabidules.blog4ever.com/" target="_blank">laboiteabidules</a></li>
</ol>
</marquee>
</div></div>




Tous les articles précédemment réalisés sur le CSS et HTML, sont regroupés dans un article contenant leur liste et d'autres liens intéressants, à voir absolument cette nouvelle présentattion.






29/02/2008
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 132 autres membres