Coins arrondis dans un menu déroulant mixte ...

Question

JulesB

14 Jul 2006 à 03:16

Bonjour à tous !

Voici mon problème: j'ai un menu déroulant horizontalo-vertical qui marche très bien, auquel j'ai essayé d' ajouter des coins arrondis grâce à la technique décrite ici.
Seulement voilà: mes sous-sous-menus doivent pouvoir se placer soit à droite soit à gauche de leur parent, or lorsque j'utilise les coins arrondis, je n'ai plus accès au sous-sous-menus !
Exemple sur cette page, le menu "Le Collectif" et ses sous menus fonctionnent bien, tandis que les sous-menus du menu "Galeries" ne fonctionnent pas...

Quelqu'un aurait-il une piste ?

Voici le code HTML:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
	</head>
	<body>
		<div id="container">
			<div id="header">
			</div>
			<div class="menu">
				<ul>
					<li>
						<a class="drop" href="#">
							Le Collectif 
<!--[if IE 7]><!-->
						</a>
<!--<![endif]-->
						<table>
							<tr>
								<td>
									<ul>
										<li>
											<a href="#" title="#">
												Manifeste
											</a>
										</li>
										<li>
											<a href="#" title="#">
												Historique 
											</a>
										</li>
										<li>
											<a href="#" title="#">
												Presse
											</a>
										</li>
										
										<li class="curvy">
											<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
											<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>
											<a href="#" title="#">
												Qui ? 
<!--[if IE 7]><!-->
											</a>
<!--<![endif]-->
											<table>
												<tr>
													<td>
														<ul>
															<li class="curvy">
																<div class="coinHautGauche"><div class="quadHautGauche">&bull;</div></div>
																<div class="coinHautDroite"><div class="quadHautDroite">&bull;</div></div>
																<a href="#" title="#">
																	Les Peintres
																</a>
															</li>
															<li>
																<a href="#" title="#">
																	Les Musiciens
																</a>
															</li>
															<li class="curvy">
																<div class="coinBaGauche2"><div class="quadBaGauche">&bull;</div></div>
																<div class="coinBaDroite2"><div class="quadBaDroite">&bull;</div></div>
																<a href="#" title="#">
																	Les Groupes Affili&eacute;s
																</a>
															</li>
														</ul>
													</td>
												</tr>
											</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
										</li>
									</ul>
								</td>
							</tr>
						</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
					</li>
					<li>
						<a href="#">
							Actualit&eacute;s 
<!--[if IE 7]>-->
						</a>
<!--<![endif]-->
						
					</li>
					<li>
						<a href="#">
							Travaux R&eacute;cents
<!--[if IE 7]><!-->
						</a>
<!--<![endif]-->
						<table>
							<tr>
								<td>
									<ul>
										<li>
											<a href="#" title="#">
												Les Louises Acousmatiques
											</a>
										</li>
										<li>
											<a href="#" title="#">
												Octobre 2005
											</a>
										</li>
										<li class="curvy">
												<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
												<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>
											<a href="#" title="#">
												Juillet 2005
											</a>
										</li>
									</ul>
								</td>
							</tr>
						</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
					</li>
					<li>
						<a href="#" title="#">
							Galeries 
<!--[if IE 7]><!-->
						</a>
<!--<![endif]-->
						<table>
							<tr>
								<td>
									<ul>
										<li>
											<a href="#" title="#">
												Peintures
<!--[if IE 7]><!-->												
											</a>
<!--<![endif]-->										
											<table>
												<tr>
													<td>
														<ul class="left">
															<li class="curvy">
																<div class="coinHautGauche"><div class="quadHautGauche">&bull;</div></div>
																<div class="coinHautDroite"><div class="quadHautDroite">&bull;</div></div>
																<a href="#" title="#">
																	Galerie 01
<!--[if IE 7]><!-->																		
																</a>
