Sujet Précédent Sujet Suivant

Problème de Float

Résolu/Fermé
samsamX Messages postés 53 Date d'inscription vendredi 30 novembre 2007 Statut Membre Dernière intervention 10 mars 2010 - 14 sept. 2008 à 13:32
samsamX Messages postés 53 Date d'inscription vendredi 30 novembre 2007 Statut Membre Dernière intervention 10 mars 2010 - 21 sept. 2008 à 16:35
Bonjour,
d'abord, j'espère être au bon endroit, car un problème de css n'est pas vraiment en rapport avec le webmastering, mais c'est pas de la prog non plus :/
Bref.

Je suis en train de faire un menu horizontal pour un site, et je voudrais qu'il soit :
- Compatible MF/IE7
- Valide selon les normes du W3C

J'en avais fait un premier compatible, mais pas valide :(
Donc je m'y suis re-attelé, et j'ai un résultat probant, valide et QUASI-compatible.

Mon problème est que les sous-onglets doivent être les uns au dessus des autres, et IE7 me les met les uns à coté des autres. J'ai essayé de jouer avec les flottants, mais ils se trouvent alors carrément superposés !

Voici le code : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
		<title>TITRE</title>
	   
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   
		<style type="text/css" media="screen">
		/*########## En tete ##########*/
		#ban
		{
			padding-left:10px;
			padding-right:10px;
			width:927px;
			height:153px;
			margin-top:-4px; 
			margin-bottom:-8px; 
			background-color:#FFFFFF;
			text-align:center;
		}

		/*########## Menu ##########*/
		#menu
		{
			font-weight : bold; /* on met le texte en gras */
		    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
		    font-size : 12px; /* hauteur du texte : 12 pixels */
			height:21px;
			padding:3px;
			margin-top:10px;
			margin-bottom:10px; 
			background-color:#FFFFFF;
		}

		#menu a /* Contenu des listes */
		{
			display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
			padding : 0; /* aucune marge intérieure */
			padding-left: 8px;
			padding-right: 8px;
			background : #111111; /* image de fond */   
			color : #fff; /* couleur du texte */
			text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
			width : auto; /* largeur */
		}

		#menu a:hover /* Lorsque la souris passe sur un des liens */    
		{
			color: #000; /* On passe le texte en noir... */
		}

		/*gestion des couleurs des différents onglets*/
		#menu a.onglet1:hover{ background : #AA2345;  }
		#menu a.onglet2:hover{ background : #9AB345;  }

		#menu, #menu ul /* Liste */     
		{
			padding : 0; /* pas de marge intérieure */
			margin : 0; /* ni extérieure */
			list-style : none; /* on supprime le style par défaut de la liste */
			line-height : 21px; /* on définit une hauteur pour chaque élément */
			text-align : center; /* on centre le texte qui se trouve dans la liste */
		}

		#menu li /* Éléments des listes */      
		{ 
			float : left; 
			border-right : 1px solid transparent; /* on met une bordure transparente à droite de chaque élément */
		}

		#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
		{
		    left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
		}

		#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
		/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
		{
			left: auto; /* Repositionnement normal */
			min-height: 0; /* Corrige un bug sous IE */
		}

		#menu li ul /* Sous-listes */
		{ 
			float:left;
			position: absolute; /* Position absolue */
			width: auto; /* Largeur des sous-listes */
			left: -999em; /* Hop, on envoie loin du champ de vision */
			margin-left:-1px;
			border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément d'une sous-liste */
		}

		#menu li ul li /* Eléments de sous-listes */
		{
			/*SI FIREFOX
			width:50%;
			border-left:1px solid #FFFFFF ;*/
			
			/*SI IE7 */
			width:100%;
			margin-bottom:-21px;
			margin-left:1px;
			border:none
		}

		#menu li ul ul 
		{
			margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
			border-left     : 1px solid transparent ; /* Petite bordure à gauche pour ne pas coller ... */      
		}


		/*########## Corps ##########*/
		body
		{
			font-family:  Arial, Verdana, "Times New Roman", serif;
			font-size:small;
			color: #016742;
			width:947px;
			margin:0 auto; 
			background-image: url("../images/fond.png");
			background-attachment: fixed;
		}

		h1, h2 { text-align:center; }
		</style>	

    </head>
	
    <body>

	<br/>
	<div id="ban">MA Bannière ici</div>
	
	<div class="onglets">
		<ul id="menu">
			<li>
				<a class="onglet1">onglet1</a>
				<ul>
					<li><a href="index.php" class="onglet1" style="width:59px">Accueil</a></li>
					<li><a href="faq.php" class="onglet1" style="width:59px">Aide</a></li>
					<li><a href="historique.php" class="onglet1" style="width:59px">Historique</a></li>
				</ul>
			</li>
			
			<li>
				<a class="onglet2">onglet2</a>
				<ul>
					<li><a href="activites_cours.php" class="onglet2" style="width:71px">Cours</a></li>
					<li><a href="activites_tournois.php" class="onglet2" style="width:71px">Tournois</a></li>
					<li><a href="activites_evenements.php" class="onglet2" style="width:71px">Evènements</a></li>
				</ul>
			</li>
		        
		</ul>
	</div>	
	
	<h1>My title</h1>

	<p>Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.</p>

	<p>Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.</p>

	<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.</p>

	<p>Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque sollemnitate imperator Mediolanum ad hiberna discessit.</p>

	<p>Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</p>

	</body>
</html>


J'ai simplifié pas mal de points en gardant l'essentiel, afin que vous puissiez tester directement le code.

je résume la question donc :

COMMENT AVOIR UN MENU AVEC DES SOUS-ONGLETS LES UNS AU DESSUS DES AUTRES SOUS IE7 ET MF EN RESPECTANT LES NORMES DU W3C.

3 réponses

Réponse 1 / 3
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
15 sept. 2008 à 00:44
salut,

je te conseille ce tuto, lis bien le préambule avant.

ce n'est pas parfait en ce qui concerne l'accessibilité mais il me semble que ça passe partout (ça fait longtemps que je n'y ai pas mis le nez…) !

bon courage pour la suite !
0
Réponse 2 / 3
samsamX Messages postés 53 Date d'inscription vendredi 30 novembre 2007 Statut Membre Dernière intervention 10 mars 2010 1
15 sept. 2008 à 10:08
Aïe non justement...
Il ne faut surtout pas que j'utilise le Javascript :/

Mais j'étudie ce code, il y a peut être ce qu'il me faut
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
15 sept. 2008 à 10:35
salut,

pourquoi pas de JS ?

si c'est pour l'accessibilité celui d'Alsa doit avoir l'alternative.
0
samsamX Messages postés 53 Date d'inscription vendredi 30 novembre 2007 Statut Membre Dernière intervention 10 mars 2010 1 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
16 sept. 2008 à 08:46
Le JS c'est pas pratique dans le sens où il peut être désactivé, et le menu est quand même la base du site...
Des applis en JS à coté pourquoi pas, mais sûrement pas le menu
0
Réponse 3 / 3
samsamX Messages postés 53 Date d'inscription vendredi 30 novembre 2007 Statut Membre Dernière intervention 10 mars 2010 1
21 sept. 2008 à 16:35
up ?
0

Discussions similaires

TypeError: can't multiply sequence by non-int of type 'str'
Barou_0442 -
yg_be -

7 réponses
Utilisation du float pour une division en langage c
Ruvox -
[Dal] -

4 réponses
Afficher un float ou double
Nico -
Nico -

14 réponses
TypeError: object of type 'int' has no len()
tzir -
Yoan -

1 réponse
could not convert string to float
l0511 -
yg_be -

10 réponses