Bordures hautes  avec deux  images

 

ce tutoriel est la proprièté de

http://www.ameliacreation.com

 

 

 

Il s'agit de mettre une image en haut (un top) et d'inserer une  image en arriére plan

1

Pour permettre à la bordure haute de se positionner correctement sans espaces en haut ou sur les côtés ,il faut inserer un petit code.

ce code est à positionner entre <body> et </body>

mais pas n'importe comment.

Pour ne pas se tromper

inserer l'arriére plan.

ensuite aller dans les codes html et reperer la balise

<body background="mon_fond.jpg"> (mon_fond.jpg étant le nom de l'image de votre arrière plan)

si votre page web et votre image se trouve dans le même dossier

ou si elles sont dans des dossiers séparés :

aller dans les codes html et reperer la balise

<body background="mon_dossier/mon_fond.jpg">

en bleu le nom du dossier, vous devez avoir le nom de votre propre dossier si votre page web et votre image se trouve à des endroits différents

en rouge le nom du fond

Tous de suite derrière la parenthèses fermées ,insérez le code ci-dessous si votre page web et votre image se trouve dans le même dossier :

Vous devez changer ce qui est en rouge

haut.jpg par le nom de votre propre image celle que vous voulez mettre en haut

999 par la largeur de votre image qui doit être celle de votre ecran moins quelques pixels (la mienne est de 1024 j'ai choisi 999)

350 par la hauteur exacte de votre image

<span style="position: absolute; left: 0; top: 0; z-index: -1"><img border="0" src="haut.jpg" width="999" height="350">

Vous devez donc obtenir

<body background="mon_fond.jpg"><span style="position: absolute; left: 0; top: 0; z-index: -1"><img border="0" src="haut.jpg" width="999" height="350">

 

Si votre image et votre page web se trouve dans un dossier different vousdevez ajouter le nom du dossier

<span style="position: absolute; left: 0; top: 0; z-index: -1"><img border="0" src="mon_dossier/haut.jpg" width="999" height="350">

Vous devez donc obtenir

<body background="mon_dossier/mon_fond.jpg"><span style="position: absolute; left: 0; top: 0; z-index: -1"><img border="0" src="mon_dossier/haut.jpg" width="999" height="350">

 

2

Quand vous allez ajouter votre texte ,celui ci va commencer derriere l'image.

Pour que votre texte commence sous l'image ,

inserer par copier coller le code ci dessous entre les balises ,

<head> </head>

en rouge ce qui doit etre changé c'est a dire que vous devez mettre la hauteur de votre image

<STYLE>

BODY {

MARGIN-TOP: 300px;

}

 

</STYLE>

les balises <sytle> et <style> contiennent  la feuille de style de votre page.Beaucoup d'autres choses peuvent être ajouté

Menu

http://www.ameliacreation.com

Tubes de MARIE