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.
Voici un aperçu www et voici ce que donne l'infobulle www
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>
Attention pour l'image du titre ne pas dépasser la taille suivante (mais vous pouvez faire plus petit) pour ne pas déformer la PA: 800*80
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Dernière édition par Hancok le Dim 18 Sep 2016 - 11:06, édité 4 fois
.
