IPB

Bienvenue invité ( Connexion | Inscription )

 
 Reply to this topicStart new topic
> [XHTML/CSS] Menu ok... sauf sur ie6 ! [Résolu]
Options
titib
posté 18 Mar 2007, 13:33
Message #1


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
Bonjour à tous,
J'ai réalisé un menu (en me basant sur divers sites) qui, oh joie fonctionne parfaitement... jusqu'à ce que je le test sur IE (6). Et là, horreur.
Après avoir chipotté pendant quelques heures sans succès, je suis finalement résolu à venir crier à l'aide ici même car, sincèrement, je ne sais vraiment plus quoi faire...
Si quelqu'un à une solution...

Le script se trouve sur http://divers.titib.com/menu/ mais je le met également ici:

[codebox]<!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?#34;>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu</title>
<style type="text/css">
body {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
font-size: 0.8em;
}

.widget {
margin:0 87px;
padding:0;
height:32px;
float:right;
background-color:#FFFFCC;
background-image:url(images/widget.jpg);
background-repeat:repeat-x;
overflow:hidden;
}
.widget ul
{
margin: 0;
padding:0;
}
.widget li {
background:none;
display:inline;
font-size:11px;
float:left;
text-transform:uppercase;
}
.widget li a {
display: block;
height:60px;
padding-top:4px;
text-decoration:none;
color:#FFFFFF;
}
.widget li.widgetgauche a {
background:url(images/widget2.jpg) top left transparent no-repeat;
padding-left:10px;
padding-right:10px;
}
.widget li.widgetgauche a:hover {
background:url(images/widget2b.jpg) top left transparent no-repeat;
padding-left:10px;
padding-right:10px;
}
.widget li.widgetcentre a {
background:url(images/widget2.jpg) -30px 0 transparent no-repeat;
padding-left:10px;
padding-right:10px;
}
.widget li.widgetcentre a:hover {
background:url(images/widget2b.jpg) -30px 0 transparent no-repeat;
padding-left:10px;
padding-right:10px;
}
.widget li.widgetdroite a {
background:url(images/widget2.jpg) top right transparent no-repeat;
padding-left:10px;
padding-right:10px;
}
.widget li.widgetdroite a:hover {
background:url(images/widget2b.jpg) top right transparent no-repeat;
padding-left:10px;
padding-right:10px;
}


</style>
</head>

<body>
<ul class="widget">
<li class="widgetgauche"><a href="#">Menu 1</a></li>
<li class="widgetcentre"><a href="#">Menu 2</a></li>

<li class="widgetcentre"><a href="#">Menu 3</a></li>
<li class="widgetcentre"><a href="#">Menu 4</a></li>
<li class="widgetdroite"><a href="#">Menu 5</a></li>
</ul>


</body>
</html>
[/codebox]

La seule solution que j'ai trouvé pour l'instant pour résoudre le problème est de rajouter un width: xpx; dans le .widget li { }. Du coup l'affichage se fait de manière similaire sur IE et "tous les autres", mais cela oblige à modifier la largeur en fonction du contenu, chose qui est pas pratique du tout. Je cherche donc une technique permettant de s'adapter à la largeur du texte (Menu 1, 2,...).

La différence d'un pts de vue affichage se fait comme suit: http://divers.titib.com/menu/bug.jpg

Merci d'avance,

titib
Go to the top of the page
 
