28173 sujets

CSS et mise en forme, CSS3

[Résolu]Problème de menu déroulant sur IE

Bonjour,

Je suis nouvelle sur le forum...
Je suis en train de réaliser un site pour un viticulteur indépendant, j'ai utilisé votre menu vertical déroulant, j'y ai ajouté des pointillés entre chaque rubrique.
Ca fonctionne très bien sur FF mais bug sur IE !!!!
Je déteste IE !!!!

Bon du coup, je vous montre, si quelqu'un trouve l'erreur, ça m'arrangerais car je suis en train de m'arracher les cheveux !


/* CSS Document */

/* GENERALITES */
html, body, p, dl, dt, dd, ul, li,{
/* Gestion globale des espaces */
margin:0; padding:0;
}

/*STRUCTURE*/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background: url(../images/carre_fond1.jpg) repeat;
}
#header {
height: 123px;
}
#separation{
margin: 120 0 0 0;
height: 4px;
background-color: #7c851f;
}
#conteneur {
position: relative;
width: 800px;
margin: 0 auto;
background-image: url(../images/image_fond3.jpg);
margin: 7px auto 7px auto;                             
}
#contour{
border: medium solid #7c851f;
}
#gauche {
position: absolute;
width: 170px; 
}
#centre {
margin: 0 0 20px 200px;
}
#pied {
height: 74px;
background: url(../images/bandeau_bas2.jpg) no-repeat;
}

/*MENU*/
dl{
margin: 20px 0 0 13px;
}
dl, dt, dd, ul, li{
list-style-type: none;
}
dl#menu dt{
cursor: pointer;
height: 20px;
line-height: 20px;
font-weight: bold;
}
dl#menu li {
margin-bottom: 7px;
height: 12px;
color: #fbed8d;
}
dl#menu li a, dl#menu dt a, dl#menu dd a{
margin: 0 2px;
color: #fbed8d;
text-decoration: none;
display: block;
}
dl#menu li a:hover, dl#menu dt a:hover, dl#menu dd a:hover{
text-decoration: none;
color: #c0ce2d;
}
dl#menu li a:active, dl#menu dt a:active, dl#menu dd a:active{
text-decoration: none;
color: #c0ce2d;
}

/*TEXTE*/
p{
margin: 0 10px 10px 0;
color: #fbed8d;
}
.soustitre{
font-size: 14px;
margin: 10px 0 0 0;
}
.presentation{
margin: 10px 0 10px 0;
}
.flottement{
margin-top: 10px;
}
.pointilles{
width: 170px;
height: 16px;
margin: -4px 0 -4px 0;
}

/*IMAGES*/
.cadre{
float: left;
border: thin solid #e5e08b;
margin: 0 7px 0 0;
}
.titre{
margin: 22px 0 10px 0;
}

/*BAS DE PAGE*/
.piedpage{
margin: 0 0 0 100px;
padding: 5px 0 0 0;
}
.copyright{
margin: 5px 0 5px 100px;
color: #254320;
}
.copyright a{
color: #254320;
text-decoration: none;
}
.copyright a:hover{
color: #fbed8d;
text-decoration: none;
}


le code HTML : 

<body>

<div id="conteneur">

<div id="header">
<img src="../www/images/bandeau_haut1.jpg" alt="Les Domaines Tatin" title="" id="hc" >
</div>

<div id="separation">
</div>

<div id="contour">
<div id="gauche">
<dl id="menu">
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('smenu1');"><a href="#">Les Domaines</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">L'histoire</a></li>
					<li><a href="#">Les Ballandors</a></li>

					<li><a href="#">Le Tremblay</a></li>
					<li><a href="#">Les Demoiselles Tatin</a></li>
					<li><a href="#">Groupements fonciers viticoles</a></li><br/>
				</ul>
			</dd>	
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('smenu2');"><a href="#">Les vins</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Quinçy</a></li>
					<li><a href="#">Reuilly</a></li>
				</ul>
			</dd>	
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('smenu3');"><a href="#">De la vigne au vin</a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Le terroir</a></li>
					<li><a href="#">Les vignerons</a></li>

					<li><a href="#">La cave</a></li>
					<li><a href="#">Les vendanges</a></li>
				</ul>
			</dd>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('smenu4');"><a href="#">Oenotourisme</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Dégustation</a></li>
					<li><a href="#">Visite et découverte</a></li>

					<li><a href="#">Gastronomie</a></li>
				</ul>
			</dd>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('');"><a href="#">Gîte rural</a></dt>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre('smenu5');"><a href="#">Presse</a></dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Articles</a></li>
					<li><a href="#">Distinctions</a></li>

					<li><a href="#">Citations</a></li>
				</ul>
			</dd>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre();"><a href="#">Contact</a></dt>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre();"><a href="#">Forum</a></dt>
		<p class="pointilles">.............................</p>
		<dt onclick="javascript:montre();"><a href="#">Liens</a></dt>
		<p class="pointilles">.............................</p>
</dl>
</div>

Modifié par magaloche (03 Aug 2007 - 19:55)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Oups, c'est vrai...
Désolée !
Ca y est, je viens de me présenter...
et de modifier la présentation !
Modifié par magaloche (03 Aug 2007 - 20:10)
Re-bonjour,

J'ai mal expliqué mon problème !
Je reprends :
J'ai utilisé le menu déroulant vertical d'Alsacreation et j'ai voulu y ajouter des pointillés entre chaque rubrique. Cela fontionne très bien quand il n'y a pas de sous menu. Quand il y a des sous-menus, les pointillés sont compris dans le sous-menu et du coup ils ne sont pas visibles dans le menu général fermé.
Comment pourrais-je faire pour qu'ils ne soient pas compris dans les sous-menu mais dans le menu général ???
Vous pouvez voir le problème sous IE par ce lien :

http://www.domaines-tatin.com/test1/domaines-histoire.html#
Bon, je ne comprends pas !
Personne ne répond !!!
Est-ce que quelqu'un aurait une idée ???
J'ai utilisé le menu d'Alsacréation, je n'ai ajouté que des pointillés entre chaque rubrique ???
Les modérateurs du forum devraient avoir une idée, non ???
Bonjour,

Il convient de ne pas insérer d'autres balises (dt, dl ...) au sein d'une liste Smiley cligne
Tu peux réaliser ton effet en utilisant border sur la balise appropriée 
dt{
border-top: 2px dotted #fff;
}


C'est prévu pour ! Bonne continuation
Sujet clos
Aller à