PA onglets, infobulle

Bonjour je propose mon premier code de PA (réalisé grâce à never-utopia o/). Il n'est pas parfait alors ce serait plus un "bout" de PA x)



Page d'accueil

Code:

   <div id="pa"><div id="accueil1">
      <div id="accueil2">
        <div id="accueil3">
          <div id="accueil4">
            <div class="onglets">
              <table>
                <tr>
                  <td>
                    <a href="#">
                    <img class="staff" width="100" heigth="100" src="http://bastian.blog.lemonde.fr/files/vide.jpg" />
                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla efficitur, quis
                    lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit.</span></a>
                  </td>
                  <td>
  <span class="onglet1">
 <a href="#accueil1">Accueil</a>
  </span>
  <span class="onglet2">
 <a href="#accueil2">Contexte</a>
  </span>
  <span class="onglet3">
 <a href="#accueil3">Informations</a>
  </span>
  <span class="onglet4">
 <a href="#accueil4">Partenariats</a>
  </span>
  </td>
                  <td>
                    <a href="#">
                      <img class="staff" width="100" heigth="100" src="http://bastian.blog.lemonde.fr/files/vide.jpg" />
                      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla efficitur,
                      quis lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit.</span>
                    </a>
                  </td>
                </tr>
              </table>
            </div>
            <div id="contenu">
              <div class="entete_contenu">Message qui sera toujours affiché</div>
              <div id="contenu1">
                <div class="info_accueil">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla
                efficitur, quis lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit mattis malesuada. Mauris et
                quam ut felis aliquet varius non quis mi. Quisque eu ultrices tortor, sed gravida magna. Nullam lorem lacus,
                lacinia ac porta nec, lacinia vel arcu. Nam eu efficitur augue. Maecenas sit amet est vitae lectus rutrum imperdiet
                a sed felis.</div>
              </div>
              <div id="contenu2">
                <div class="info_accueil">Curabitur ultrices diam ac malesuada pulvinar. Aliquam lectus nisl, porttitor id mollis
                nec, facilisis quis leo. Aliquam tincidunt, elit vel tincidunt suscipit, mi nisi volutpat orci, vel dignissim
                turpis mi vitae quam. Mauris dignissim vel orci at molestie. Vivamus imperdiet iaculis ligula at tincidunt. Morbi
                ac sodales enim, et sollicitudin nisi. Sed convallis gravida gravida. Integer orci felis, consectetur fringilla
                tempor convallis, aliquam a risus. Aenean sem diam, fermentum sed nibh eget, posuere hendrerit velit. Curabitur
                pretium justo sed feugiat euismod. Duis aliquam lacinia malesuada. Nam nec nisl id enim lobortis mattis.</div>
              </div>
              <div id="contenu3">
                <div class="info_accueil">Fusce vel massa enim. Nullam luctus congue ante, vel placerat lacus vulputate a. Aliquam
                viverra felis ut dignissim lobortis. Integer semper consectetur eleifend. Praesent non est et mi vestibulum
                elementum nec eget purus. Praesent varius nunc et dui dictum, semper egestas purus ultrices. Aenean vel odio vitae
                nulla vestibulum euismod vitae et erat. Vivamus commodo justo sit amet purus mattis lobortis. Ut eu lobortis ex.
                Maecenas non bibendum dolor, a aliquet est.</div>
              </div>
              <div id="contenu4">
                <div class="info_accueil">Nulla tristique lectus risus, non iaculis eros tempor non. Nam sed sapien ultricies leo
                ultricies ultricies quis quis erat. Aenean a velit scelerisque mi varius accumsan sed id lacus. Nam vestibulum
                lorem sit amet ligula dignissim cursus. Mauris sed blandit magna. Nam commodo dui elit, vel pharetra lectus
                tristique id. Quisque suscipit lobortis mi, eget fermentum metus molestie non. Mauris suscipit auctor ipsum, et
                luctus nisi vestibulum sed. Donec pellentesque turpis mauris, posuere varius neque feugiat non. Vestibulum massa
                sem, vulputate ornare lacus feugiat, molestie varius nisl. Aliquam suscipit erat blandit ligula ultrices convallis.
                Curabitur fermentum, metus id rhoncus interdum, arcu dui pulvinar enim, eget molestie tortor neque ut metus. Donec
                in ante eleifend mauris tincidunt gravida at id nibh. Ut nec posuere ipsum, sit amet tempus magna. Sed tempus
                consequat augue, ac suscipit orci mattis nec.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div></div>