+Quote Post
No6
posté 18 Mar 2007, 13:54
Message #2


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224
sans regarder, il y a déjà un menu pareil chez stu : http://www.cssplay.co.uk/menus/slanty.html
et stp, utilise [codebox ... wink.gif


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
titib
posté 18 Mar 2007, 14:00
Message #3


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
je ne connaissais pas cssplay. Merci du conseil. Je vais regarder ca tout à l'heure et je vous tiens au courant smile.gif
Merci à toi,
titib

ps: pq utiliser [codebox...?
Go to the top of the page
 
+Quote Post
No6
posté 18 Mar 2007, 14:23
Message #4


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224
CITATION(titib @ 18 Mar 2007, 14:00) [snapback]2144920[/snapback]
ps: pq utiliser [codebox...?

? ben, c'est un peu plus confortable en lecture pour les autres...


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
titib
posté 19 Mar 2007, 11:30
Message #5


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
en effet, je confirme (pour codebox).
Par contre, concernant le script que tu m'as donné, j'ai du mal à le comprendre mais surtout à faire le lien avec mon problème.
Dit autrement: le script que tu m'as envoyé n'utilise pas de fond (background-image). Donc je ne vois pas cmt faire le parallèle.
Go to the top of the page
 
+Quote Post
No6
posté 19 Mar 2007, 12:18
Message #6


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224
IL y a pleins d'autres menus en exergue sur ce site... (http://www.cssplay.co.uk/menus/index.html)

comme : http://www.cssplay.co.uk/menus/centered.html
et perso, j'aurai plutôt fait 6 fonds différents : droite, centre, gauche en bleu et en brun (les droites et gauches juste pour le padding)

Ce message a été modifié par No6 - 19 Mar 2007, 12:52.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
titib
posté 19 Mar 2007, 13:50
Message #7


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
je vais regarder ca
merci de ton aide. Je te tiens au courant.
Go to the top of the page
 
+Quote Post
No6
posté 19 Mar 2007, 15:14
Message #8


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224
Une soluce:[codebox]<!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"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Menu No6</title>

<style type="text/css">
* { padding:0; border:0; margin:0; }
body { font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; font-size: 0.8em; }

#Menu { float:right; padding:0; border:0; margin-right:87px; text-transform:uppercase; font-size:11px; }
#Menu a { float:left; text-decoration:none; color:white; display:block; height:32px; background-image:url("images/widget2.jpg"); background-repeat:no-repeat; }
#Menu a:hover { background-image:url("images/widget2b.jpg"); }

.gauche { background-position:left; padding: 7px 5px 0 10px; }
.droite { background-position:right; padding: 7px 10px 0 5px; }
.milieu { background-position:center; padding: 7px 5px 0 5px; }

</style>
</head>
<body>
<div id="Menu">
<a href="#" class="gauche">Menu 1</a>
<a href="#" class="milieu">Menu 2</a>
<a href="#" class="milieu">Menu 3 long</a>
<a href="#" class="milieu">Menu 4</a>
<a href="#" class="droite">Menu 5</a>
</div>

</body>
</html>[/codebox] cool.gif

Cela m’inspire une nouvelle loi de Murphy :
« S'il existe différentes solutions à un problème, on peut être sur que la solution la plus compliquée sera la plus souvent choisie. »
Corollaire :
« Ce sera aussi celle qui apportera le grand nombre de nouveaux problèmes »

laugh.gif

Ce message a été modifié par No6 - 19 Mar 2007, 16:47.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
titib
posté 20 Mar 2007, 10:37
Message #9


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
je n'ai qu'une chose à dire: * clap clap clap * vive le roi!

dit moi, combien de fois je dois me flageler? wink.gif
Go to the top of the page
 
+Quote Post
No6
posté 20 Mar 2007, 11:47
Message #10


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224
Le Roi ? huh.gif
Un simple merci largement suffisant, et tu peux marquer [résolu] sur le sujet wink.gif


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post
titib
posté 20 Mar 2007, 11:51
Message #11


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
voili voilà wink.gif
quant au Roi, je me disais: why not tongue.gif
Go to the top of the page
 
+Quote Post
Enirak
posté 6 Sep 2007, 22:30
Message #12


Adepte de Macbidouille
*

Groupe : Membres
Messages : 110
Inscrit : 22 Sep 2005
Lieu : Nantes
Membre no 46 432
Help ! (non, bonsoir d'abord !...)

J'ai exactement le même problème que titib avec ce satané IE (mais avec toutes les versions... 5 6 7..., il n'y a que notre antique IE Mac qui fonctionne pour mon site... va savoir...)

donc problème de bandeau de nav avec css en sliding door

voilà ce que ça donne:
(sous Safari et Firefox c'est nickel)
Ma page d'accueil

j'ai donc tenté la solution (tentante car semblant simple) de N°6.
Mais là, re-cata... je n'arrive à rien:
Mon test bancale

il y aurait il une bonne âme pour éclairer une pauvre néophyte (option quiche intégrale en css)?
merci d'avance


--------------------
C'est parce que la lumière se déplace plus vite que le son, que certains ont l'air brillant avant d'avoir l'air con...
IMac 27' fin 2012 Sierra - MacBook 2013 Sierra
Go to the top of the page
 
+Quote Post
Enirak
posté 7 Sep 2007, 08:18
Message #13


Adepte de Macbidouille
*

Groupe : Membres
Messages : 110
Inscrit : 22 Sep 2005
Lieu : Nantes
Membre no 46 432
Pas l'air de passionner grand monde mon histoire...

J'ai connu plus de succès avec
Faire tester son site sur 12 navigateurs (windows) différents

Please, un petit coup de pouce ...


--------------------
C'est parce que la lumière se déplace plus vite que le son, que certains ont l'air brillant avant d'avoir l'air con...
IMac 27' fin 2012 Sierra - MacBook 2013 Sierra
Go to the top of the page
 
+Quote Post
titib
posté 7 Sep 2007, 09:33
Message #14


Adepte de Macbidouille
*

Groupe : Membres
Messages : 168
Inscrit : 30 Apr 2005
Membre no 38 170
j'ai trouvé la solution... mais je l'ai aps sous la main, je la poste quand je rentre chez moi dans quelques jours
Go to the top of the page
 
+Quote Post
Enirak
posté 7 Sep 2007, 09:49
Message #15


Adepte de Macbidouille
*

Groupe : Membres
Messages : 110
Inscrit : 22 Sep 2005
Lieu : Nantes
Membre no 46 432
Génial. Merci d'avance !
J'attends avec impatience.


--------------------
C'est parce que la lumière se déplace plus vite que le son, que certains ont l'air brillant avant d'avoir l'air con...
IMac 27' fin 2012 Sierra - MacBook 2013 Sierra
Go to the top of the page
 
+Quote Post
Enirak
posté 9 Sep 2007, 16:26
Message #16


Adepte de Macbidouille
*

Groupe : Membres
Messages : 110
Inscrit : 22 Sep 2005
Lieu : Nantes
Membre no 46 432
Bonjour,

en relisant mon premier post, je ne suis pas sure d'avoir été tout à fait claire.
Ni que ma problématique soit exactement la même que celle de titib, je m'explique:

Mon menu en sliding-door fonctionne ne fonctionne donc pas sous IE (n'importe quelle version)
car il me le présente en escalier.

Voilà ce que je voudrais:
et voilà ce que j'obtiens sous IE:

pas glop !...

à nouveau Ma Page d'accueil

Merci de votre aide.


--------------------
C'est parce que la lumière se déplace plus vite que le son, que certains ont l'air brillant avant d'avoir l'air con...
IMac 27' fin 2012 Sierra - MacBook 2013 Sierra
Go to the top of the page
 
+Quote Post
Enirak
posté 9 Sep 2007, 23:36
Message #17


Adepte de Macbidouille
*

Groupe : Membres
Messages : 110
Inscrit : 22 Sep 2005
Lieu : Nantes
Membre no 46 432
Eurêka !
J'ai fini par trouver ...

Pour ceux qui seraient confrontés à un problème identique au mien
(présentation du menu en escalier sous MSIE)
voici la solution à l'erreur que j'avais commise:

Dans le #nav li ,
j'avais par mégarde remplacé le display: inline; par un malencontreux display: block;
d'où le disgracieux escalier d'Explorer.
et voilà !...


--------------------
C'est parce que la lumière se déplace plus vite que le son, que certains ont l'air brillant avant d'avoir l'air con...
IMac 27' fin 2012 Sierra - MacBook 2013 Sierra
Go to the top of the page
 
+Quote Post
Domkirke
posté 10 Sep 2007, 07:17
Message #18


Macbidouilleur de vermeil !
****

Groupe : Membres
Messages : 1 215
Inscrit : 4 Aug 2006
Lieu : Paris
Membre no 65 377
Très joli site en tout cas. smile.gif


--------------------
Anciennement la Tomate Frivole - Mac OS 10.6.1, Mac Intel 20", iPod Nano 2Go, iPod 80Go 6eGen
Métaleux, amateur d'ambient, d'électronique, d'expérimental et bricoleur de bruits dans ses temps libres...
La seule chose que Windows sortira qui ne plantera pas, c'est un clou.
neyt
Go to the top of the page
 
+Quote Post
« Sujets plus anciens · Les Langages Du Web · Sujets plus récents »
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 

Modes d'affichage: Standard · Passer au mode : Linéaire+ · Passer au mode : Arborescent

Suivre ce sujet · Envoyer ce sujet · Imprimer ce sujet · S'abonner à ce forum

Nous sommes le : 20th April 2024 - 05:26
Powered By IP.Board 2.3.6 © 2024  IPS, Inc.