<!--<![endif]-->												
																<table>
												<tr>
													<td>
														<ul class="left">
															<liclass="curvy">
																<div class="coinHautGauche"><div class="quadHautGauche">&bull;</div></div>
																<div class="coinHautDroite"><div class="quadHautDroite">&bull;</div></div>
																<a href="#" title="#">
																	Sous-Galerie 01
																</a>
																
															</li>
															<li>
																<a href="#" title="#">
																	Sous-Galerie 02
																</a>
															</li>
															<li class ="curvy">
																<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
																<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>
																<a href="#" title="#">
																	Sous-Galerie 03
																</a>
															</li>
														</ul>
													</td>
												</tr>
											</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
															</li>
															<li>
																<a href="#" title="#">
																	Galerie 02
																</a>
															</li>
															<li class="curvy">
																<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
																<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>
																<a href="#" title="#">
																	Galerie 03
																</a>
															</li>
														</ul>
													</td>
												</tr>
											</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
										</li>
										<li>
											<a href="#" title="#">
												Photos
											</a>
										</li>
										<li>
											<a href="#" title="#">
												Sons
											</a>
										</li>
										<li class="curvy">
											<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
											<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>	
											<a href="#" title="#">
												Videos
											</a>
										</li>
									</ul>
								</td>
							</tr>
						</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
					</li>
					<li>
						<a href="#" title="#">
							Nous Contacter 
<!--[if IE 7]><!-->
						</a>
<!--<![endif]-->
						<table>
							<tr>
								<td>
									<ul>
										<li>
											<a href="#" title="#">
												email
											</a>
										</li>
										<li>
											<a href="#" title="#">
												Forum
											</a>
										</li>
										<li class="curvy">
												<div class="coinBaGauche"><div class="quadBaGauche">&bull;</div></div>
												<div class="coinBaDroite"><div class="quadBaDroite">&bull;</div></div>
											<a href="#" title="#">
												Livre D'Or
											</a>
										</li>
									</ul>
								</td>
							</tr>
						</table>
<!--[if lte IE 6]>
</a>
<![endif]-->
					</li>
					<li>
						<a href="#" title="#">
							Liens 
<!--[if IE 7]><!-->
						</a>
<!--<![endif]-->
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Et la CSS:

/* general styles */

body {
	background: #000000;
}

#container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:900px;
	height:auto;
	margin-top: 0;
	background: #000;
	padding-top: 0;
}
/* Header */
#header {
	position:relative;
	width:900px;
	height:200px;
	background: url(../images/header.jpg) no-repeat;
}

/*<group=Menu>*/

/* MENU */
.menu {
font-family: verdana, sans-serif; 
width:900px; 
position:relative; 
font-size:0.85em;
padding-bottom:250px;
	background: url(../images/menu-bg.gif) repeat-x;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}

/*Niveau 01*/

.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color: #e6e6e6; 
text-shadow:4px 4px 2px #000000;
width: 139px; 
height: 40px; 
border:1px solid #000; 
border-width:1px 1px 0 0; 
padding-left:10px;
	text-align: center;
	font-weight: normal;
	line-height: 2.5em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul,
.menu ul li ul li ul {
display: none;
}
table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#ffffff; 
text-shadow:1px 1px 5px #ffffff;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:3em;
margin-top:1px;
left:0; 
width:150px;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:1px;
}
/* cache les sous-menus*/
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; 
position:absolute; 
height:0; 
width:0;
}
.menu ul li:hover ul li:hover ul li ul,
.menu ul li a:hover ul li:hover a ul li a {
visibility:hidden; 
position:absolute; 
height:0; 
width:0;
}

/* SubMenu 01 */

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background: #571012; 
color:#e6e6e6; 
text-shadow:4px 4px 2px #000000;
height:auto; 
line-height:1.2em; 
padding:5px 10px; 
width:129px;
}
* html .menu ul li a:hover ul li a {
width:150px;
w\idth:129px;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
color: #ffffff;
text-shadow:  1px 1px 5px #ffffff;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:149px; 
top:0;
width:150px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-149px;
}
/*Deeper*/

.menu ul li:hover ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:149px; 
top:0;
width:150px;
}

.menu ul li:hover ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul li a:hover ul.left {
left:-149px;
}

.bagoch {
	background: no-repeat url(../images/bas_gauche.gif) #ffffff;
	position: relative;
}

.badroite {
	background: no-repeat url(../images/bas_droite.gif) #ffffff;
	position: relative;
}

/* Coins ronds  */

.curvy {
	position:relative;  
}

