18073 sujets

Questions générales et questions de débutants

[sans soluce actuelle]Afficher / Masquer des "calques" sans

Bonjour à tous !

Pas de problème, ça fonctionne super bien ... mais
J'essaye un petit "plus", à savoir ajouter des liens dans le div qui passe en display:block au survol.

Dès qu'un lien est présent dans ce div, le display:none d'origine ne fonctionne plus Smiley eek
Voici le test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<title>Test Afficher / Masquer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8889-1" />
	<style type="text/css">
	@charset: 'ISO-8859-1';
	* {
	margin:0;
	padding:0;
	}
	body {
	background:#5a5a5a;
	color:#ffc;
	font-family:Verdana, arial, sans-serif;
	font-size:0.8em;
	margin:0;
	padding:0;
	text-align:center;
	 }
	#menu {
	display:block;
	font-size:0.9em;
	text-align:left;
	} 	
	#menu a {
	color:#ffc;
	display:block;
	text-decoration:underline;
	width:100px;
	}
	#menu a:hover {
	background-color:#5a5a5a;
	color:#fff;
	}
	#menu a div {
	display:none;
	}
	#menu a:hover div {
	background-color:#5a5a5a;
	color:#fff;
	display:block;
	}
	</style>
</head>
<body>
	<div id="menu">
		<a href="">Menu1
		<div>
			<a href="">Test11</a>
			<a href="">Test12</a>
			<a href="">Test13</a>
			<a href="">Test14</a>
			<a href="">Test15</a>
		</div>
		</a>
		<a href="">Menu2
		<div>
			Test21<br />
			Test22<br />
			Test23<br />
			Test24<br />
			Test25<br />
		</div>
		</a>
	</div>
</body>
</html>


Une idée ?
Modifié par g41687 (10 Jun 2005 - 11:01)
Modérateur
g41687, le fait de changer un élément en type block ou inline en CSS ne fait pas en sorte que tu peux ignorer la règle.

De base, pas d'éléments de type block dans les éléments de type inline. La règle s'applique toujours, même si tu change les CSS. Les CSS changent le rendu des éléments, leur effet visuel, mais ne change pas leur nature. La règle s'applique sur la nature de l'élément, block ou inline.
Modifié par Merkel (10 Jun 2005 - 15:14)
Une petite précision sur les termes,

La propriété display permet d'intervenir sur le comportement d'une balise dans le cadre strict de la gestion css des éléments. Mais cette propriété n'implique rien concernant la nature (le type) de ladite balise dans le cadre tout aussi strict de la structuration html du document.
Modifié par clb56 (11 Jun 2005 - 08:23)
En supprimant le "width" sur le lien en display:block, le display:none / block du <span> fonctionne mais les liens subséquents sont inaccessibles Smiley decu

Toujours personne avec une idée ?
Si on ne peut pas mettre de <div> dans un <a> Pourquoi le code source du tutoriel suivant http://css.alsacreations.com/xmedia/exemples/affichage/deroulantcss.htm
nous donne :

<a href="">Menu 1<div>Description détaillée du menu 1<br />texte et images peuvent être placés ici</div></a>

Il y a bien un blok dans un inline?

Espèrant ne pas avoir dit une trop grosse bêtise Smiley confused
Oups tu sitais déjà le lien ci dessus (excuse moi je n'avais pas vu je suis entrain de bosser sur le même truc que toi)
Modifié par charlynancy (15 Jun 2005 - 22:59)
Administrateur
Tu as raison, c'est une grosse erreur de ma part.
Par contre, je ne vais pas pouvoir le modifier ce soir.
Tu veux bien me le rappeler par MP ?
Raphael je t'ai envoyé le message

G41 j'ai également un petit soucis quand je met une image dans le <span> le lien n'est pas actif sur l'image, intuitivement il doit y avoir un souci entre les bloc et inline, tout ça ne réagit pas de la même façon avec ie et ff, faut creuser tout ça Smiley sweatdrop
Je ne voudrais surtout pas jouer au puriste de la sémantique mais après quelques heures passées hier, j'en arrive aux conclusions suivantes :
*mettre des balises <a> dans des balises <a> , c'est pas vraiment respecter l'esprit de cette balise et les navigateurs n'aiment pas ça d'ou ton problème
*Pour ton besoin, tu devrais te tourner vers des solutions orientées menus (http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
ou si tu es un adepte des menus en cascades http://dosimple.ch/articles/Menus-dynamiques/)

Enfin, sur le plan de la conformité philosophique XML (bon sang qu'est ce que je parle bien Smiley bawling ), les balises <dl>, <dt> et <dd>... sont meilleures.
En conclusion : il y a peut être une solution à ton problème mais elle prendra plus de temps que de faire ça avec une solution menu et elle posera des problèmes aux navigateurs.
Modifié par charlynancy (16 Jun 2005 - 09:57)
charlynancy,

Merci pour tes cogitations Smiley cligne
(Merci aussi à Raphaël pour la correction).

Pour des <a ... dans des <a ... , c'est vrai qu'à seconde vue ça semble un peu folklorique.
En fait, les autres solutions font appel au javascript (mes premiers pas en pages web passaient par là) et je me défonce les neurones à trouver une solution en CSS (faut que j'me calme)
Une autre possibilité aussi testée (mais aussi javascript) est IE7 ( http://dean.edwards.name/IE7/ ) qui permet, entre autre, d'utiliser les :hover sur autre chose que les <a...

(Raphaël, un avis sur IE7 ?)

Bref, pas de solution parfaite actuellement Smiley bawling
Si je trouve autre chose ... je communique Smiley biggrin
@+
Modifié par g41687 (26 Sep 2008 - 13:57)
Sujet clos
Aller à