Sujets similaires

Bonjouuuur (:
Pour mon forum, afin de faire une navigation rapide sur ma page d'accueil, je rechercherais comment faire cet effet ( ici : http://wfwp.forumactif.com/forum.htm , botin des avatars; présentation, calendrier etc... ), s'il vous plait. Il me semble que c'est dans le Css & qu'il y a une petite partie html, fin, je sais pas trop enfaite. C'est où il y a les côtés (border-right & border-left) qui chant de couleur quand on passe dessus.
Merci de ceux qui voudront bien m'aider (:

C'est seulement un block de navigation. (:
Par contre, je ne peux pas plus t'aider étant donné que je ne m'y connais pas assez. (:

Bonjour ^^

pour faire ce type de navigation c'est le code suivant

Code:: <body>
<tbody>

<td><div class="part_pa">

<ul id="menu_pa">
<li>
<a href="link">
Menu
</a></li>
<li>
<a href="link">
Menu

</a></li>
<li>
<a href="link">
Menu
</a></li>
<li>
<a href="link">
Menu
</a></li>
<li>
<a href="link">
Menu
</a></li>
<li>
<a href="link">
Menu

</a></li></ul><div style="font-size: 12px; font-family: arial; text-align: center; font-weight: bold;"><a href="link">Texte !</a></div><br><div style="font-size: 9px; text-align: justify;">bla..bla <a href="link">link</a>, codes par <a href="link">link</a>. Bla bla bla Rebla bla bla superbla..............
Bla bla bla ba bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla..<br>

Forum optimisé pour Mozilla Firefox.</div>
</div></td>
</tr>
</tbody>
</body>

Et le CSS à ajouter

Code:: #menu_pa {list-style-type:none;list-style-position:inside;}

#menu_pa li a
{
display: block;
width:120px;
font-family : arial;
color: #625048;
position:relative;
right:20px;
font-size:9px;
background-color: #CFCFCF;
text-align:center;
border-right-width: 6px;
border-left-width: 6px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}

#menu_pa a:hover
{
color: #FFF;
border-left: 6px solid #C30010;
border-right: 6px solid #C30010;
}

#menu_pa {list-style-type:none;list-style-position:inside;}

#menu_pa li a
{
display: block;
width:120px;
font-family : arial;
color: #625048;
position:relative;
right:16px;
font-size:9px;
background-color: #CFCFCF;
text-align:center;
border-right-width: 6px;
border-left-width: 6px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}

#menu_pa a:hover
{
color: #FFF;
border-left: 6px solid #C30010;
border-right: 6px solid #C30010;
}

/* _____________________

PAGE D'ACCUEIL
______________________ */

#pa
{
background:url('http://2img.net/i/fa/subsilver/empty.gif') center center no-repeat;
width:905px;
height:370px;
margin:auto;
margin-top:10px;
margin-bottom:10px;
}

#content_pa
{
width:793px;
height:370px;
margin:auto;
border-collapse:collapse;
vertical-align:top;
}

#content_pa td
{
vertical-align:top;
}

.part_pa
{
height:152px;
width:176px;
padding:8px;
font-family:arial, tahoma;
font-size:9px;
line-height:10px;
color:#4a3f3f;
text-align:center;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 1px 1px 1px #484848;
-webkit-box-shadow: 1px 1px 1px #484848;
margin:auto;
background-color: #FFCCCD;
}

#pa img.arrondi
{
margin:0px;
position:relative;
top:4px;
}

/* _____________________

PV
______________________ */

.fullsample
{
width: 159px;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #AA0000;
padding: 5px;
color:white;
font-family:arial black;
font-weight:bold;
font-size:12px;
}

.fullsample em
{
font-style: normal;
color: #535353;
}

.fullsample2
{
width: 255px;
border-radius: 10px 10px;
-moz-border-radius: 10px;
background-color: #E1E1E1;
padding: 5px;
}

.fullsample2bis
{
width: 210px;
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #FFFFFF;
padding: 35px;
text-align:left;
padding-bottom:25px;
font-size:12px;
font-family:tahoma;
padding-right:25px;
}

.fullsample3
{
width: 204px;
border-radius: 10px 10px;
-moz-border-radius: 10px;
background-color: #C9C9C9;
padding: 5px;
}

.fullsample4
{
width: 159px;
border-radius: 10px 10px;
-moz-border-radius: 10px;
background-color: #626262;
padding: 5px;
}

.fullsample5
{
width: 550px;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright: 11px;
background-color: #626262;
padding: 5px;
}

.fullsample6
{
width: 298px;
height:405px;
-moz-border-radius-bottomleft: 11px;
border-left: 4px #626262 solid;
border-bottom: 4px #626262 solid;
background-color: silver;
padding: 5px;
}

.fullsample7
{
width: 228px;
height:405px;
-moz-border-radius-bottomright: 11px;
border-right: 4px #626262 solid;
border-bottom: 4px #626262 solid;
background-color: silver;
padding: 5px;
}

.pv_nom
{
color:#BF0000;
font-family:arial;
font-size:24px;
text-align:right;
}

.pv_story
{
width:200px;
height:100px;
margin:auto;
overflow:auto;
/*font-size:11px;*/
line-height:15px;
padding-right:3px;
text-align:justify;
font-family:tahoma;
margin-bottom:15px;
}