Onglets CSS épais simple

Onglets CSS épais

Ces onglets du menu CSS viennent avec le dessus épais / padding-bottom pour atteindre cet aspect attrayant amorti. L'installation est très facile de chaque lien du menu comporte simplement une image de fond de dégradé qui est changé en une version plus sombre de l'original lorsque la souris survole un élément de menu.

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

Le code css

<style type="text/css">

/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */

#thicktabs{

margin: 0;

padding: 0;

float: left;

font: bold 13px Tahoma;

}

#thicktabs li{

display: inline;

}

#thicktabs li a{

float: left;

color: black;

padding: 8px 11px; /*padding of tabs*/

text-decoration: none;

background: transparent url(media/pinkbg.gif) top right no-repeat;

border-top: 1px solid #d3bdbe; /*top border style*/

border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/

}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/

border-left: 1px solid #d3bdbe; /*left border style*/

}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/

border-right: 1px solid #d3bdbe; /*right border style*/

background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/

}

#thicktabs li a:visited{

color: black;

}

#thicktabs li a:hover{

color: black;

background-image: url(media/pinkbgover.gif); /*background image swap on hover*/

}

</style>

<!--[if IE]>

<style type="text/css">

p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/

padding-top: 1em;

}

</style>

<![endif]-->

Le code html

<ul id="thicktabs">

<li><a id="leftmostitem" href="votre lien ici">Home</a></li>

<li><a href="votre lien ici">CSS Codes</a></li>

<li><a href="votre lien ici">Forums</a></li>

<li><a href="votre lien ici">Webmaster Tools</a></li>

<li><a href="votre lien ici">JavaScript</a></li>

<li><a href="votre lien ici">Gallery</a></li>

</ul>

<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>

Posted in: blogger html css menu horizontale