[RESOLU] CSS: Tentative de ul li ul li ul li ...

Marsien, au secours !!!

 

Euh, je n'ai pas eu le temps de me pencher sur ton problème. Il devient quand même complexe ^^

Promis, j'essaie de voir ça d'ici la fin de semaine. Je ne te laisserai pas tomber sans avoir au moins essayé de trouver ce qui cloche  

arf, t'es un amour  
merci.
Mais en fait, je viens de régler le problème, et ma solution peut servir à d'autres s'ils recontrent lês mêmes difficultés:
J'ai donc 3 ul (menus) dont 2 en sous-menus (ul2 et ul3).
Le premier ssmenu ul2 était caché par l'attribut

display: none;

puis était affiché par

display: block;

.
Pour le deuxième ssmenu ul3, j'ai voulu réitérer le code, mais ça ne marchait pas. Va savoir pourquoi!
Alors j'ai pensé à la fonction

visibility: hidden;

et

visibility: visible;

.
Je n'aime pas trop utiliser cette fonction pour un menu en général car meme si le menu est hidden, l'espace qu'il prendra est déjà réservé et est affiché. Enfin bref, j'ai du utiliser deux fonctions différentes pour obtenir le même résultat à chaque fois.
A bon entendeur...

Alors j'ai un sushi: dans le menu => "quelques liens" on remarque dans le sousmenu un décalage de 3px de la deniere ligne. Qu'est-ce? comment se fesse   ? Qu'ai-je donc fait pour mériter cela ?
code CSS ici
Merci.

C'est le seul menu qui decends aussi bas dans la page, y'a ptet un truc à voir de ce côté là ...

Alors j'ai fait un test, j'ai décalé mes rubriques pour voir et c'est bizarre, mais le décalage reste sur "quelques liens" et n'apparait pas sur "photos".
Bizarre bizarre ...
Ca vient du li qui génère un ul, donc il y doit y avoir une interaction de ce coté là, mais je ne vois pas de quoi il s'agit...

Tu n'as pas un saut de ligne en fin d'intitulé ou un caractère à la noix ?

Nan, je crois pas:

<div id="menu">

	<ul>

		<li class="bordurebas"><a href="/index.php">Accueil</a></li>

		<li class="bordurebas"><a href="/CV/index.php">Curriculum Vitae</a></li>

		<li class="bordurebas"><a href="/stages/index.php">Stages</a>

			<ul>

				<li class="pasborduregauche"><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC (CNRS)</a></li>

				<li class="borduregauche"><a href="/stages/FEDERALMOGUL/index.php">Federal-Mogul</a></li>

			</ul>

		</li>

		<li class="bordurebas"><a href="/musique/index.php">Musique</a></li>

		<li class="bordurebas"><a href="/archives/index.php">Archives</a>

			<ul>

				<li class="pasborduregauche"><a href="/archives/fevrier2007/fevrier2007.php">Février 2007</a></li>

				<li class="borduregauche"><a href="/archives/index.php">Toutes les archives</a></li>

			</ul>

		</li>

		<li class="bordurebas"><a href="/guestbook/index.php">Livre d'Or</a></li>

		<li class="bordurebas"><a href="/photos/index.php">Photos</a>

			<ul>

				<li class="pasborduregauche"><a href="/photos/animaux/index.php">Animaux</a></li>

				<li class="borduregauche"><a href="/photos/macro/index.php">Mode Macro</a></li>

				<li class="borduregauche"><a href="/photos/paysages/index.php">Paysages</a></li>

				<li class="borduregauche"><a href="/photos/personnages/index.php">Les Potes</a></li>

				<li class="borduregauche"><a href="/photos/poissy/index.php">Poissy</a></li>

				<li class="borduregauche"><a href="/photos/stgermain/index.php">St Germain en Laye</a></li>

				<li class="borduregauche"><a href="/photos/vauxsurseine/index.php">Vaux sur Seine</a></li>

			</ul>

		</li>

		<li class="bordurebas"><a href="/liens/index.php">Quelques Liens</a>

			<ul>

				<li class="pasborduregauche"><a href="/clio/index.php">Clio III à vendre</a></li>

				<li class="borduregauche"><a href="<a href="http://jeanmarion.free.fr" target="_blank">http://jeanmarion.free.fr</a>" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka 2005</a></li>

				<li class="borduregauche"><a href="<a href="http://duckyduck.free.fr" target="_blank">http://duckyduck.free.fr</a>" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos - Jeux ...</a></li>

				<li class="borduregauche"><a href="<a href="http://www.presence-pc.com/forum" target="_blank">http://www.presence-pc.com/forum</a>" target="_blank" title="<a href="http://www.presence-pc.com/forum" target="_blank">www.presence-pc.com/forum</a>">Forum presence-pc</a></li>

				<li class="borduregauche"><a href="<a href="http://www.rs-team.org" target="_blank">http://www.rs-team.org</a>" target="_blank" title="<a href="http://www.rs-team.org" target="_blank">www.rs-team.org</a>">Asso Renault Sport</a></li>

				<li class="borduregauche"><a href="#">Free music online</a>

					<ul>

						<li class="pasborduregauche"><a href="<a href="http://www.pandora.com" target="_blank">http://www.pandora.com</a>" target="_blank">Pandora</a></li>

						<li class="borduregauche"><a href="<a href="http://www.last.fm" target="_blank">http://www.last.fm</a>" target="_blank">Last.fm</a></li>

					</ul>

				</li>

			</ul>

		</li>

		<li><a href="/contact/index.php">Contact</a></li>

	</ul>

</div>

Up !

Bon, ben si personne ne peut m'aider, je vais aller voir si je peux trouver une ame charitable sur HFR...

Désolé Dartyduck. En ce moment, je n'ai pas beaucoup de temps à consacrer au forum. Et J&P ne vient plus... Les "programmeurs" Web se font donc rares par ici en ce moment. J'espère que quelqu'un te viendra en aide sur HFR. SInon, dès que j'ai un peu de temps je jette un oeil  


PS : tu sais que ton menu déconne carrément sur Firefox ? Pourtant il marchait bien avant... Courage  

oups... je vais voir ca tout de suite !

Probleme de déconne presque réglé sous FF, je vois pas d'ou ca peut venir. Probleme sous IE completement réglé, et franchement je ne saurais pas dire ce que j'ai exactement fait pour le régler... Mais c'est fait.
Reste FF... Si quequ'un a une piste, je suis tout ouï.

Salut Dartyduck,

Je viens de jeter un oeil à ton menu. En voilà une version qui marche sous FF et IE7.


Dans le head :

<link href="menu.css" rel="stylesheet" type="text/css" />

<!--[if IE]>

   page CSS conditionnelle pour IE.

   <link href="menu-ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

Dans le body :

<div id="menu">

			<!-- Début niveau 1 -->

			<ul>

				<li class="bordurebas"><a href="/index.php">Accueil</a></li>

 
				<li class="bordurebas"><a href="/CV/index.php">Curriculum Vitae</a></li>

				<li class="bordurebas"><a href="/stages/index.php">Stages</a>

					<!-- Début niveau 2.1 -->

					<ul>

						<li class="pasborduregauche"><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC (CNRS)</a></li>

						<li class="borduregauche"><a href="/stages/FEDERALMOGUL/index.php">Federal-Mogul</a></li>

					</ul>

					<!-- Fin  niveau 2.1 -->

				</li>

				<li class="bordurebas"><a href="/photos/index.php">Photos</a>

					<!-- Début niveau 2.2 -->

					<ul>

						<li class="pasborduregauche"><a href="/photos/animaux/index.php">Animaux</a></li>

						<li class="borduregauche"><a href="/photos/macro/index.php">Mode Macro</a></li>

						<li class="borduregauche"><a href="/photos/paysages/index.php">Paysages</a></li>

						<li class="borduregauche"><a href="/photos/personnages/index.php">Les Potes</a></li>

 
						<li class="borduregauche"><a href="/photos/poissy/index.php">Poissy</a></li>

						<li class="borduregauche"><a href="/photos/stgermain/index.php">St Germain en Laye</a></li>

						<li class="borduregauche"><a href="/photos/vauxsurseine/index.php">Vaux sur Seine</a></li>

					</ul>

					<!-- Fin  niveau 2.2 -->

				</li>

				<li class="bordurebas"><a href="/musique/index.php">Musique</a></li>

				<li class="bordurebas"><a href="/liens/index.php">Quelques Liens</a>

					<!-- Début niveau 2.3 -->

					<ul>

						<li class="pasborduregauche"><a href="/clio/index.php">Clio III à vendre</a></li>

						<li class="borduregauche"><a href="<a href="http://jeanmarion.free.fr" target="_blank">http://jeanmarion.free.fr</a>" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka 2005</a></li>

						<li class="borduregauche"><a href="<a href="http://duckyduck.free.fr" target="_blank">http://duckyduck.free.fr</a>" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos - Jeux ...</a></li>

						<li class="borduregauche"><a href="<a href="http://www.presence-pc.com/forum" target="_blank">http://www.presence-pc.com/forum</a>" target="_blank" title="<a href="http://www.presence-pc.com/forum" target="_blank">www.presence-pc.com/forum</a>">Forum presence-pc</a></li>

						<li class="borduregauche"><a href="<a href="http://www.rs-team.org" target="_blank">http://www.rs-team.org</a>" target="_blank" title="<a href="http://www.rs-team.org" target="_blank">www.rs-team.org</a>">Asso Renault Sport</a></li>

 
						<li class="borduregauche"><a href="#">Free music online</a>

							<!-- Début niveau 3.1 -->

							<ul>

								<li class="pasborduregauche"><a href="<a href="http://www.pandora.com" target="_blank">http://www.pandora.com</a>" target="_blank">Pandora</a></li>

								<li class="borduregauche"><a href="<a href="http://www.last.fm" target="_blank">http://www.last.fm</a>" target="_blank">Last.fm</a></li>

							</ul>

							<!-- Fin niveau 3.1 -->

						</li>

					</ul>

					<!-- Début niveau 2.3 -->

				</li>

				<li class="bordurebas"><a href="/archives/index.php">Archives</a>

					<!-- Début niveau 2.4 -->

					<ul>

						<li class="pasborduregauche"><a href="/archives/fevrier2007/fevrier2007.php">Février 2007</a></li>

						<li class="borduregauche"><a href="/archives/index.php">Toutes les archives</a></li>

					</ul>

					<!-- Fin niveau 2.4 -->

				</li>

				<li class="bordurebas"><a href="/guestbook/index.php">Livre d'Or</a></li>

				<li><a href="/contact/index.php">Contact</a></li>

			</ul>

			<!-- Fin niveau 1 -->

		</div>

La feuille CSS générale du menu :

#menu {

	margin: 30px 0 0 20px;

	font-family: Arial, Verdana;

	font-size: 12px;

	float: left;

	}

 
#menu ul {

	list-style-type: none;

	margin: 0;

	padding: 0;

	width: 130px;

	border-top: 1px solid #004B8A;

	background: #fff;

	color: #000;

	}

 
#menu ul li {

	border-bottom: 1px solid #004B8A;

	padding: 2px 0 2px 10px;

	}

 
#menu ul li ul {

	position: absolute;

	left: 140px;

	display: none;

	margin: -18px 0 0 0;

	width: 140px;

	border-top: 1px solid #004B8A;

	border-left: 1px solid #004B8A;

	border-bottom: 2px solid #004B8A;

	border-right: 2px solid #004B8A;

	}

 
#menu .pasborduregauche {

	margin-left: -1px;

	border-left: 1px solid #fff;

	}

 
#menu ul li:hover ul {

	display: block;

	}

 
#menu ul li ul li {

	border: none;

	}

 
#menu ul li ul li ul {

	visibility: hidden;

	width: 110px;

	}

 
#menu ul li ul li:hover ul {

	visibility: visible;

	}

 
#menu a {

	text-decoration: none;

	background: #fff;

	color: #000;

	}

 
#menu a:hover {

	text-decoration: underline;

	}

Et la feuille conditionnelle pour IE (elle rétablit la position vertical du premier niveau de sous-menu) :

#menu ul li ul {

	margin: -1px 0 0 0;

	}

Wow ! Bon ben je vais essayer ça dès demain, parce que là je suis sur mon pc portable pro avec IE6, donc pas possibilité d'essayer avec.
Je te tiens au courant.
Merci.

Cool, harmonisation réussie. Mais je retrouve mon décalage de 3px an bas de mon 1° sous menu. C'est à cause du <li>Free music online</li> car que je le décale le trou de 3px le suit... Je suis découragé là.

C'est bizarre, je n'est pas ce souci avec ma version testée en local... Tu as changé quoi par rapport au css que je t'ai fourni ci-dessus ? Et ce problème n'existe que sous IE.

Alors en fait ton truc ne marche pas si bien sous IE, et pourtant j'ai tout fait comme tu m'as dit (cop/col)
Sur la page d'acueil, tout marche bien. Mais des qu'on change de page, le menu redéconne, bizarre.
Ensuite, le brobleme du décalage dans le sous-menu, ça vient d'un float:left; qu'il fallait mettre au #menu ul li ul li.

wai, ben nan en fait. Je viens de retourner sur mon site et là, oh stupeur ! tout est bien normal. Alors que je n'ai rien touché depuis tout à l'heure! 'y comprends rien, mais c'est parave puisque maintenant ça marche...
Et pour ce qui d'harmoniser IE et FF, j'avais réussi à régler le pb du positionnement horizontal: j'ai mis tous mes margin à 0 et positionné avec un left à 120px. Et tu m'as aidé à régler le positionnement vertical.
Merci à toi.

(
Il est faché ?
)

Je dirais plutôt lassé par les "comiques" qui passent sur les forum... Mais étant toujours dans les parages (même si c'est incognito), je lui laisse, s'il le souhaite, s'expliquer sur ses raisons