Insérer une image en fond d'une PA
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Insérer une image en fond d'une PA
Bonsoir à tous !
Actuellement, je recherche le code permettant d'insérer une image dans le fond d'une page d'accueil sous système d'onglet. Voici le lien du forum sur lequel je test les différents code, ce qui vous permettra de comprendre un peu mieux : http://essaiundertown.forumgratuit.org/forum.htm
Comme le plus souvent, les images sont plus simples à comprendre que les mots, voici un screen d'un montage créée sur photofiltre qui vous présente le rendu final que je souhaiterais faire :
Voici l'image qu'il faudrait insérer derrière la page d'accueil sous forme d'onglet :
Eventuellement, les codes si vous en avez besoin :
PA :
CSS :
Ma question est la suivante :
Quel est le code pour que mon image soit derrière ma page d'accueil, exactement comme vous avez pu le voir sur le montage et où le placer (sur la feuille de CSS je présume) ?
Quelqu'un serait-il susceptible de m'aider s'il-vous-plait ? Merci d'avance !
Actuellement, je recherche le code permettant d'insérer une image dans le fond d'une page d'accueil sous système d'onglet. Voici le lien du forum sur lequel je test les différents code, ce qui vous permettra de comprendre un peu mieux : http://essaiundertown.forumgratuit.org/forum.htm
Comme le plus souvent, les images sont plus simples à comprendre que les mots, voici un screen d'un montage créée sur photofiltre qui vous présente le rendu final que je souhaiterais faire :
- Spoiler:
Voici l'image qu'il faudrait insérer derrière la page d'accueil sous forme d'onglet :
- Spoiler:
Eventuellement, les codes si vous en avez besoin :
PA :
- Spoiler:
- Code:
<br><div style="margin:auto;text-align:center;width:100%">
<script src="http://sd-g1.archive-host.com/membres/up/b2227501fb33494948c5d8f435ac3728a3111eeb/essai.js"></script>
<div id="mes_onglets">
<ul>
<li id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">Contexte & Accueil</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Le guide du parfait petit survivant</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Mise en quarantaine</li>
<br><br>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nos ravitaillements
</li>
<li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Le staff se présente</li>
<li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Les événements</li>
<li id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">Nos partenaires & Top-sites</li>
</ul>
<br><br>
</div><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;"><table border=0><tr><td align="left"><ul><img src="http://i66.servimg.com/u/f66/15/86/08/03/ojiuyt13.jpg" border="0" alt="" /></ul></td><td align="left"><ul><span style="font-size: 10px; line-height: normal"><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><br> <div style="border: none ; overflow: auto; width: 400px; height: 90px; -moz-border-radius-topleft: none; -moz-border-radius-topright: none; -moz-border-radius-bottomright: none; -moz-border-radius-bottomleft: none; margin-top: 0px; padding-left: 10px; padding-right: 5px;"><div align="justify">LE GUIDE DU PARFAIT PETIT SURVIVANT<br>(En 8 leçons)
<br>_____________________</br></div>
<br><div style="margin:auto;text-align:justify;width:100%">EN COURS.
</div></span></ul></td></tr></table></font></div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
<div id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
<div id="co_6" class="mon_contenu" style="display: none;">Mon contenu 6</div>
<div id="co_7" class="mon_contenu" style="display: none;">Mon contenu 7</div>
</div>
CSS :
- Spoiler:
- Code:
*{
margin: 0px;
padding: 0px;
font-family: comic sans MS, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body
{
width: 600px;
margin: 10px auto;
}
a
{
text-decoration: none;
color: #fff;
}
ul, li
{
list-style: none;
}
.mon_onglet
{
display : inline;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #b8efa1;
border: 1px solid #0D090F;
cursor: pointer;
margin-bottom: -1px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.mon_onglet:hover
{
background: #0D090F;
}
.mon_onglet_selected
{
display : inline;
padding: 2px 10px;
margin-right: 5px;
color: #333;
background: #0D090F;
border-top: 1px solid #0D090F;
border-right: 1px solid #0D090F;
border-left: 1px solid #0D090F;
border-bottom: 1px solid #0D090F;
cursor: pointer;
margin-bottom: -1px;
background-position: top center;
}
.clear
{
clear: both;
}
.mon_contenu
{
color: #666;
border: 1px solid #0D090F;
padding: 10px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#mes_contenus
{
width: 400px;
display : inline;
}
#mes_onglets
{
width:100%;
}
Ma question est la suivante :
Quel est le code pour que mon image soit derrière ma page d'accueil, exactement comme vous avez pu le voir sur le montage et où le placer (sur la feuille de CSS je présume) ?
Quelqu'un serait-il susceptible de m'aider s'il-vous-plait ? Merci d'avance !
Re: Insérer une image en fond d'une PA
Bonsoir,
Voilà pour le fond =>
Il y a pas mal d'erreurs dans votre code par contre
Cordialement.
Voilà pour le fond =>
Il y a pas mal d'erreurs dans votre code par contre
- Code:
<table width="800px" height="560px" style="background-image: url('http://i63.servimg.com/u/f63/15/43/68/94/sans_t10.jpg'); padding-top: 200px;" valign="top"><tr><td valign="top"><br><div style="margin:auto;text-align:center;width:100%">
<script src="http://sd-g1.archive-host.com/membres/up/b2227501fb33494948c5d8f435ac3728a3111eeb/essai.js"></script>
<div id="mes_onglets">
<ul>
<li id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">Contexte & Accueil</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Le guide du parfait petit survivant</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Mise en quarantaine</li>
<br><br>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nos ravitaillements
</li>
<li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Le staff se présente</li>
<li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Les événements</li>
<li id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">Nos partenaires & Top-sites</li>
</ul>
<br><br>
</div><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Contenu 1</div>
<div id="co_2" class="mon_contenu" style="display: none;"><table border=0><tr><td align="left"><ul><img src="http://i66.servimg.com/u/f66/15/86/08/03/ojiuyt13.jpg" border="0" alt="" /></ul></td><td align="left"><ul><span style="font-size: 10px; line-height: normal"><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><br> <div style="border: none ; overflow: auto; width: 400px; height: 90px; -moz-border-radius-topleft: none; -moz-border-radius-topright: none; -moz-border-radius-bottomright: none; -moz-border-radius-bottomleft: none; margin-top: 0px; padding-left: 10px; padding-right: 5px;"><div align="justify">LE GUIDE DU PARFAIT PETIT SURVIVANT<br>(En 8 leçons)
<br>_____________________</br></div>
<br><div style="margin:auto;text-align:justify;width:100%">EN COURS.
</div></span></ul></td></tr></table></font></div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
<div id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
<div id="co_6" class="mon_contenu" style="display: none;">Mon contenu 6</div>
<div id="co_7" class="mon_contenu" style="display: none;">Mon contenu 7</div>
</div> </td></tr></table>
Cordialement.
Re: Insérer une image en fond d'une PA
Merci beaucoup Anzu !
En effet j'ai encore pas mal de boulot pour corriger toutes les erreurs.
Mais d'une certaine manière, cela motive énormément.
Merci encore et passez une bonne soirée surtout !
En effet j'ai encore pas mal de boulot pour corriger toutes les erreurs.
Mais d'une certaine manière, cela motive énormément.
Merci encore et passez une bonne soirée surtout !
Sujets similaires
» Insérer une image au fond d'un forum
» Problème pour inserer une image dans en fond des messages
» petite image de fond (transparente) sur une image de fond
» Insérer une image à la place d'une couleur de fond
» Enlever le Fond dans " Insérer une image "
» Problème pour inserer une image dans en fond des messages
» petite image de fond (transparente) sur une image de fond
» Insérer une image à la place d'une couleur de fond
» Enlever le Fond dans " Insérer une image "
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum