j'ai trouvé ce tuto il y plusieurs mois et ne le retrouve plus maintenant.
url :http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after*/
J'ai juste un petit soucis d'affichage : sous I.E. pas de pb, mon menu s'affiche sur une seule ligne ; sous firefox, opera & consort, il dépasse de mon cadre et s'affiche sur deux lignes.
Y'a quelque chose que j'ai dû louper
Merci par avnce pour vos piste, réponses ainsi que pour la qualité des tutos alsacreations, ils sont souvent utiles.
le site est en ligne sur http://pirart.org
ci dessous, mon css :
Modifié par seb31 (04 Nov 2008 - 11:33)
url :http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after*/
J'ai juste un petit soucis d'affichage : sous I.E. pas de pb, mon menu s'affiche sur une seule ligne ; sous firefox, opera & consort, il dépasse de mon cadre et s'affiche sur deux lignes.
Y'a quelque chose que j'ai dû louper
Merci par avnce pour vos piste, réponses ainsi que pour la qualité des tutos alsacreations, ils sont souvent utiles.
le site est en ligne sur http://pirart.org
ci dessous, mon css :
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: black ;
color: red;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
color: red;
background-color: black;
font-family: Arial;
font-size: 15px;
text-indent: 20px;
line-height: 100%;
border: 2px solid #ff0000 ;
background: black ;
}
h1#header
{
height: 120px ;
background: url(./PirArt.png) no-repeat left top;
margin: 0;
}
h1#header a
{
width: 770px ;
height: 100px ;
display: block ;
background: url(./PirArt.png) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
/************Menu***************/
/*Basé sur le tuto alsacreation
http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after*/
ul#menu, #menu li {
list-style-type: none;
margin:0;
padding:0;
}
ul#menu {
width: 100%;
height: 1.1em;
}
#menu li {
display: inline;
}
#menu a {
font: bold 0.9em verdana, arial, sans-serif;
text-decoration: none;
color: #ffffcc;
margin: 0 0.5em;
padding:0;
background: black 0 0;
}
#menu a:hover {
background: Black 0 0px;
text-decoration: underline;
}
#menu a:before {
width: 23px;
padding: 0 23px 0 0;
background: black 0 0;
content: "";
}
#menu a:after {
width: 23px;
padding: 0 23px 0 0;
background: black 0 0;
content: "";
}
html > body #menu a:hover:before {
background: black 23px 0;
}
html > body #menu a:hover:after {
background: black 23px 0;
}
/***************Fin du Menu*****************/
div#contenu
{
padding: 0 30px 0 100px ;
background: url(plume-cms-powered.png) no-repeat 15px 15px ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 25px ;
background: url(little_apple.gif) no-repeat left bottom ;
color: red ;
border-bottom: 1px solid #ffffcc ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #ffffcc ;
border-left: 3px solid #ffffcc ;
color: #ffffcc ;
}
div#contenu h4
{
padding-left: 25px ;
line-height: 25px ;
font-size: 25px ;
text-align: center ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #ffffcc ;
text-decoration: none;
font-weight: bold;
}
div#contenu a:hover
{
color: #ffffcc;
text-decoration:underline;
font-weight: bold;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: center ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #ffffcc ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
pre
{
overflow: auto ;
}
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]--> Modifié par seb31 (04 Nov 2008 - 11:33)
