28172 sujets

CSS et mise en forme, CSS3

Aide Urgente SVP, Menu à onglet compatible Fx et IE6

Bonjour à tous,
Encore une fois, j'ai besoin de votre aide, cela fait 3 jours que je planche dessus sans trouvé de résultats satisfaisant, j'ai établis un site sous spip et
j'ai adapté un menu à onglet déroulant en css, bien sur sous Fx,iceweasel,epiphany etc... je n'ai pas de problèmes Smiley lol parcontre avec IE6 il me reste un petit détail gênant.
Les onglets de sous menus n'ont pas la même hauteur que ceux des Onglets de rubrique racine, quelqu'un pourrait-il m'aider à résoudre ce problème urgent pour moi ? SVP.
[PS] Vous pouvez voir le résultat du menu sur mon site à cette adresse :
Mon site de test

Merci
Mon code css concernant le menu :
/* règlage du menu Horizontal */

.menu {float: left;font-family: Verdana, "Bitstream Vera Sans", Helvetica, Arial, sans-serif; width: 100%; background-color: #5C3566; color: inherit; background-image: url(82a1cd.png); font-size: 65%; padding: 0; margin: 0;}
.menu ul li a, .menu ul li a:visited {display: block;clear: none; text-decoration: none ;padding-left: 1em; padding-right: 1em; padding-top: 0.1em; padding-bottom: 0.1em; margin-bottom:1px; color: white; background-color: transparent; width: auto; border-right: #fff 1px solid;}
.menu ul {padding:0; margin:0; list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {visibility:hidden; position:absolute; z-index:80; left:-1px; top:1.48em;}
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;}
.menu ul li:hover a, .menu ul li a:hover {color:#000; background:#B4A0B7;}/*Onglets au survole */
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:26px; left:-3px;}/* Onglets sous-menus */
.menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}
.menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:150px; clear:both;left:1px;}/* Onglets de sous-menus */
.menu ul li:hover ul li:hover a.sub, .menu ul li a:hover ul li a:hover.sub {background:#B4A0B7; color:#000;}
.menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; top:0px; }/* Onglets de sous-sous-menus */
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#5C3566; color:#fff; width:100%; padding-left:10px;}/* Onglets de sous-menus*/
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#B4A0B7; color:#000;}/* Onglets sous-menu au survole */
.menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; left:171px; bottom:0;}
.menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {background:#5C3566; color:#fff;} /*Onglets de sous-sous-menu */
.menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {background:#B4A0B7; color:#fff;}
.menu ul li:hover ul.left, .menu ul li a:hover ul.left {left:-105px;}
.menu ul li:hover ul li:hover ul.left, .menu ul li a:hover ul li a:hover ul.left {left:-210px; width:209px;}

[i]Le squelette SPIP pour info seulement [/b](car je ne pense pas qu'il faille y toucher) Smiley fache :

<div id="cadrmenu">
	<div class="menu">
		<B_rubriques>
		<!--[if lte IE 6]><table><tr><td><![endif]-->

			<ul>
				<li id="logo_main" ><a href="#URL_SITE_SPIP/"><:accueil_site:><!--[if IE 7]><!--></a></li><!--<![endif]-->
					<BOUCLE_rubriques(RUBRIQUES) {par num titre, titre}{titre_mot=onglet}{lang}>
						<li><a href="#URL_RUBRIQUE"><b>[(#TITRE|supprimer_numero|couper{80})]</b><!--[if IE 7]><!--></a><!--<![endif]-->
							<B_sous_rubriques>
								<!--[if lte IE 6]><table><tr><td><![endif]-->
								<ul class="right_side">
									<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}{lang}>
										<li><a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}></BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]<!--[if IE 7]><!--></a><!--<![endif]-->
											<BOUCLE_re(BOUCLE_sous_rubriques)>
											</BOUCLE_re>
										</li>
									</BOUCLE_sous_rubriques>
		 						 </ul>
		 						 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</B_sous_rubriques>
						</li>
					</BOUCLE_rubriques>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</B_rubriques>
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li id="logo_main" ><a href="#URL_SITE_SPIP/"><:accueil_site:><!--[if IE 7]><!--></a></li><!--<![endif]-->
				<BOUCLE_rubriquesnormal(RUBRIQUES){racine} {par num titre, titre} {lang}>
					<li><a href="#URL_RUBRIQUE"><b>[(#TITRE|supprimer_numero|couper{80})]</b><!--[if IE 7]><!--></a><!--<![endif]-->		
						<B_sous_rubriquesnormal>
							<!--[if lte IE 6]><table><tr><td><![endif]-->
								<ul class="right_side">
									<BOUCLE_sous_rubriquesnormal(RUBRIQUES) {id_parent} {par num titre, titre}{lang}>
										<li><a href="#URL_RUBRIQUE" <BOUCLE_test_sousrubnormal(RUBRIQUES){id_parent}{0,1}></BOUCLE_test_sousrubnormal>>[(#TITRE|supprimer_numero|couper{80})]<!--[if IE 7]><!--></a><!--<![endif]-->
											<BOUCLE_renormal(BOUCLE_sous_rubriquesnormal)>
											</BOUCLE_renormal>
										</li>
									</BOUCLE_sous_rubriquesnormal>
		 						 </ul>
		 						 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
						</B_sous_rubriquesnormal>
					</li>
				</BOUCLE_rubriquesnormal>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		<//B_rubriques>
	</div>
</div>

Merci à tous
Modifié par Express (23 Jul 2008 - 07:48)
Salut,

a première vue il te faut juste etre un peu plus bavard et définir des width et height par ex pour tes (ul li ul#prout li {height:12px; overflow:hidden} ) ou n'importe quoi. Avec la ie dev toolbar cela fonctionne tt de suite.
Après, libre a toi de gerer tes espacements avec les paddings de chaque élément ou avec line-height .

@+
Tu m'excusera, mais je ne crois avoir bien compris ton(tes) explication(s) , et ie dev toolbar, je connais pas ... car j'utilise wine sous GNU/Linux.
Modifié par Express (23 Jul 2008 - 17:22)
c'est un peu l'équivalent de firebug pour firefox, cela te permet d'ajouter de la css en live sous ie6, aussi j'ai rajouté une hauteur de 12px; avec un overflow:hidden sur un li de l'un de tes sous menu et zou . Donc ton problème, semble t il, vient bien du fait que les valeurs (hauteurs en l'occurrence) ne sont pas définis sur tes éléments.
Fais une recherche sur 'Internet Explorer Developer Toolbar', une fois installée tu trouveras une petite fleche au dessus de la barre d'adresse pour 'editer' ...
Smiley smile
Oserai-je te demandé sur quel "li" tu as travaillé exactement STP, car ,je me répète, sous Wine je ne peux avoir accès à ce plugins qu'est ie dev toolbar, ce n'est pas une implémentation GNU/Linux wine.
Aussi si tu peux me donné l'indication précise de ce que tu as fais, cela m'évitera énormément de boulot de recherche ...

Infiniment
SLTS
sur l'un li de l'un des sous menu :
tu as des ul> li>ul#ss_menu>li et bien le dernier, ou utilise les héritages si tu veux la même hauteur à tous Smiley biggrin
zincou a écrit :
sur l'un li de l'un des sous menu :
tu as des ul> li>ul#ss_menu>li et bien le dernier, ou utilise les héritages si tu veux la même hauteur à tous Smiley biggrin


Je n'ai pas de ul> li>ul#ss_menu>li Smiley eek tu es sûr que c'est mon code que tu as lu Smiley lol
Elle est déjà hérité par cette ligne :
 .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#5C3566; color:#fff; width:100%; padding-left:10px;}/* Onglets de sous-menus*/

Je ne comprend vraiment pas ce a quoi tu veux en venir là ! désolé ...
Sujet clos
Aller à