PA pour forum RP avec image

Hello, je vais vous proposez ma deuxième PA. Dans celle-ci vous pourrez mettre un titre en image mais aussi une image en fond. Vous pourrez également changer l'onglet "RP du moment" par " top sites" c'est vous qui voyez. Maintenant place à l'aperçu et au code.



Le code à mettre dans vos CSS:

Code:

 /*....Page d'accueil....*/
.cadre-principal {
  display:block;
  background-image:url(http://zupimages.net/up/16/21/fqiq.png);
  background-repeat: repeat;
  background-position: top center;
  width:820px;
  height:680px;
  margin-left:-5px;
  border-radius:15px 15px 15px 15px;
  border: 3px solid #8F4835;
  text-align: center;
}
.contexte {
float:left;
display:block;
background: #945539;
height:300px;
width:250px;
position:relative;
margin-top: 40px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc1{ 
overflow:auto;
margin: auto;
width:235px;
height:270px;
text-align: left;}

.image {
float:left;
display:block;
background:# ;
background-repeat: no-repeat;
background-position: top center;
height:300px;
width:370px;
position:relative;
margin-top: 65px;
margin-left: 20px;
}

.bloc2{
width: 370px;
height: 300px;
margin: auto;
}

.crédit {
float:left;
display:block;
background: #945539;
height:120px;
width:110px;
padding:5px;
position:relative;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
margin-top: 40px;
margin-left: 20px;
text-align: left;
}
.lienutile {
float:left;
display:block;
background: #945539;
height:125px;
width:110px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.rpmoment {
float:left;
display:block;
background: #945539;
height:100px;
width:230px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.new {
float:left;
display:block;
background: #945539;
height:100px;
width:300px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc3{
overflow:auto;
width:300px;
height:80px;
text-align: left;
margin: auto;}

.staff {
float:left;
display:block;
background: #945539;
height:100px;
width:180px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: center;
}
.partenaire {
float:left;
display:block;
background: #945539;
height:50px;
width:770px;
padding:5px;
margin-top: 20px;
margin-left: 20px;
position:relative;

border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.titre2 {
  color:#4A1C00;font-size:30px;
  text-align:center;text-shadow:1px 1px 0px #fff;font-style: italic;
  font-family: 'Great Vibes', sans-serif;
  font-weight: 700;
  margin-top:-20px;}
div.infobulle{
position: relative;
display: inline-block;

}

div.infobulle span{
display: none;

}

div.infobulle:hover{
background: none;
z-index: 999;
}

div.infobulle:hover span
{
display: inline;
position: absolute;
top: 10px; left: 6px;
}
div.infobulle span{
  background: #8F4835;
  width: 50px;
  height: 70px;
  border: 1px solid #fff;
  border-radius:10px 10px 10px 10px;
 
}
/*....fin page d'accueil....*/

Code à mettre dans votre page d'accueil (HTML):

Code:

     
<div class="cadre-principal">
                                                                       <link href="https://fonts.googleapis.com/css?family=Great Vibes" rel="stylesheet" type="text/css" />                                                                   
   <div>
            <img src="http://zupimages.net/up/16/21/b84x.png" />                         
   </div>
                                                                                                
   <div class="contexte">
                                                                                                         
      <div class="titre2">
                                                                                     Le concept                                                       
      </div>
                                 
      <div class="bloc1">
                                                                   Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.        Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.                 
      </div>
                                                           
   </div>
                                                                                  
   <div class="image">
                               
      <div class="titre2">
                                                                                                                                          
      </div>
                 
      <div class="bloc2">
                             <img style="width: 370px; height: 300px;" src="http://zupimages.net/up/16/21/1cbt.png" />             
      </div>
                                         
   </div>
                                                                              
   <div class="crédit">
                                                                                 
      <div class="titre2">
                                                                             Crédits                                                       
      </div>
                                                            <br />Forum @...  <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br /> Design @... <br /> Catégorie @... <br /> Qeel @... <br />                                                                                   
   </div>
                                                                      
   <div class="lienutile">
                                                                                                           
      <div class="titre2">
                                                                       Liens                                                     
      </div>
                                                    <br /><a href="lien du règlement">Le règlement</a>  <br /> <a href="lien des règles">Les règles d'écriture</a> <br /><a href="lien de la présentation">Présentation</a> <br />                                                                                                                                           
   </div>
                                                            
   <div class="rpmoment">
                                                                                   
      <div class="titre2">
                                                                               Les rp du moments                                                                     
      </div>
                                                                <a href="Lien du rp">Titre du rp</a>                                                             
   </div>
                                                                        
   <div class="new">
                                 
      <div class="titre2">
                                                                               Les nouveautés                                                                   
      </div>
                                                                                                         
      <div class="bloc3">
                                                               ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                                 
      </div>
                                                                                     
   </div>
                                                                            
   <div class="staff">
                                                                               
      <div class="titre2">
                                                                           Le staff                                                                   
      </div>
                                                                                               
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/171727ympapa.png" /><span>Pseudo  </span>*                                               
      </div>
                                                                                           
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/423743roypa.png" /><span>  Pseudo</span>*                                               
      </div>
                                                                                             
      <div class="infobulle">
                                                           <img src="http://i39.servimg.com/u/f39/11/27/81/85/ava_pa10.png" /><span>  Pseudo  </span>                                                 
      </div>
                                                                           
   </div>
                                                                          
   <div class="partenaire">
                                                                           
      <div class="titre2">
                                                                             Les partenaires                                                                 
      </div>
                                                                                             
      <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                                                           <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Image hébergée gratuitement chez " border="0" /></a>-<a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a> <a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a>                             
      </marquee>
                                                                           
   </div>
   <div class="clear">
   </div>
                                                                                
</div>

Bonsoir,

Tout d'abord merci du partage !
Après j'aurais juste une remarque, tu as décidé de mettre ton CSS dans la feuille de style, c'est plus pratique, c'est bien. Néanmoins, il faut le faire pour toutes tes balises, là il reste encore des div avec des propriétés. Comme ici :

Code:

<div style="overflow:auto;width:300px;height:120px;">
                                                            ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                   
                  </div>

Je te laisse modifier ça avant de déplacer (:

Yo ~
Où en es-tu avec les modifications ?

Bonjour, déjà je m'excuse pour mon absence (je n'avais plus internet).
Sinon je ne comprend pas trop ce que tu demande exactement? (je suis novice sur les codages et je connais pas tous les termes)

Hey ^_^ Pas de mal !
En fait je te demande de mettre tout ce qu'il y a dans tes div style dans des div class pour mettre les propriétés dans la feuille de style. Comme tu as fait pour tout le reste en fait (:
Au passage je n'ai pas vu de crédit pour N-U '-' s'il n'y est pas n'oublie pas de l'ajouter (:
Et si encore une fois ce n'est pas clair n'hésite pas à me le dire ! J'suis pas un tyran et j'aide sans problème \o/

Hello ah ok, je vais essayé d'arranger ça, merci.
Les crédits y sont avec le lien direct du forum^^. (ils sont dans la partie HTML )

Édite: voilà c'est fait, par-contre je sais pas si c'est bon ou pas ?

En fait, tu as mis le class c'est bien. Mais tout ce qu'il y a après par exemple ça :

Code:

overflow:auto;width:230px;height:280px;

tu le remplaces par un nom pourquoi pas bloc1 et tu reportes ce nom avec le code dans ton CSS comme ceci :

Code:

.bloc1  {
overflow:auto;
width:230px;
height:280px;
}

Tu vois mieux ce que je te demande ?

Hello, je vais voir ça. (je promet rien)

Édite: voilà c'est fait mais je crois que je me suis mélanger les pinceaux

Coucou, juste pour prévenir que les modifications on été fait, mais sans aucune certitude d'avoir bien fait :/

Bonjour, je voulais savoir où ça en était sur la fiabilité de mon code? Si j'ai bien fait ou si je me suis planté.
Merci à bientôt.

Helo Hancok!
Désolée du retard de réponse, mais avec l'absence d'A-Lice elle n'a aps pu suivre ^^

Alors tout d'abord, tu tuilises des tables avec un seul td à l'intérieur... En réalité tu pourrais retirer tous tes tables tr et td pour laisser simplement tes div. Mettre des tables est ici un peu inutile.

Ensuite, j'ai vu ceci:

Code:

<div class="bloc2" />

Ça n'existe pas, une div est pas une balise unique! Il faudrait changer ça!

J'espère que ce n'est pas trop tard pour demander encore des changements

Merci pour le partage !

Coucou, non ce n'est pas trop tard et merci. En se moment je suis en plein apprentissage donc je pense pas corrigé de suite. Mais je vais essayer sinon, si vous le désirez, un peu d'aide sera le bienvenue .

Dis-moi quand c'est fait. On est pas pressés de toute façon, tu peux prendre ton temps

Coucou ok, si il faut je verrais avec ma prof et je reviendrais quand il sera correct^^.
A bientôt.

Hello, alors juste pour informer que je vais faire certaines modif sur cette PA, mais qu'elle aura besoin d'être corrigé, car j'ai encore beaucoup de lacune.

Édite: alors j'ai pu corrigé jusqu'à la demande d'enlever les tables tr et td.
Sur mon forum il y a pas de souci, mais si il faut encore quelque corrections, n'hésitez pas à me le dire.

oh j'adore ce que tu fais.

Merci^^ Leelo.

Salut!

C'est super, merci du partage !

Tout me semble bon alors je valide et ce sera bientôt déplacé dans les LS

Hello, j'avais même pas vue qu'il a était déplacer^^.
Merci.

merci pour cette jolie pa ^^ je la prend^^

merci

Merci bien !

Elle est superbe

merci pour la PA