.coinBaGauche, .coinBaDroite, .coinHautGauche, .coinHautDroite, .coinBaGauche2, .coinBaDroite2 {
	position:absolute; 
	width:20px; 
	height:25px; 
	background:#000;
	overflow:hidden;

}

.coinBaGauche {
	top: 6px;
	left:0px;

}
.coinBaDroite {
	top: 6px;
	 left: 129px;
}
.coinBaGauche2 {
	top: 22px;
	left:0px;

}
.coinBaDroite2 {
	top: 22px;
	 left: 129px;
}
.coinHautGauche{
	top:0px; 
	left:0px;
}
.coinHautDroite{
	top:0px; 
	left:129px;
}

.quadBaGauche, .quadBaDroite,.quadHautGauche, .quadHautDroite,.quadBaGauche2, .quadBaDroite2 {
	position:absolute; 
	font-size:150px; 
	font-family:arial; 
	color: #571012;
	line-height:40px;
}
.quadBaGauche{
	left:-8px; 
	top:-17px;
}
.quadBaDroite{
	left:-25px; 
	top:-17px;
}
.quadHautGauche{
	left:-8px;
	top: 1px;
}
.quadHautDroite{
	left:-25px;
	top: 1px;
}		
/*</group>*/

Modifié par JulesB (14 Jul 2006 - 06:37)

Laurent Denis

14 Jul 2006 à 08:36

Bonjour,

A vrai dire, cette technique de coins arrondis est plutôt à éviter:
- contenu dégradé (les "bullets")
- rendu totalement dépendant de la police et de la taille des caractères utilisateur (un petit rien de différence avec ce qui est prévu suffit à placer n'importe comment les fameux coins)

La solution optimale, mais déchirante ( Smiley cligne

) est de s'en tenir aux coins arrondis via la seule propriété CSS border-radius, pour les navigateurs qui l'implémentent, et d'y renoncer pour les autres.

Si ce renoncement est vraiment trop cruel, les coins arrondis peuvent être réalisés avec des éléments <span> réellement vides (le mode d'emploi traîne un peu partout dans ce forum).

Enfin, pour ce qui est du menu déroulant lui-même... Il n'est pas vraiment fonctionnel, en fait : lui aussi a du mal avec l'agrandissement des tailles de caractères, par exemple.

Et puis, trois niveaux, est-ce bien raisonnable et utile ? Les trois liens du sous-sous-menu "Qui ?" du premier item, par exemple, pourraient aisément être placés directement au second niveau. Le menu y gagnera largement en ergonomie et au moins un peu en accessibilité.

Je te suggère plutôt de t'orienter, en sachant que la solution idéale n'existe pas dans ce domaine, vers la récente proposition d'Aurélien Levy : http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1

JulesB

14 Jul 2006 à 11:39

Oui tu as raison pour les bullets, c'est pas très efficace, je vais chercher autre chose. Que pense tu de ça ?

Pour le menu-déroulant j'en connais beaucoup d'autres qui ne résistent pas à l'augmentation sauvage de la taille des caractères... Et oui j'ai besoin de trois niveaux car le site original contient un vrai dédale de galeries ! Cette solution est même beaucoup plus claire que la solution "classique"

De plus je rechigne toujours à utiliser ce genre de scripts, ça fait un peu "usine à gaz". Compare les poids des deux menus ! Cette page pèse déjà 32ko, imagine avec des bitmap ou du flash en plus. Pas très accessible pour les petits modems...
Je crois que je vais garder ce type de menu fullCSS...C'est un site d'artistes, donc de toute façon pour les mal-voyants c'est mal-barré. Smiley lol

As-tu des solutions pour le problème de redimensionnement ?

Merci beaucoup de ta réponse malgré le pâté de code que j'ai mis ! Smiley cligne

Modifié par JulesB (14 Jul 2006 - 11:40)

fvsch

14 Jul 2006 à 12:09

JulesB a écrit :
Cette page pèse déjà 32ko, imagine avec des bitmap ou du flash en plus. Pas très accessible pour les petits modems...

25ko dont 15ko de scripts, pour être précis.

Sujet clos

CSS et mise en forme, CSS3

Coins arrondis dans un menu déroulant mixte ...