epsilon
forum de libre service de codage,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Chainsaw Man Tome 15 Édition Spéciale : où l’acheter ?
12.99 €
Voir le deal

[HOVER AND STAFF]
 :: I am lost without my Boswell ☆ :: Page d'accueil
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
# [HOVER AND STAFF] - Lun 17 Déc - 2:04
[HOVER AND STAFF] 9HCL5yA

LE HTML : -dans le template overall_header juste sous la barre de navigation, après les div bodyline et bodylinwidth- :
Code:
<div id="diehard"><div class="tronchestaff">STAFF</div>
  <div class="firststaff"><span class="break"><div class="lemaire">Staff</div><div class="petittexte">Description staffeux</div></span> </div> <div class="firststaff2"><span class="break2"><div class="lemaire2">Staff</div><div class="petittexte2">Description staffeux</div></span> </div><div class="firststaff3"><span class="break3"><div class="lemaire3">Staff</div><div class="petittexte3">Description staffeux</div></span> </div><div class="firststaff4"><span class="break4"><div class="lemaire4">Staff</div><div class="petittexte4">Description staffeux</div></span> </div>
  <div id="onentoure"><div class="headertablept2text"><span>date</span> news </div>
  </div><div class="bloc_pa">Contexte</div><div class="tronchestaff2">Prédéfinis</div><div class="ensemblepredef"><div class="testpredef"><span class="hoverpredef"><div class="texthover">PRedef</div></span><a href="/"><img src="http://via.placeholder.com/50x50"></a></div><div class="testpredef"><span class="hoverpredef2"><div class="texthover2">Predef</div></span><a href="/"><img src="http://via.placeholder.com/50x50"></a></div><div class="testpredef"><span class="hoverpredef3"><div class="texthover3">Predef</div></span><a href="/"><img src="http://via.placeholder.com/50x50"></a></div> <div class="testpredef"><span class="hoverpredef4"><div class="texthover4">Predef</div></span><a href="/"><img src="http://via.placeholder.com/50x50"></a></div><div id="NavBoxRumeurs"> <div id="NavAvatarPseudo"><img id="NavAvatar" src="http://via.placeholder.com/50x50" alt="Avatar du membre du mois" /><div id="NavPseudoCitation"><div id="NavPseudo">Petite Annonce</div> Parce que tu es un membre en or</div><div id="NavTexteRumeur">Texte de membre du mois.</div></div></div> </div></div>
  
  
  <div class="partenaires_pa">
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
      <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    <div class="hoverparto"> <span class="icistp">Nom forum</span><a target="_blank" class="bouton_part_pa" href="/"><img src="http://via.placeholder.com/50x50"></a> </div>
    </div>
<div class="cred"><a href="http://epsilon-ls.forumactif.com/">Epsilon</a></div>

