Header

Partagez | 

[Xooit] Mettre une "bannière fond"

Message Sujet: [Xooit] Mettre une "bannière fond"   Ven 20 Avr - 16:46

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci

Spoiler:
 

Les images utilisées sont réalisées par Meirera qui les a créées pour sa formation gimp

Vous allez voir, c'est très simple.

IdeaPré-requis :
  • vous devez avoir accès aux templates,
  • vous devez avoir en votre possession un header qui se répète correctement horizontalement et une image de fond,
  • aucune connaissance en html et css n'est nécessaire ici.


On y va.

1/ Dans le template "overall_header", nous allons faire 2 manip :
-> supprimer la partie qui affiche la bann. Pour cela, repèrez quelque chose qui ressemble à ça
Code:
         <tr>
            <td align="center" width="100%" valign="middle"><a href="{U_INDEX}"><img src="http://img10.xooimage.com/files/l/o/logo-906f6.png" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
            </tr>
et supprimez le.

-> Ajouter un bloc qui va afficher le header. Pour cela, on va placer ça
Code:
<div id="banniere" onclick="document.location.href='/index.php'"> </div>
juste après
Code:
<a name="top"></a>

2/ Ensuite, toujours dans le même template, on va ajouter le css. Pour cela, écrivez juste avant
Code:
</style>
Les infos suivantes :
Code:
body{
   margin:auto;
   background-image:url('lien_de_votre_image_de_fond');
   background-repeat:repeat;
   }

div#banniere{
   background-image:url('lien_de_votre_bann');
   background-repeat:repeat-x;
   width:100%;
   height:hauteur_de_votre_banniere px;
   background-position: top center;
   }

Spoiler:
 

Et c'est terminé Smile




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[Xooit] Mettre une "bannière fond"
Page 1 sur 1
 Sujets similaires
-
» Comment mettre une bannière sur mon forum
» Mettre une bannière à chaque catégorie
» Mettre image de fond dans les posts
» Mettre une bannière-fond un fond
» Problème d'affichage bannière fond transparent
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens