gros soucis de Code HTML pour bannière d accueil!

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu gros soucis de Code HTML pour bannière d accueil!

Message par Jolene De Shola le Mar 19 Juil 2011 - 18:31

Bonjour à tous! ^^
Cela va faire à peu prêt deux semaines que je me suis lancée dans le code HTML, je "commence" à me débrouiller, mais voyez-vous mes ambitions commencent à être un peu trop "grosses"...

Mon But:
Effectuer une bannière d’accueil propre et nette avec:
En "background" une image => "http://img155.imageshack.us/img155/9586/accueile.jpg"
En <body> trois tableaux et cellules avec les liens ou les codes sont inscrits ci dessous.
En bref, j’ai déjà tous, le tableau, les codes.. MAIS l’image ne répond pas...

Le rendu avec le code que je vous pose est comment dire...
°.° à s’en tirer les cheveux!!!!!!!!
il n’y a pas L’image en BG, les tableaux ont de laaarges espaces et en bref, c’est pas supportable xD
* je ne compte pas l’image qui, dans d’autres fenêtres internet: Firefox+explorer9 se décuple °.° *
Je vous laisse Admirer....:


Code:
<table align=center style="border-color: #000000;  border: solid 2px #000000;-moz-border-radius:15px 15px 15px 15px;padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;
background: url('http://img155.imageshack.us/img155/9586/accueile.jpg');background-color: #CD661D" width="95%" border="0" cellspacing="0" cellpadding="5"><tr><td colspan="2">
<div style="height: 600px; overflow: auto;"><blockquote>
<blockquote>

<center><div class="titrepa">~ Bienvenue dans le Monde de Jvénal ~</div></center><table style="background-color:#000000; width:100%;">
<td class="contexte"><center><div class="titrepa2">Contexte</div></center><font color="#3699C7"><br>
<br>Dans le monde de Jvénal, la Magie a été disgraciée par la Science.<br>
<br>
Cette dernière ne servant qu'à de rare élus se retrouve confrontée à un monde gourverné de plus en plus par le malin.<br>
<br>
Mais dans une pâle lumière, menée par un certain "héros", la Magie s'apprête à revenir...<br>
<br>
Où trouverez-vous votre place ?</font><div style="text-align: right"><a style="text-shadow: 1px 1px 2px #ffffff;" href="">En lire plus ?</a></div></td>
<td class="parto"><center><div class="titrepa2">Partenaires</div></center>
<span><marquee behavior="scroll" direction="up" scrollamount="1" height="180"><center>
<a href="http://wild-souls.forumgratuit.be/" class="postlink" target="_blank" rel="nofollow"></a>
<a href="http://harmonia.forumsactifs.com/index.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://i67.servimg.com/u/f67/14/27/12/21/ban10010.jpg" border="0" alt="" /></a>
<a href="http://reinventeladestinee.forumactif.com/forum." class="postlink" target="_blank" rel="nofollow"><img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" /></a>
<a href="http://zeldarpg.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img834.imageshack.us/img834/772/zeldas.png" border="0" alt="" /></a>
</center></marquee></span></td></tr></table>
<table style="background-color:#000000; width:100%;"><tr>
<td class="liens"><center><div class="titrepa2">Liens utiles:</div>

<br>
<center>
<br><a href="http://jvenal.forumgratuit.org/t6-histoire-du-fow"><span style="color: white;">♣ Histoire du Fow</span></a><br>


<br>
<a href="http://jvenal.forumgratuit.org/f4-creation-de-votre-personnage"><span style="color: white;">♣ présentation</span></a><br style="color: black;"><span style="color: black;"><br>

<a href="http://jvenal.forumgratuit.org/t8-regles-de-vie-du-fofo"><span style="color: white;">♣ Règlement</span> </a></span><br style="color: black;"> <br>

<a href="http://jvenal.forumgratuit.org/f61-contexte"><span style="color: white;">♣ Cartes et Royaumes</span> </a></span><br style="color: black;"> <br>

</center>

<td class="news"><center><div class="titrepa2">Nouveautés</div></center><span><marquee behavior="scroll" direction="down" scrollamount="1" height="140"><font color="#3699C7">>> Une nouvelle Page d'Accueil ! ;D
<br>>> Un concours est lancé !
<br></marquee></font>

<td class="news"><center><div class="titrepa3">Top Site</div></center>

<a href="http://www.root-top.com/topsite/hoglard/in.php?ID=4612"><font style="font-family: Franklin Gothic Medium;" size="6">
<span style="color: Black;"></span></font><font style="font-family: Franklin Gothic Medium; color: rgb(51, 51, 153);" size="6">
<img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie5.gif" border="0" alt="" /></font></a>

<a href="http://www.root-top.com/topsite/yami/in.php?ID=3867"><font style="font-family: Franklin Gothic Medium;" size="6">
<span style="color: Black;"></span></font><font style="font-family: Franklin Gothic Medium; color: rgb(51, 51, 153);" size="6">
<img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie6.gif" border="0" alt="" /></font></a>

<a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2601"><img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie5.gif" border="0" alt="massacre jvenal" title="massacre jvenal"><br/></a>
</font></span></td></tr>
</table>

</blockquote>
</span></td>
</span></ul></div>
</td></tr></table>


Voilà le travail.
Veuillez excusez le peu de cohérence entre mes lignes, j’ai tenté d’espacer les lignes au maximum pour que les éventuels adjuvants puissent lire correctement.
J’espère sincèrement qu’il existe une solution à mon problème et vous encourage à m’aider le plus possible U.u

* PS: voici ci dessous les rendus que je voudrais rendre "A peu prêt!" via toshop/tofiltre *

Rendu Souhaité:
Spoiler:
Rendu Actuel:
Spoiler:

Nous -le Staff et moi même- vous remercions de cette aide occasionnée!
Nous espérons que nous ne vous en demandons pas trop =/


Dernière édition par Jolene De Shola le Mar 19 Juil 2011 - 22:59, édité 1 fois

Jolene De Shola
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 05/03/2011

http://jvenal.forumgratuit.org/
Jolene De Shola a été remercié(e) par l'auteur de ce sujet.

Résolu Re: gros soucis de Code HTML pour bannière d accueil!

Message par Ea le Mar 19 Juil 2011 - 20:25

Bonjour,


Voilà un exemple :

Code:
<div id="pam">
   <span class="title" id="pam-title">Bienvenue dans le Monde de Jvénal</span>
   <div id="pam-context">
      <span class="title">Contexte</span>
      Dans le monde de Jvénal, la Magie a été disgraciée par la Science.


      Cette dernière ne servant qu'à de rare élus se retrouve confrontée à un monde gourverné de plus en plus par le malin.


      Mais dans une pâle lumière, menée par un certain "héros", la Magie s'apprête à revenir...


      Où trouverez-vous votre place ?
   </div>
   <div id="pam-partner">
      <span class="title">Partenaires</span>
      <marquee behavior="scroll" direction="up" scrollamount="1" height="93">
         <a href="http://harmonia.forumsactifs.com/index.htm" class="postlink" target="_blank" rel="nofollow">
            <img src="http://i67.servimg.com/u/f67/14/27/12/21/ban10010.jpg" border="0" alt="" />
         </a>
         <a href="http://reinventeladestinee.forumactif.com/forum." class="postlink" target="_blank" rel="nofollow">
            <img src="http://i51.tinypic.com/314qira.jpg" border="0" alt="" />
         </a>
         <a href="http://zeldarpg.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow">
            <img src="http://img834.imageshack.us/img834/772/zeldas.png" border="0" alt="" />
         </a>
      </marquee>
   </div>
   <div id="pam-links">
      <span class="title">Liens Utiles</span>
      <a href="http://jvenal.forumgratuit.org/t6-histoire-du-fow">♣ Histoire du Fow</a>
      <a href="http://jvenal.forumgratuit.org/f4-creation-de-votre-personnage">♣ présentation</a>
      <a href="http://jvenal.forumgratuit.org/t8-regles-de-vie-du-fofo">♣ Règlement</a>
      <a href="http://jvenal.forumgratuit.org/f61-contexte">♣ Cartes et Royaumes</a>
   </div>
   <div id="pam-news">
      <span class="title">Nouveautés</span>
      <marquee behavior="scroll" direction="down" scrollamount="1" height="78">
         >> Une nouvelle Page d'Accueil ! ;D

         >> Un concours est lancé !
      </marquee>
   </div>
   <div id="pam-topsite">
      <span class="title">Top Site</span>
      <a href="http://www.root-top.com/topsite/hoglard/in.php?ID=4612">
         <img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie5.gif" border="0" alt="" />
      </a>
      <a href="http://www.root-top.com/topsite/yami/in.php?ID=3867">
         <img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie6.gif" border="0" alt="" />
      </a>
      <a href="http://www.root-top.com/topsite/moonlighttoprpg/in.php?ID=2601">
         <img src="http://www.gif-anime.org/im/gif/monstre/zombie/zombie5.gif" border="0" alt="massacre jvenal" title="massacre jvenal">
      </a>
   </div>
</div>
Et mettre dans le CSS ( PA > Affichage > Couleurs > Feuille de style ) :

Code:
#pam {
   background:url(http://img155.imageshack.us/img155/9586/accueile.jpg);
   width:800px;
   height:333px;
   position: relative;
   margin: auto;
}
   #pam .title {
      display: block;
      position: relative;
      text-align: center;
      top: -14px;
      margin: auto;
      margin-bottom: -14px;
      color: #dbd52e;
      font-family: arial, serif;
      font-size: 13px;
      text-shadow:0 0 3px #000;
   }
   #pam div {
      border: 1px solid #bbb;
      position: absolute;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow:0 0 2px #000;
      -webkit-box-shadow:0 0 2px #000;
      box-shadow:0 0 2px #000;
      background: url(http://i.imgur.com/a5mKd.png);
   }
   #pam #pam-title {
      top: 20px;
   }
   #pam-context {
      top: 110px;
      left: 20px;
      width: 455px;
      height: 95px;
   }
   #pam-partner {
      top: 110px;
      left: 490px;
      width: 300px;
      height: 95px;
   }
   #pam-links {
      top: 220px;
      left: 20px;
      width: 300px;
      height: 80px;
   }
      #pam-links a {
         display: block;
         text-align: center;
         margin: 5px;
         color: white;
      }
   #pam-news {
      top: 220px;
      left: 335px;
      width: 140px;
      height: 80px;
   }
   #pam-topsite {
      top: 220px;
      left: 490px;
      width: 300px;
      height: 80px;
   }
Une fois que le positionnement est fait ce n'est pas très compliqué, il suffit de mettre aux éléments certaines propriétés CSS pour avoir ce qu'on souhaite.

Pour ce qui est du positionnement il suffit d'avoir un bloc qui entoure tout avec une largeur et hauteur donnée puis d'avoir dedans tout des blocs positionné de manière absolue ( position: absolute ) puis de leur donner leur position du bord gauche, du bord haut et puis leur largeur et hauteur et le tour est joué.

Voilà quelques tutos sur le positionnement :

- http://openweb.eu.org/articles/initiation_flux/ ( Initiation au positionnement CSS : 1.flux et position relative )
- http://openweb.eu.org/articles/initiation_float/ ( Initiation au positionnement CSS : 2.position float )
- http://openweb.eu.org/articles/initiation_absolue/ ( Initiation au positionnement CSS : 3. position absolue et fixe )

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: gros soucis de Code HTML pour bannière d accueil!

Message par Jolene De Shola le Mar 19 Juil 2011 - 21:01

Ô.o .... mon dieux! je ne savais pas qu'il fallait pratiquer de l'échange avec la feuille CSS!

* s'agenouille *

merci Ô mon maître du HTML! *--*
pour les tuyaux, pour les codes....
^^" par contre le code que vous avez utilisé ne semble pas le même que celui que j'ai moi même utilisé....
pourrais je juste savoir -avant de poursuivre et continuer de m'entraîner-
Pourquoi mon code ne fonctionnait il pas ?

encore merci pour tout *--*!

Jolene De Shola
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 05/03/2011

http://jvenal.forumgratuit.org/
Jolene De Shola a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum