28221 sujets

CSS et mise en forme, CSS3

bonjour a tous.

Après avoir parcouru le forum et le tutorial d'aid au décalage-bug, je poste mon message, n'ayant pas trouvé la solution à mon probleme.

j'ai utilisé le menu vertical déroulant disponible sur cet excellent site, et sur IE, il marche impec, par contre, netscape et firefox, il fait des petits sauts dans le sous menu, quand on passe la souris sur les sous thèmes, ce qui est pas très agréable.

Y'a t'il une solution miracle ?



mon code :

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=18; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
   </script>

<style type="text/css">
<!--
body {
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 7em;
left: 5px;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #FFF1D4;
height: 20px;
line-height: 20px;
margin: 5px 0;
color: #6D1512;
border: 0px solid gray;
text-align: center;
font-weight: normal;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 12em;
background: #FFFAEE;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
color: #6D1512;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
color: #6D1512;
display: block;
}

#menu li a:hover {
text-decoration: underline;
background: #FFF1D4;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
   </style>



<dl id="menu">


			
		<dt onmouseover="javascript:montre('smenu1');"><a href="#"><font size="1">Sites touristiques</font></a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/pages/tourisme/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/pages/cartes/carte-base.asp">
                    <font size="1">Les 105 sites à visiter</font></a></li>
						<li><a href="/pages/vr/decouverte_virtuelle.asp">
                    <font size="1">Visites virtuelles à 360°</font></a></li>
                    	<li><a href="/pages/tourisme/index.asp">
                    <font size="1">Informations pratiques</font></a></li>
				</ul>
			</dd>	


    
				<dt onmouseover="javascript:montre('smenu2');"><a href="#"><font size="1">Hébergements</font></a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="/hebergement/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/hebergement/index.asp#gite">
                    <font size="1">Gîtes et meublés</font></a></li>
                    <li><a href="/hebergement/index.asp#chambres">
                    <font size="1">Chambres d'hôtes</font></a></li>
                    <li><a href="/hebergement/index.asp#camping">
                    <font size="1">Campings - Bungalows</font></a></li>
                    <li><a href="/hebergement/index.asp#hotels">
                    <font size="1">Hôtels</font></a></li>
                    <li><a href="/hebergement/index.asp#chalets">
                    <font size="1">Chalets</font></a></li>
                    <li><a href="/hebergement/index.asp#auberges">
                    <font size="1">Auberges</font></a></li>
                    <li><a href="/hebergement/index.asp#centre de vacances">
                    <font size="1">Centre et village de vacances</font></a></li>
                    <li><a href="/hebergement/index.asp#autres">
                    <font size="1">Autres séjours</font></a></li>
                    <li><a href="/hebergement/index.asp">
                    <font size="1">Informations pratiques</font></a></li>
                    
				
				</ul>
			</dd>	

			</dd>

		<dt onmouseover="javascript:montre('smenu3');"><font size="1">Comment venir ?</font></dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/carte_acces/index.asp">
                    <font size="1">Accueil</font></a></li>
				</ul>
			</dd>

		
		<dt onmouseover="javascript:montre('smenu4');"><font size="1">Vins & Gastronomie</font></dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/vins/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/pages/vins/index.asp">
                    <font size="1">Les 13 AOC du Bergeracois</font></a></li>
					<li><a href="/gastronomies/index1.asp">
                    <font size="1">Les spécialités gastronomiques</font></a></li>
					<li><a href="/gastronomies/index.asp">
                    <font size="1">Les recettes de cuisine</font></a></li>
					<li><a href="/producteurs-bio/index.asp">
                    <font size="1">les producteurs biologiques</font></a></li>
					<li><a href="/restaurants/index.asp">
                    <font size="1">Les restaurants</font></a></li>
					<li><a href="/pages/vins/index.asp#passons">
                    <font size="1">Passons à table</font></a></li>
				</ul>
			</dd>
			
			
			
			<dt onmouseover="javascript:montre('smenu5');"><font size="1">Fêtes & Evénements</font></dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/sortir/default.asp">
                    <font size="1">Cette semaine</font></a></li>
					<li><a href="/pages/sortir/default-mois.asp">
                    <font size="1">Ce mois ci</font></a></li>
					<li><a href="/pages/sortir/default-3mois.asp">
                    <font size="1">Ces trois prochains mois</font></a></li>
				</ul>
			</dd>	
				<dt onmouseover="javascript:montre('smenu6');"><font size="1">Sports & Loisirs</font></dt>
			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/sports-loisirs/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/pages/sports-loisirs/index.asp">
                    <font size="1">Sports</font></a></li>
					<li><a href="sports-loisirs/index.asp">
                    <font size="1">Loisirs</font></a></li>
					<li><a href="/loisirs/index.asp">
                    <font size="1">Circuits touristiques</font></a></li>
					<li><a href="/pages/sports-loisirs/index.asp">
                    <font size="1">Informations pratiques</font></a></li>
				</ul>
			</dd>	
					<dt onmouseover="javascript:montre('smenu7');"><font size="1">Culture & Patrimoine</font></dt>
			<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/culture-patrimoine/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/pages/culture-patrimoine/index.asp#patrimoine">
                    <font size="1">Patrimoine</font></a></li>
					<li><a href="/pages/culture-patrimoine/index.asp#environnement">
                    <font size="1">Environnement</font></a></li>
					<li><a href="/pages/culture-patrimoine/index.asp#jumelages">
                    <font size="1">Jumelages</font></a></li>
                    <li><a href="/pages/culture-patrimoine/index.asp#artistes">
                    <font size="1">Les artistes</font></a></li>
                    <li><a href="/pages/culture-patrimoine/index.asp">
                    <font size="1">Spectacles</font></a></li>
				</ul>
			</dd>	
					
	
			<dt onmouseover="javascript:montre('smenu8');"><font size="1">Informations pratiques</font></dt>
			<dd id="smenu8" onmouseover="javascript:montre('smenu8');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/info_pratique/index.asp">
                    <font size="1">Accueil</font></a></li>
					<li><a href="/info_pratique/info_pratiques.asp">
                    <font size="1">Office de Tourisme</font></a></li>
					<li><a href="/info_pratique/info_pratiques_adresses_utiles.asp">
                    <font size="1">Adresses utiles</font></a></li>
					<li><a href="/info_pratique/info_pratiques_ens_publics.asp">
                    <font size="1">L'enseignement</font></a></li>
					<li><a href="/info_pratique/info_pratiques_emploi.asp">
                    <font size="1">Emploi</font></a></li>
					<li><a href="/info_pratique/info_pratiques_emploi.asp">
                    <font size="1">Activités sportives</font></a></li>
					<li><a href="/info_pratique/info_pratiques_marches.asp">
                    <font size="1">Marchés</font></a></li>
					<li><a href="/info_pratique/info_pratiques_location.asp">
                    <font size="1">Locations</font></a></li>
					<li><a href="/pages/pays_de_bergerac/info_pratique/info_pratiques_assos.asp">
                    <font size="1">Associations</font></a></li>
					<li><a href="/info_pratique/info_pratiques_garde.asp">
                    <font size="1">Garde temporaire d'enfants</font></a></li>
					<li><a href="/info_pratique/info_pratiques_logement.asp">
                    <font size="1">Logements</font></a></li>
					<li><a href="/info_pratique/info_pratiques_transport.asp">
                    <font size="1">Le transport</font></a></li>
				</ul>
			</dd>
		
		

	<dt onmouseover="javascript:montre('smenu9');"><font size="1">L'hebdo du Pays</font></dt>
			<dd id="smenu9" onmouseover="javascript:montre('smenu9');" onmouseout="javascript:montre();">

				<ul>
					<li><a href="/pages/Journal/ALaUne/default.asp">
                    <font size="1">A la Une</font></a></li>
					<li><a href="/pages/Journal/pays/default.asp">
                    <font size="1">Pays</font></a></li>
					<li><a href="/pages/Journal/culture/default.asp">
                    <font size="1">Culture</font></a></li>
					<li><a href="/pages/Journal/sport/default.asp">
                    <font size="1">Sport</font></a></li>
					<li><a href="/pages/Journal/Agenda/default.asp">
                    <font size="1">Agenda</font></a></li>
					<li><a href="/pages/Journal/musique/default.asp">
                    <font size="1">Musique</font></a></li>
					<li><a href="/pages/Journal/emploi/default.asp">
                    <font size="1">Emploi</font></a></li>
					<li><a href="/pages/Journal/PetitesAnnonces/default.asp">
                    <font size="1">Petites annonces</font></a></li>
					<li><a href="/pages/Journal/economie/default.asp">
                    <font size="1">Economie</font></a></li>
					<li><a href="/pages/Journal/forum/default.asp">
                    <font size="1">Forum</font></a></li>
					<li><a href="/pages/Journal/sortir/default.asp">
                    <font size="1">Sortir</font></a></li>
					<li><a href="/pages/Journal/cinema/default.asp">
                    <font size="1">Cinéma</font></a></li>
					<li><a href="/pages/Journal/Archives/default.asp">
                    <font size="1">Archives</font></a></li>
				</ul>
			</dd>

	
</dl>

Modifié le 27 Jan 2005 - 10:38
Aîe mes yeux Smiley lol

Commence déjà par enlever tous ces "<font size="1">" ! D'ailleurs pourquoi ils sont là eux ? Utilise-tu un éditeur WYSIWYG ?
j'ai enlevé sur mon test les <font>

j'utilise frontpage. Smiley biggol

ça bug tjrs, mais bcp moins on dirait, si on passe tout doucement, ava, sinon, c pa bo Smiley decu
a écrit :
Juste une question :

Pourquoi fais tu tournés ta boucle for 18 fois alors que tu as 9 smenu ?


en fait, y'a 18 sous menu, j'en ai supprimer pour eviter que vous ayez a lire 12 pages ! Smiley cligne