Personnalisation css

Aide générale [Réglé] Personnalisation css menu_header

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Le 25/01/2014 à 22h45

Bonsoir ..

Je sais pas si tu te souviens de mon ancienne demande Swan, mais j'aurai besoin d'une mise à niveau sur le menu_header (menu au dessus de ma bannière et menu que tu dispose je pense bien).

J'explique ma demande :

Sous firefox, Chrome et IE 10 / IE 11, je n'ai jamais le même affichage .. Le réglage pour IE ne fonctionne pas (ou plus).

J'aimerai, dans la mesure du possible, dépouiller ce CSS, car honnêtement, je ne m'en sors pas du tout :/ .. Quand je parle de dépouiller, c'est par exemple tout départager comme un CCS "normal", y compris l'image "navigation_sprites" (voir l'image ci-dessous) qui comporte plusieurs couleurs et qui se règle difficilement avec des 5px -3px .... Le principale reste surtout que le menu s'adapte correctement au dessus de la bannière sur tous les navigateurs ..

Est-ce possible ? :O

Si c'est le cas, merci par avance ..

Voici l'image :

Voici le code CSS :

Code CSS :

/* Slide menu dynamique multi-niveaux à onglets CSS3 */
/* Crée par Auto Caradisiac */
/* Revu par Chez-swan.Net */
 
@media screen, projection { /** header **/
.position{position:relative; z-index:100000;}
}
 
@media screen, projection { /**Navigation principale**/
 
.lev1 {font-size:1.3em; margin-top:0; position:absolute; bottom:0; margin-bottom:-7px; margin-bottom:-7px9; *margin-bottom:-7px;} /* monte ou baisse les onglets */
:root .lev1 {margin-bottom:-4px /IE9;} /* Monte ou descend les onglets sous IE */
.lev1 ul{position:relative; padding-left:12px;*/ z-index:999999; _zoom:1;} /* Recule l'interieur des onglets */
.lev1 ul:after{content:""; display:block; clear:both;}
.lev1 li{float:left; padding-left:14px;} /* Espacement entre les onglets */
.lev1 li img{margin:4px 9px 4px 5px; margin:09; padding:4px 9px 4px 5px9; background:url(images/menu_header/navigation_sprites.png) no-repeat 100% -66px9;z /* IE, padding a la place du margin, pour afficher le sprite de l'onglet sur le fond de l'image */}
.lev1 ul.noJs > li:hover .nv_tabContent {display:block;} /* -> Selecteur directs (non compatible IE6) */
.lev1 a {color:#FFFFFF; text-decoration:none; background:url(images/menu_header/bgd_lev1Off.png) top repeat-x; display:inline-block; padding-left:4px; border:#666666 solid 1px; border-bottom-width:0; border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0;border:none9; background:url(images/menu_header/navigation_sprites.png) no-repeat -9px 09; /* IE, sprites plutot que css3 pour les bords arrondis*/}
.lev1 ul.noJs > li:hover > a,
.lev1 a:hover,
.lev1 .current > a{color:#333333; background:url(images/menu_header/bgd_lev1On.png) top repeat-x; background:url(images/menu_header/navigation_sprites.png) no-repeat 1px 09; /* IE, sprites plutot que css3 pour les bords arrondis*/}
.lev1 .reservationEssai:hover {border-style:solid;}
.lev1 ul li.js_IE6Hover a,
.lev1 a:hover,
.lev1 .current a{_color:#00336e; _background:url(images/menu_header/navigation_sprites.png) no-repeat 1px 0; text-decoration:none;} /* IE6 */
.lev1 ul li.js_IE6Hover .nv_tabContent a {color:#3c3c3c; background:none;}
.lev1 strong{text-transform:uppercase; display:inline-block; padding:4px 10px 0 7px; height:18px; font-weight:bold; cursor:pointer; background:url(images/menu_header/navigation_sprites.png) no-repeat 100% -66px9; padding-top:4px9; height:21px9; /* IE, sprites plutot que css3 pour les bords arrondis*/}
.lev1 .current .reservationEssai strong,
.lev1 li:hover a strong,
.lev1 a:hover strong,
.lev1 .current strong,
.lev1 a:hover img,
.lev1 .current img {background:url(images/menu_header/navigation_sprites.png) no-repeat 100% -33px;}
 
/* Sous menus  */
 
.lev1 li .nv_tabContent{position:absolute; top:22px; left:0; display:none; width:1000px; padding:12px 0 0 0; border:#000000 solid 1px; border-top-color:#FFFFFF;  background:url(images/menu_header/bgd_tabContent.png) left top repeat-x; background-color:#FFFFFF;}
.nv_tabContent .tabBottomColor{background:url(images/menu_header/bgd_tabBottomColor.png) left bottom repeat-x; overflow:hidden; _overflow:visible; _zoom:1; padding:0 4px 12px 4px;}
.tabContentSeparateur1{background:url(images/menu_header/bgd_tabContentSeparateur.png) left bottom repeat-y; overflow:hidden; _overflow:visible; _zoom:1; background-position:-473px -1px;}
.tabContentSeparateur2{background:url(images/menu_header/bgd_tabContentSeparateur.png) left bottom repeat-y; overflow:hidden; _overflow:visible; _zoom:1; background-position:-237px -1px;}
.tabContentSeparateur3{background:url(images/menu_header/bgd_tabContentSeparateur.png) left bottom repeat-y; overflow:hidden; _overflow:visible; _zoom:1; background-position:-1px -1px;}
.nv_tabContent ul{float:left;}
.nv_tabContent li{float:none; padding-right:1px;}
.nv_tabContent li a{background:none; border-radius:0; -moz-border-radius:0; border:none; color:#000000; width:200px; padding:2px 0 2px 7px;}
.nv_tabContent li span {display:inline-block; padding:2px 0 2px 7px; color:#000000;}
.nv_tabContent li a:hover,
.lev1 ul li.js_IE6Hover .nv_tabContent a:hover {background:none; background-color:transparent; color:#c02b2b;}
.nv_tabContent .itemSepar{background:url(images/menu_header/bgd_tabContentSeparateurH.png) 27px 0 no-repeat; margin-top:5px; padding-top:10px;}
 
}
 
@media not all and (-webkit-min-device-pixel-ratio:0) {  /** hack Opera **/
    .lev1 {margin-bottom:0;}
}
 
 
@media screen, projection {
 
.lien {float:right; background:#E4E6E8 url(/img_site/bgd_lien.png) repeat-x; padding-right:5px;}
.lien a {font-size:1.3em; background:url(/img_site/pict_puces.png) no-repeat right -676px; display:inline-block; padding:6px 30px 6px 20px;}
.lien .bordArrondi { background:url(/img_site/bgd_bordArrondi.png) no-repeat;}
 
}
ol, ul {
    list-style: none outside none;
}

Edité par m-ickael Le 25/01/2014 à 22h47

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 26/01/2014 à 11h01

Bonjour,

Il va me falloir du temps pour regarder le code et le remplacer par des couleurs .. Ne soit pas pressé ^^

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 26/01/2014 à 11h46

Non non .. Je veux juste savoir si c'est possible ..

As tu vu les différences sur les navigateurs?

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 26/01/2014 à 12h45

Déjà en simplfiant le code des images par des codes couleur, cela devrait s'améliorer, vu qu'il n'y auras plus les positions.

j'installe IE 11 pour voir .. Mais sous Chrome et sous Firefox, j'ai pas de soucis ..

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 26/01/2014 à 16h52

Sous chrome j'en ai (plus bas) regarde sur mon site

planet-truck.fr

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/02/2014 à 14h22

Je remonte le sujet sur demande

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 08/02/2014 à 18h55

Alors je viens de regarder le code , il est vrai que tu peux l'optimiser encore .. en supprimant ce que tu n'utilise plus, comme le class="itemSepar" de la balise <li> ...

Soit le <li class="itemSepar"> dans ton menu du header.tpl
Que tu peux remplacer dans le code par deux ou trois balises rapides comme <br /><hr/><br />

Et en remplacant le code css suivant à la ligne ~39 dans ton menu_header.css :

Code CSS :

.nv_tabContent .itemSepar{background:url(images/menu_header/bgd_tabContentSeparateurH.png) 27px 0 no-repeat; margin-top:5px; padding-top:10px;}

Par :

Code CSS :

hr {background-color:#CCCCCC; width:150px; height: 1px;}

Ensuite, je trouve que tu as bien allégé le menu tout de même ..

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/02/2014 à 20h12

Coucou

Je n'ai pas de " <li class="itemSepar"> " dans mon header.tpl

J'ai changé ce que tu m'as dis dans le css, mais je ne vois aucune amélioration concernant le "flottement" différent entre les navigateurs ..

Sous firefox 26.0 rien à redire (même si j'aimerai changé les images, mais avec les images de type "psd" je ne peux pas .. Ce n'est pas dans mes compétences.

Sous ie11 le menu est bien plus bas, et sous chrome aussi .. Je ne comprends pas pourquoi.

Merci

planet-truck.fr

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/02/2014 à 21h17

Re Swan ..

Regarde par ici : http://www.outils-web.com/script-html-css-menu/grande-contenance-2/#.UvaQ87QUCok

J'ai essayé de l'intégré, mais le fond de mon site disparait .. J'ai du faire un loupé (J'ai bien intégré le CSS vu qu'il fonctionne, mais la taille j'arrive pas à régler).

Bref, tout ça pour dire que c'est exactement ce que je cherche comme menu "personnalisable" facilement.

C'est une simple idée ..

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 08/02/2014 à 21h28

Alors j'ai bien trouvé le soucis , c'est le margin-bottom:-7px; du .lev1 .. le soucis étant de trouver un hack css adapté pour chrome et IE 11 maintenant ..

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/02/2014 à 21h31

D'accord .. As tu vu mon dernier message concernant un exemple de menu?

ça a l'air simple au premier coup d’œil ..

planet-truck.fr

Site web

Swan

Administrateur

Rang

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 08/02/2014 à 22h09

*Tu as une archive du menu ?

J'ai l'archive, je jette un coup d'oeil !

swan_signature

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 08/02/2014 à 22h56

planet-truck.fr

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 09/02/2014 à 14h03

Après X test, je compte tout de même garder le menu actuel ..

Donc je demande toujours de l'aide pour ce fameux CSS .. Mais pour plus de précision dans ma demande, voici une liste :o

- Supprimer les fichiers de type PSD (Comme navigation_sprite.png) pour des images unique pour chaque onglets (donc onglet 1 = class=xxxxx onglet 2 = class=yyyyy)

- Supprimer les positions entre onglets, ou monter / descendre .. Autant que ce soit fixe pour éviter des décalages comme c'est le cas actuellement.

Ma demande concerne en réalité que les onglets. Les sous menus, c'est parfait à mon goût. C'est juste que le CSS actuel, est très compliqué.

A voir si cela est possible :/

Merci encore.

planet-truck.fr

Site web

m-ickael

EDN Maitre-Sage

Rang

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 19/02/2014 à 09h52

planet-truck.fr

Site web

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Les 10 derniers messages du forum...