LE CSS :
Code:
.cred {
  text-align:center;
  margin-top:46px;
}
.cred a {
  color:grey;
  text-decoration:none;
  font-size:10px;
}
#diehard {
  position:relative;
  width:100%;
  height:450px;
  background-color:#E3E3E3;
  display:inline-block;
}
.tronchestaff {
    padding-left: 15px;
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-size: 36px;
    text-transform: uppercase;
    text-align: right;
    margin-bottom: 10px;
    border-bottom: 1px solid white;
    color: #a33f3f;
    text-shadow: 1px 1px 0px white;
    width:405px;
}
.firststaff {
  width:80px;
  height:250px;
  background-color:#a33f3f;
  padding-left:15px;
  margin:5px;
  display:inline-block;
  background-image:url('http://via.placeholder.com/90x250')
}
.firststaff2 {
  width:80px;
  height:250px;
  background-color:#a33f3f;
  padding-left:15px;
  margin:5px;
  display:inline-block;
  background-image:url('http://via.placeholder.com/90x250')
}
.firststaff3 {
  width:80px;
  height:250px;
  background-color:#a33f3f;
  padding-left:15px;
  margin:5px;
  display:inline-block;
  background-image:url('http://via.placeholder.com/90x250')
}
.firststaff4 {
  width:80px;
  height:250px;
  background-color:#a33f3f;
  padding-left:15px;
  margin:5px;
  display:inline-block;
  background-image:url('http://via.placeholder.com/90x250')
}
.break{
   position:absolute;
   width:83px;
  margin-left:-15px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:243px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.firststaff:hover .break{
   opacity:0.8;
}
.lemaire {
  text-align:center;
  font-size:20px;
  margin-top:20px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.petittexte {
   color:#a33f3f;
   font-family:'Open Sans Condensed', serif;
   font-size:12px;
  text-align:justify;
  margin-top:5px;
}
.break2{
   position:absolute;
   width:83px;
  margin-left:-15px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:243px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.firststaff2:hover .break2{
   opacity:0.8;
}
.lemaire2 {
  text-align:center;
  font-size:20px;
  margin-top:20px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.petittexte2 {
   color:#a33f3f;
   font-family:'Open Sans Condensed', serif;
   font-size:12px;
  text-align:justify;
  margin-top:5px;
}
.break3{
   position:absolute;
   width:83px;
  margin-left:-15px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:243px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.firststaff3:hover .break3{
   opacity:0.8;
}
.lemaire3 {
  text-align:center;
  font-size:20px;
  margin-top:20px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.petittexte3 {
   color:#a33f3f;
   font-family:'Open Sans Condensed', serif;
   font-size:12px;
  text-align:justify;
  margin-top:5px;
}
.break4{
   position:absolute;
   width:83px;
  margin-left:-15px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:243px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.firststaff4:hover .break4{
   opacity:0.8;
}
.lemaire4 {
  text-align:center;
  font-size:20px;
  margin-top:20px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.petittexte4 {
   color:#a33f3f;
   font-family:'Open Sans Condensed', serif;
   font-size:12px;
  text-align:justify;
  margin-top:5px;
}
#onentoure {
  display:inline-block;
}
.headertablept2text {
    font-family: 'Roboto';
    font-size: 11px;
    line-height: 15px;
    max-height: 250px;
    width: 190px;
    padding-left: 21px;
    overflow: auto;
}
.headertablept2text a {
color: #cf848c;
}
.headertablept2text span {
font-family: 'Montserrat';
text-transform: uppercase;
font-weight: 900;
font-size: 13px;
background-color: #a33f3f;
border-radius: 20px;
color: #fff;
}

.bloc_pa {
    width: 250px;
  position:absolute;
    height: 250px;
    text-align: justify;
    overflow: auto;
    font-size: 11px;
    border: 4px solid #a33f3f;
  padding:5px;
    color: black;
  display:inline-block;
}
.tronchestaff2 {
  position:absolute;
    top: 0px;
left: 920px;
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-size: 36px;
    text-transform: uppercase;
    text-align: left;
    float:right;
    margin-bottom: 10px;
    border-bottom: 1px solid white;
    color: #a33f3f;
    text-shadow: 1px 1px 0px white;
    width:400px;
  display:inline-block;
}
.testpredef {
  width:50px;
  height:50px;
  border:solid 8px #fff;
  display:inline-block;
  padding:10px;
}
.ensemblepredef{
  float:right;
  position: absolute;
top: 58px;
left: 920px;
}

.hoverpredef{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.testpredef:hover .hoverpredef{
   opacity:0.8;
}
.texthover {
  text-align:center;
  font-size:13px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.hoverpredef2{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.testpredef:hover .hoverpredef2{
   opacity:0.8;
}
.texthover2 {
  text-align:center;
  font-size:13px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.hoverpredef3{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.testpredef:hover .hoverpredef3{
   opacity:0.8;
}
.texthover3 {
  text-align:center;
  font-size:13px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}
.hoverpredef4{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.testpredef:hover .hoverpredef4{
   opacity:0.8;
}
.texthover4 {
  text-align:center;
  font-size:13px;
  font-family:'Roboto';
  font-style:italic;
  text-transform:uppercase;
}

#NavRumeurs{
   margin:20px;
   text-align:center;
}
#NavBoxRumeurs{
   background-color:white;
  width:350px;
   margin-top:10px;
   padding:15px;
}
#NavAvatar{
   border:3px solid #a33f3f;
   float:left;
   height:60px;
   width:60px;
}
#NavPseudoCitation{
   color:#black;
   font-family:'Open Sans Condensed', serif;
   font-size:12px;
   height:67px;
   text-transform:uppercase;
}
#NavPseudo{
   border-bottom:2px solid #a33f3f;
   font-size:17px;
   letter-spacing:1px;
}
#NavTexteRumeur{
   color:black;
   font-size:14px;
   letter-spacing:1px;
   text-align:initial;
}
.partenaires_pa {
text-align: center;
position:relative;
margin-top:-100px;
}
.hoverparto {
  display:inline-block;
}
.icistp{
   position:absolute;
   min-width:50px;
  margin-left:-1px;
  top:55px;
   background-color:#dee5e4;
   border:1px solid #a33f3f;
   padding:3px 5px;
  height:20px;
  color:#a33f3f;
   opacity:0;
   transition:all 500ms;
}
.hoverparto:hover .icistp{
   opacity:0.8;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum