Bonjour,
je suis vraiment nulle en html, css et tout ce tralala. Je suis capable de modifié certaine chose, mais quand j'ai des problèmes, j'arrive pas toujours à les régler.
Je fais une PA test pour un forum. Je me suis créée un forum test pour pouvoir monter la PA. C'est une PA qui a été mise dans le libre-service de ce site.
Mon petit soucis risque d'être très facile pour certain, mais pour la case Staff, j'aimerais enligné les membres qui sont Administrateur, et la ligne du dessous, ceux et celles qui sont modérateurs avec une ligne qui sépare les deux. Seulement, lorsque l'on pose la souris dans le tableau, il se rapetisse, j'aimerais garder la même dimension que lorsque l'on ne met pas la souris sur celle-ci.
Je vous donne les codes html et le css pour que vous voyez le petit quelque chose à modifié.
Je vous dis merci d'avance pour la ou les personnes qui vont prendre le temps de me répondre :3
je suis vraiment nulle en html, css et tout ce tralala. Je suis capable de modifié certaine chose, mais quand j'ai des problèmes, j'arrive pas toujours à les régler.
Je fais une PA test pour un forum. Je me suis créée un forum test pour pouvoir monter la PA. C'est une PA qui a été mise dans le libre-service de ce site.
Mon petit soucis risque d'être très facile pour certain, mais pour la case Staff, j'aimerais enligné les membres qui sont Administrateur, et la ligne du dessous, ceux et celles qui sont modérateurs avec une ligne qui sépare les deux. Seulement, lorsque l'on pose la souris dans le tableau, il se rapetisse, j'aimerais garder la même dimension que lorsque l'on ne met pas la souris sur celle-ci.
Je vous donne les codes html et le css pour que vous voyez le petit quelque chose à modifié.
- Html:
- Code:
<div class="fondsgénéraux">
<center>
<div class="titrePA1">
Neko Secret Academy
</div>
</center><img style="margin-top: -70px; WIDTH: 100px; margin-left: 500px; opacity: 0.5px" src="http://i86.servimg.com/u/f86/18/75/36/18/patte_10.png" /> <br />
<table>
<tbody>
<tr>
<td>
<center>
<script type="text/javascript">
//<!--
function change_paonglet(name)
{
document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
document.getElementById('contenu_paonglet_'+name).style.display = 'block';
anc_paonglet = name;
}
//-->
</script>
<div class="contenu_paonglets">
<div class="contenu_paonglet" id="contenu_paonglet_contexte">
<div class="titrePA2">
Contexte
</div>
<br /><br />
<div style="text-align: justify; width: 500px; height: 300px; overflow: auto;">
<span style="color: rgb(118, 118, 118);"> </span>
<div style="color: rgb(118, 118, 118); display: inline-block; border-radius: 200px; border: 1px solid rgb(42, 18, 10); position: relative; width: 200px; height: 200px; overflow: hidden; float: left; margin-right: 10px;">
<img src="http://i86.servimg.com/u/f86/18/75/36/18/no_77810.jpg" alt="" />
</div><span style="color: rgb(118, 118, 118);"> <br />Un petit panneau annonce l'entrée dans la petite ville côtière, située à l'extrémité Ouest du continent américain, juste à la frontière entre le Mexique et les Etats-Unis. Ce qui vous frappe avant tout ce sont les murs qui entourent l'intégralité de la ville. Vous n'avez pourtant pas l'impression qu'il s'agisse de fortifications moyenâgeuses... Si ce nom vous évoque vaguement quelque chose, c'est surtout dans le milieu étudiant que cette ville est connue : elle abrite dit-on, l'une des meilleures universités du continent. <br /><br />Pour le reste, la petite communauté qui vit ici est très discrète et il est difficile d'entrer dans le cœur des résidents si vous ne vivez pas ici. Il flotte dans l'air une sorte d'ambiance lourde, comme si un secret est farouchement préservé et garde par les habitants.<br /><br />Promenez vous dans ces ruelles jusqu'à atteindre l'université de Capland, la très célèbre Twin Academy. Après tout sa renommée n'est plus à faire et rien ne vous empêche d'aller vous promener dans le Campus...</span><span style="color: rgb(255, 0, 0);"> <a href="http://the-other-side.forumgratuit.org/t11-histoire-en-iii-actes"><span style="color: rgb(255, 0, 0);">Suite de l'histoire...<br /></span></a></span>
</div>
</div>
<div class="contenu_paonglet" id="contenu_paonglet_encours">
<div class="titrePA2">
Actuellement ...
</div><img style="WIDTH: 200px" src="http://data2.whicdn.com/images/83773104/large.gif" /> <br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 175px; COLOR: #767676; OVERFLOW: auto;">
Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque.
</div>
</div>
</div><br />
<div class="paonglets">
<span class="paonglet_0 paonglet" id="paonglet_contexte" onclick="javascript:change_paonglet('contexte');"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png" /></span> <span class="paonglet_0 paonglet" id="paonglet_encours" onclick="javascript:change_paonglet('encours');"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png" /></span>
</div>
<script type="text/javascript">
//<!--
var anc_paonglet = 'contexte';
change_paonglet(anc_paonglet);
//-->
</script><br /><br />
<div class="blocpa">
<div class="titrePA2">
Liens utiles
</div><br /><select style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a" onchange="location = this.value"> <option>Faites votre choix</option> <option value="http://the-other-side.forumgratuit.org/t1-reglement-general">Règlement Général</option> <option value="http://the-other-side.forumgratuit.org/t11-histoire-en-iii-actes">Contexte en III Actes</option> <option value="http://the-other-side.forumgratuit.org/t32-groupes-et-informations">Groupe et Info</option> <option value="http://the-other-side.forumgratuit.org/t22-liste-des-postes-pris-et-a-prendre">Poste à pourvoir</option> <option value="http://the-other-side.forumgratuit.org/f19-fiches-d-inscription">Fiche d'inscription</option></select>
</div><br /><br />
<div class="blocpa">
<div class="titrePA2">
Staff
</div><br /><d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/33k50u10.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Elisa / Fondatrice</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u1">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u1contact">MP</a></span></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/12850810.png" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Karl / Admin</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u2">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u2contact">MP</a></span></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/uq_hol10.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Evangeline / Admin</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u267">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u267contact">MP</a></span></d><d class="info"></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/28274613.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Damon / Admin</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u5">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u5contact">MP</a></span></d><d class="info"></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/45fd5610.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Yumi / Admin</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u110">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="hhttp://the-other-side.forumgratuit.org/u110contact">MP</a></span></d><br /><br /><d class="info"></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/vava_h10.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Hime / Modo</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u158">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u158contact">MP</a></span></d><d class="info"></d> <d class="info"></d> <d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/13048510.jpg" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Acuran / Modo</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u154">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u154contact">MP</a></span></d><d class="info"></d><d class="info"><img class="imgwidget" src="http://i86.servimg.com/u/f86/18/75/36/18/fubuki10.png" /><span><e class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 22px !important">Fubuki / Modo</e> <br /><a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u91">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 20px">☕</f> <a style="COLOR: #f0f0f0 !important" href="http://the-other-side.forumgratuit.org/u91contact">MP</a></span></d><d class="info"></d><br />
</div>
</center>
</td>
<td style="WIDTH: 20px">
</td>
<td>
<center>
<div class="blocpa" style="WIDTH: 350px">
<div class="titrePA2">
Nos actualités
</div><br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 300px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto">
<span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>- Univers Humains|Hybrides uniquement.<a style="COLOR: #fe6d6d !important" href="#">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a style="COLOR: #fe6d6d !important" href="#">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a style="COLOR: #fe6d6d !important" href="#">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a style="COLOR: #fe6d6d !important" href="#">La suite</a> <br /><br />
</div><br /><br />
<div class="titrePA2">
Nos vedettes manquantes sont ...
</div>
<br /><br /> <c class="info"><img class="imgPA" src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" /><span><br /><br /><d class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br /><a style="COLOR: #fe6d6d !important" href="#">Sa fiche</a></span></c> <c class="info"><img class="imgPA" src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" /><span><br /><br /><d class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br /><a style="COLOR: #fe6d6d !important" href="#">Sa fiche</a></span></c> <c class="info"><img class="imgPA" src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" /><span><br /><br /><d class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br /><a style="COLOR: #fe6d6d !important" href="#">Sa fiche</a></span></c> <c class="info"><img class="imgPA" src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" /><span><br /><br /><d class="titrePA1" style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important">Pseudo</d> <br /><a style="COLOR: #fe6d6d !important" href="#">Sa fiche</a></span></c>
</div><br />
<div class="blocpa" style="WIDTH: 300px">
<div class="titrePA2">
Pensez à survoler tout élément suspect !
</div>
</div><br />
<div class="blocpa" style="WIDTH: 350px">
<div class="titrePA2">
Si tu nous aimes, prouve-le !
</div><a href="#"><img class="tops" src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" /></a> <a href="#"><img class="tops" src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" /></a> <a href="#"><img class="tops" src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" /></a><br /><a style="FONT-FAMILY: georgia; COLOR: #fe6d6d !important" href="#"><em>Et sois récompensé</em></a>
</div>
</center>
</td>
</tr>
</tbody>
</table><br /><a href="http://www.never-utopia.com" style="color: #767676 !important;">© Halloween</a><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" />
<table>
</table>
</div>
- CSS:
- Code:
/*--------------------------------- PA ---------------------------------*/
/* Fond */
.fondsgénéraux {
background-color: #1B1B1F;
width: 1050px;
padding: 15px;
color: #767676;
}
.blocpa {
width: 400x;
padding: 15px;
background-color: #141517;
}
.blocpa:hover {
width: 400px;
background-color: #141517;
border-left: 2px solid #2F3C3E;
border-right: 2px solid #2F3C3E;
}
/* Titres */
.titrePA1 {
font-family: parisienne;
font-size: 55px;
color: #FE6D6D;
z-index: 1px;
position: relative;
}
.titrePA2 {
font-family: parisienne;
font-size: 25px;
color: #F0F0F0;
position: relative;
}
.titrePA2:hover {
font-family: parisienne;
font-size: 25px;
color: #FE6D6D;
position: relative;
}
.titrePA3 {
font-family: parisienne;
font-size: 25px;
color: #FE6D6D;
position: relative;
}
.titrePA3:hover {
font-family: parisienne;
font-size: 25px;
color: #F0F0F0;
position: relative;
}
/* Système onglets */
.paonglet {
display: inline-block;
cursor: pointer;
}
.contenu_paonglet {
display: none;
width: 650;
height: 340px;
background-color: #141517;
}
.contenu_paonglet:hover {
display: none;
width: 600px;
background-color: #141517;
border-left: 2px solid #2F3C3E;
border-right: 2px solid #2F3C3E;
}
/* Info-bulles staff */
.info {
position: relative;
z-index: 24;
text-decoration: none;
}
d.info:hover {
z-index: 25;
}
d.info span {
display: none;
}
d.info:hover span {
display: block;
position: absolute;
top: -2em;
left: -2em;
width:200;
height: 100px;
background-color: #1B1B1F;
color: #16161A;
text-align: center;
font-weight: none;
}
/* Info-bulles prédef */
.info {
position: relative;
z-index: 24;
text-decoration: none;
}
c.info:hover {
z-index: 25;
}
c.info span {
display: none;
}
c.info:hover span {
display: block;
position: absolute;
top: -7.3em;
left: -0.2em;
border-radius: 50%;
width: 85px;
height: 85px;
background-color: #1B1B1F;
color: #16161A;
text-align: center;
font-weight: none;
}
/* Images Prédef */
.imgPA {
border-radius: 50%;
width: 80px;
height: 80px;
}
/* Images Staff */
.imgwidget {
border-radius: 50%;
width: 100px;
height: 100px;
-moz-transition-duration: 1s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-duration: 1s;
transition-timing-function: linear;
}
.imgwidget:hover {
border-radius: 50%;
width: 100px;
height: 100px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
/* Top Sites */
.tops {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
width: 40px;
}
.tops:hover {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
width: 40px;
}
/*--------------------------------- FIN PA ---------------------------------*/
Je vous dis merci d'avance pour la ou les personnes qui vont prendre le temps de me répondre :3