CSS

Code:

/*Onglets*/
#pa .ongls{
margin: auto;
}
#pa .ongl1, #pa .ongl2, #pa .ongl3, #pa .ongl4
{
display: block;
width: 80px;
height: 18px;
background-color: #6B6B6B;
border-radius: 10px;
border-left: 3px solid black;
border-right: 3px solid black;
}
#pa .ongl1:hover, #pa .ongl2:hover, #pa .ongl3:hover, #pa .ongl4:hover
{
background-color: #4D3009;
border-left: 3px solid black;
border-right: 3px solid black;
}
#pa .onglet1 a, #pa .onglet2 a, #pa .onglet3 a, #pa .onglet4 a
{
text-align: center;
display: block;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
color: #e5fae4;
font-size: 12px;
}
#pa .onglet1 a:hover, #pa .onglet2 a:hover, #pa .onglet3 a:hover, #pa .onglet4 a:hover
{
color: #446291;
}

/*Contenu*/
#pa #contenu
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
background: #6B6B6B;
font-size: 11px;
color: #3c506f;
margin-right: 10px;
margin-top: -35px;
border-left: 7px solid black;
border-right: 7px solid black;
border-radius: 5%;
margin: auto;
}

#pa #contenu1, #pa #contenu2, #pa #contenu3, #pa #contenu4
{
display: none;
}

#pa #accueil1:target #contenu1, #pa #accueil2:target #contenu2, #pa #accueil3:target #contenu3, #pa #accueil4:target #contenu4
{
display: block;
height: 200px;
width: 360px;
overflow: auto;
font-size: 11px;
color: #3c506f;
opacity: 1;
}
#pa .entete_contenu {
font-style: arial;
padding: 10px 10px 0px 10px;
text-align: center;
color:#8A0808;
letter-spacing: -.5px;
font-size: 10px;
}
#pa .info_accueil
{
padding: 10px;
text-align: justify;
}

#pa img{
display: block;
border-left: 7px solid black;
border-right: 7px solid black;
}

#pa img:hover{
border-radius: 50%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
border-left: 7px solid black;
border-right: 7px solid black;
border-top: 3px solid #6B6B6B;
border-bottom: 3px solid #6B6B6B;
}

#pa table {
margin:auto;
}

/* Infobulle */
#pa a{
text-decoration:none;
}

#pa a:hover, a:focus{
outline:none;
}

#pa a span{
text-align: justify;
color: #3c506f;
width:90px;
overflow: auto;
font-size: 11px;
position:absolute;
padding:5px;
margin:auto;
opacity:0;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
transform:scale(0) rotateZ(-12deg);
/*transition*/
-webkit-transition:all .25s;
transition:all .25s;
}

#pa a:hover span, #pa a:focus span{
border-left: 7px solid black;
border-right: 7px solid black;
border-radius: 5%;
background: #6B6B6B;
opacity:1;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
transform:scale(1) rotateZ(0);
}

Hello !
Désolée du temps qui a été mis pour te répondre, mais on a eu comme qui dirait un soucis avec ta PA En fait rien qu'en testant ton code sans le lire il déforme la barre de navigation et l'affiche en colonne.

Autre chose, le crédit vers Never-Utopia est obligatoire ! Avec ou sans ton pseudo c'est comme tu le désires (:.

Ensuite ce n'est qu'un conseil mais si tu veux des remerciements ou des traces du passages des gens qui prendront ton code, il vaut mieux mettre les codes sous la balise

Code:

[hide][/hide]

. Ce n'est qu'un conseil, ce n'est en aucun cas obligatoire et c'est à l'appréciation de celui qui poste !

Et il y a aussi des préfixes utilisés qui n'ont plus lieu d'être et qui alourdissent le code (seul le webkit est nécessaire pour safari).

Voilà, si tu voulais bien venir faire ces modifications pour que je puisse valider ton LS !
Si jamais tu as des questions ou besoin d'aide n'hésite surtout pas, je ne suis pas un tyran (: