Bonjour, je vous propose (ma toute première) PA simple qui peu aller partout en changeant les couleurs et images. En espèrent qu'elle vous sera utile.
Voici pour vous un aperçu de la PA => Click et avec l'infobulle => Click
L' HTML: (code à mettre sur la page d'accueil)
Code:
- Code:
<div class="cadre-principal">
<div align="center">
<strong><em><span style="font-size: 18px;">BIENVENUE SUR "NOM DU FORUM"</span></em></strong>
</div>
<div class="contexte">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
Le contexte
</div>
<div style="overflow:auto;width:495px;height:145px;">
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>
</td>
</tr>
</tbody>
</table>
</div>
<div class="staff">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
le staff
</div>
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_14.png" /><span>Pseudo</span>
</div>
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_15.png" /><span>Pseudo</span>
</div>
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_16.png" /><span>Pseudo</span>
</div>
<br />
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_17.png" /><span>Pseudo</span>
</div>
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_18.png" /><span>Pseudo</span>
</div>
<div class="infobulle">
<img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_19.png" /><span>Pseudo</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="crédit">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
Les crédits
</div>
<br />Forum @... <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br />Catégorie @... <br /> Qeel @... <br /> Design @... <br />
</td>
</tr>
</tbody>
</table>
</div>
<div class="tops">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
les top sites
</div>
<a target="_blank" href=" lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <br /> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="image">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
<img style="width: 150px; height: 150px;" src="http://i39.servimg.com/u/f39/11/27/81/85/3836711.png" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="new">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
Les nouveautés
</div>
<div style="overflow:auto;width:210px;height:145px;">
¤00/00/00: ... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />¤00/00/00 <br />¤00/00/00
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="partenaire">
<table>
<tbody>
<tr>
<td>
<div class="titre2">
Les Partenaires
</div>
<marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>
</marquee>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Code CSS:
- Code:
/*....Page d'accueil....*/
.cadre-principal {
display:block;
background-color:#302117 ;
background-repeat: no-repeat;
background-position: top center;
width:800px;height:480px;}
.contexte {
float:left;
display:block;
background: #634f3d;
height:150px;
width:500px;
position:relative;
top: 40px; left: 20px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.staff {
float:left;
display:block;
background: #634f3d;
height:150px;
width:200px;
position:relative;
top: 40px; left: 30px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.crédit {
float:left;
display:block;
background: #634f3d;
height:150px;
width:100px;
padding:5px;
position:relative;
top: 50px; left: 20px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.tops {
float:left;
display:block;
background: #634f3d;
height:150px;
width:170px;
padding:5px;
position:relative;
top: 50px; left: 30px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.image {
float:left;
display:block;
background: ;
height:150px;
width:150px;
padding:5px;
position:relative;
top: 50px; left: 40px;
}
.new {
float:left;
display:block;
background: #634f3d;
height:150px;
width:215px;
padding:5px;
position:relative;
top: 50px; left: 50px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.partenaire {
float:left;
display:block;
background: #634f3d;
height:50px;
width:705px;
padding:5px;
position:relative;
top: 60px; left: 20px;
border-top: 1px dotted;
border-bottom: 1px dotted;
border-right: 3px solid #434343;
border-left: 3px solid #434343;
}
.titre2 {
color:#B38600;font-size:18px;
text-align:center;text-shadow:1px 2px 1px #000;font-style: italic;
font-family: 'Cinzel', serif;
font-weight: 700;
margin-top:-20px;}
div.infobulle{
position: relative;
float: left ;
}
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: #434343;
width: 45px;
height: 45px;
border: solid 1px black;}
/*....fin page d'accueil....*/
Vous pouvez également mettre une image en fond au lieu d'une couleur. Pour cela aller dans le CSS => cadre principal => background-color:#302117; , le remplacer par background-image: url ('lien de l'image'); . N'oublier pas le point-virgule à la fin, c'est important.
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
