28172 sujets

CSS et mise en forme, CSS3

(résolu) Pb : Onglet en images coulissantes et sprites

Salut tout le monde !

Voilà, je suis en train de faire pour mon propre site un système d'onglet en css.
Mes contraintes : mon site est géré par wordpress, je voulais utiliser des images coulissantes, des sprites, et que l'onglet actif ait un état propre. Pour ce dernier point, j'ai utilisé les titres de mes pages, et bidouillé mon css de sorte que mon onglet blog soit en état actif tout le temps, sauf sur mes pages statiques (si je n'utilisais pas cette astuce, l'onglet blog n'était pas actif sur mes pages d'articles par exemple, car c'est leur titre qui remontait dans l'id de ma page... un binz quoi).

Tout allait dans le meilleur des mondes jusqu'à ce que j'intègre mes images (j'avais tout construit avec des fonds de couleur pour commencer)...

Problème 1 : mes roll-over et mon état actif ne marchent plus. Je cale.
Problème 2 : comment afficher mon coin arrondi à droite en utilisant des sprites, vu que je ne peux utiliser à la fois right + une valeur en pixel dans mes backgound-position ?

Bref, voici mon code :

...

<body id="page-a<?php single_post_title(); ?>">

...
<ul id="nav-tabs">
  <li id="activblog">
       <a id="home" href="<?php echo get_option('home'); ?>/">
           <span class="menu-item">Blog...</span>
           <span class="menu-item-def">Accueil du site</span></a></li>
 <li id="activportfolio">
       <a href="http://www.sandeedesign.fr/portfolio/">
           <span class="menu-item">Portfolio</span>
           <span class="menu-item-def">Galerie de travaux</span></a></li>				

...

</ul>



#nav-tabs
{
    float: left;
    background: url(images/tabs-tranparency.png);
    background-repeat: repeat;
    width: 960px;
    margin: 0;
    padding: 0;
}

#nav-tabs li
{
    background: transparent url(images/tabs-sprite-bg.gif) no-repeat scroll 0 0;
    margin: 18px 0 0 6px;
    padding: 0;
    font-size: 1.6em;
    float: left;
    list-style-type: none;
    border-bottom: 2px solid #000000;
    position: relative;
}

#nav-tabs li:first-child
{
    margin-left: 15px;
}

#nav-tabs li:hover, #nav-tabs li:focus,
body#page-aPortfolio #nav-tabs li#activblog:hover,
body#page-aPrestations #nav-tabs li#activblog:hover,
body#page-aTéléchargements #nav-tabs li#activblog:hover,
body#page-aSandeeDesign #nav-tabs li#activblog:hover,
body#page-aContact #nav-tabs li#activblog:hover,
body#page-aPortfolio #nav-tabs li#activblog:focus,
body#page-aPrestations #nav-tabs li#activblog:focus,
body#page-aTéléchargements #nav-tabs li#activblog:focus,
body#page-aSandeeDesign #nav-tabs li#activblog:focus,
body#page-aContact #nav-tabs li#activblog:focus /* je force le survol et le focus sur l onglet blog quand je suis sur les pages*/
{
    background-position: 0 82px;
}

body li#activblog, /* l onglet blog est eclaire tout le temps, et je precise les exceptions pour les pages par la suite*/
#nav-tabs li#activblog:hover, #nav-tabs li#activblog:focus, /* corrige le fait que le roll over de l onglet marche quand cet onglet est actif */
body#page-aPortfolio #nav-tabs li#activportfolio,
body#page-aPrestations #nav-tabs li#activprestations,
body#page-aTéléchargements #nav-tabs li#activtelechargement,
body#page-aSandeeDesign #nav-tabs li#activsandeedesign,
body#page-aContact #nav-tabs li#activcontact
{
    background-position: 0 163px;
    border-bottom: 2px solid #ffffff;
} 	/* Mets les onglets des pages actives en blanc*/

body#page-aPortfolio #nav-tabs li#activblog,
body#page-aPrestations #nav-tabs li#activblog,
body#page-aTéléchargements #nav-tabs li#activblog,
body#page-aSandeeDesign #nav-tabs li#activblog,
body#page-aContact #nav-tabs li#activblog
{
    background-position: 0 0;
	border-bottom: 2px solid #000000;
} /* empeche l onglet blog d'etre allume sur les pages*/

#nav-tabs li a 
{
    background: transparent url(images/tabs-sprite-left.gif) no-repeat scroll 0 0;
    color: #444;
    padding: 0 18px 0 18px; /* pour les portes coulissantes*/
    text-decoration: none;
    display: block;
    min-height: 60px;
}

#nav-tabs li a:hover, #nav-tabs li a:focus,
body#page-aPortfolio #nav-tabs li#activblog a:hover,
body#page-aPrestations #nav-tabs li#activblog a:hover,
body#page-aTéléchargements #nav-tabs li#activblog a:hover,
body#page-aSandeeDesign #nav-tabs li#activblog a:hover,
body#page-aContact #nav-tabs li#activblog a:hover,
body#page-aPortfolio #nav-tabs li#activblog a:focus,
body#page-aPrestations #nav-tabs li#activblog a:focus,
body#page-aTéléchargements #nav-tabs li#activblog a:focus,
body#page-aSandeeDesign #nav-tabs li#activblog a:focus,
body#page-aContact #nav-tabs li#activblog a:focus /* je force le survol et le focus sur l onglet blog quand je suis sur les pages*/
{
    background-position: 0 82px;
}

body li#activblog a, /* l onglet blog est eclaire tout le temps, et je precise les exceptions pour les pages par la suite*/
#nav-tabs li#activblog a:hover, #nav-tabs li#activblog a:focus, /* corrige le fait que le roll over de l onglet marche quand cet onglet est actif */
body#page-aPortfolio #nav-tabs li#activportfolio a,
body#page-aPrestations #nav-tabs li#activprestations a,
body#page-aTéléchargements #nav-tabs li#activtelechargement a,
body#page-aSandeeDesign #nav-tabs li#activsandeedesign a,
body#page-aContact #nav-tabs li#activcontact a
{
    background-position: 0 163px;
} 	/* mets les onglets des pages actives en blanc*/

body#page-aPortfolio #nav-tabs li#activblog a,
body#page-aPrestations #nav-tabs li#activblog a,
body#page-aTéléchargements #nav-tabs li#activblog a,
body#page-aSandeeDesign #nav-tabs li#activblog a,
body#page-aContact #nav-tabs li#activblog a
{
    background-position: 0 0;
} /* empeche l onglet blog d'etre allume sur les pages*/

#nav-tabs li a span.menu-item
{
	line-height: 45px;
}

#nav-tabs li a span.menu-item-def
{
    font-size: 0.5em;
	position: absolute;
    top: 38px;
    left: 18px;
}



Merci par avance, je cale là.... Smiley ohwell

Sandee
Modifié par sandee (07 Sep 2009 - 13:05)
Je viens de tester à nouveau sans les images, et mes roll-overs et états actifs sont nickels. L'erreur viendrait donc de l'appel de mes images.

Je pense pouvoir placer mon coin supérieur droit en rajoutant un span... Mais bon, c'est crado, je préfèrerai trouver une solution où je n'aurais pas à toucher à l'html...

Des idées ??? Smiley biggrin
Modifié par sandee (20 Aug 2009 - 14:34)
Sujet clos
Aller à