Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS / Javascript > Compatibilité IE > Lecture du sujet

Compatibilité IE

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne Samaf # Posté le 09/07/2008 à 17:56:53
Avatar
Groupe : Membres
Bonjour,

Je réalise actuellement un site, sous Firefox 3 tout s'affiche bien mais sur IE il y a un problème avec le menu du haut, tenez, regardé:

http://www.samaf-officiel.fr.nf/design/index.html

Merci d'avance

Cordialement,
Samaf :p
Édité le 09/07/2008 à 18:09:46 par Samaf
Image utilisateur
 
Hors ligne CyberTueur # Posté le 09/07/2008 à 17:58:22
Avatar
Groupe : Membres
Et c'est quoi le problème ? Je ne vois aucune différence ou presque :(
Ce mec est un vrai robot ! Lien.
 
Hors ligne Samaf # Posté le 09/07/2008 à 18:01:01
Avatar
Groupe : Membres
Tu es sur quel IE ? Car sur IE 6 y a des problème avec le menu de haut.
Édité le 09/07/2008 à 18:01:49 par Samaf
Image utilisateur
 
Hors ligne CyberTueur # Posté le 09/07/2008 à 18:06:04
Avatar
Groupe : Membres
Ah, sur IE7 désolé :(
C'est moi ou la page que tu ous donnes n'est qu'une image ? :-°
Édité le 09/07/2008 à 18:06:17 par CyberTueur
Ce mec est un vrai robot ! Lien.
 
Hors ligne Samaf # Posté le 09/07/2008 à 18:09:30
Avatar
Groupe : Membres
Ha, pardon je me suis trompé de lien ^^

http://www.samaf-officiel.fr.nf/design/index.html

J'ai édité mon premier post ^^
Image utilisateur
 
Hors ligne obud # Posté le 09/07/2008 à 18:12:55
Groupe : Membres
Tu es sur un forum qui est beaucoup fréquenté par des linuxiens ou des gens qui n'ont plus depuis longtemps IE6... De ce fait, Je pense que le mieu pour tout le monde serait que tu nous fasse une petite capture d'écran du problème! Ca augmentera le nombre de personnes susceptibles de t'aider.

Merci d'avance :D
Hors ligne Samaf # Posté le 09/07/2008 à 18:15:00
Avatar
Groupe : Membres
Ha, pardon,je n'ai pas pensé ^^

Voici le petit screen: http://img179.imageshack.us/img179/8962/pbiesl3.jpg
Image utilisateur
 
Hors ligne obud # Posté le 09/07/2008 à 19:05:44
Groupe : Membres
Code : CSS
1
2
3
4
5
6
7
ul#menu 
{
margin: 0;
margin-left: -40px;
height: 39px;
list-style: none;
}


à mon avis ca vient du -40px... Et pour tout te dire.. je ne vois pas son utilité... retire le pour voir ^^ ou remplace le peut etre par un padding-left:-40px; ...
Édité le 09/07/2008 à 19:06:24 par obud
Hors ligne Samaf # Posté le 09/07/2008 à 19:15:03
Avatar
Groupe : Membres
Si j'enlève le margin-left ou que je met un paddding*left à la place, j'ai ce gros décalage:

http://img139.imageshack.us/img139/8761/pbie2wv7.jpg
Image utilisateur
 
Hors ligne obud # Posté le 09/07/2008 à 19:31:29
Groupe : Membres
Oups.. :-° désolé..
Alors je ne vois pas trop d'où peut venir le problème.. tu as essayé -20px?
Hors ligne Samaf # Posté le 09/07/2008 à 21:20:45
Avatar
Groupe : Membres
Sa fait pareil avec un -20px.
Image utilisateur
 
Hors ligne lunariel # Posté le 10/07/2008 à 00:50:02
Avatar
Groupe : Membres
bonjour,
essaye ça
Code : CSS
1
2
3
4
5
6
7
8
9
ul#menu 
{
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin: 0px;
padding:0px;
}
Hors ligne Samaf # Posté le 10/07/2008 à 01:05:20
Avatar
Groupe : Membres
Pour le positionnement horizontale, c'est super mais il y a encore un espace entre le menu et le header.
Image utilisateur
 
Hors ligne Cocopop # Posté le 10/07/2008 à 01:10:50
I'm not a bot
Avatar
Groupe : Membres
Donne moi le code source de toute ta page stp
Image utilisateur
 
Hors ligne Samaf # Posté le 10/07/2008 à 01:26:07
Avatar
Groupe : Membres
tien le html:

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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" xml:lang="fr" lang="fr">
<head>
<title>Samaf-Officiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<!-- Début du fond -->
<div id="fond">

<!-- Début du header -->
<h1 id="header">
	<img src="img/header.jpg" alt="Samaf-Officiel" />

</h1>
<!-- Fin du header -->

<!-- Début du menu -->
<ul id="menu">
		<li id="accueil"><a href="#"><span>accueil</span></a></li>
        <li id="forum"><a href="#"><span>forum</span></a></li>
        <li id="ecoute"><a href="#"><span>ecoute</span></a></li>
        <li id="telecharger"><a href="#"><span>telecharger</span></a></li>

        <li id="contact"><a href="#"><span>contact</span></a></li>
    </ul>
<!-- Fin du menu -->

<!-- Début du corps-->
	<div id="corps">
	<h3><img src="img/puces.jpg" alt="Puces" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Et quae non non extremum satis recta id vacuitate iudicia depravare ab iudicium, si desiderat voluptate inanes ut, ut ergo dolores quae ut, id si dolorem homines opinionum numquam loco possimus est nec erit, liberos suum neque quid ut, eas.. Dicunt exeamus, viris quadam, qui semper cum quem dissentiunt, ut sic multos satis illa qua, docet ignoratione.. Idem et disserendi falli sunt motum voluptatibus ut sine nullam se familiarem animi tuentur enim ab qui quid oratione cupiditatibusque invitat ad nec isdem qui bonum omnino, vitam primorum ceteris individua, sapienti reprehendunt videri opes quibus, quem opus vix, maxime nunc habet et ita, vendibiliora eo chrysippo nec, dolorum tantum e triarius.</p>

	<h3><img src="img/puces.jpg" alt="Puces" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipisci elit. Et quae non non extremum satis recta id vacuitate iudicia depravare ab iudicium, si desiderat voluptate inanes ut, ut ergo dolores quae ut, id si dolorem homines opinionum numquam loco possimus est nec erit, liberos suum neque quid ut, eas.. Dicunt exeamus, viris quadam, qui semper cum quem dissentiunt, ut sic multos satis illa qua, docet ignoratione.. Idem et disserendi falli sunt motum voluptatibus ut sine nullam se familiarem animi tuentur enim ab qui quid oratione cupiditatibusque invitat ad nec isdem qui bonum omnino, vitam primorum ceteris individua, sapienti reprehendunt videri opes quibus, quem opus vix, maxime nunc habet et ita, vendibiliora eo chrysippo nec, dolorum tantum e triarius.</p>
</div>
<!-- Fin du corps !-->

<!-- Début du footer -->
<p id="footer">&copy; 2008 - 2009 | Samaf-Officiel.fr.nf | Codage &amp; Design par <a href="http://www.kit-gratos.fr.nf">Samaf</a> | Valid: <a href="http://validator.w3.org/check?uri=referer"> xhtml </a> - 
			   <a href="http://jigsaw.w3.org/css-validator/check/referer">css</a></p>

<!-- Fin du footer -->
</div>
<!-- Fin du fond -->

</body>
</html>


et tien le css:

Code : CSS
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
body
{
background-image: url('img/bg.jpg');
font-family:Arial, Helvetica, sans-serif;
}

/* Début du fond */
#fond
{
margin: 0 auto;
margin-top: 50px;
background: #565859;
width: 608px;

font-size: 14px;
color: #FFFFFF;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
/* Fin du fond */

/* Début du header */
#header
{
margin: 0 auto;
width: 608px;
height: 165px;
}
/* Fin du header */

/* Début du menu Firefox */
 /*ul#menu 
{
margin: 0;
margin-left: -40px;
height: 39px;
list-style: none;
}*/

ul#menu 
{
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin: 0px;
padding:0px;
}

ul#menu  li 
{
float: left;
}
ul#menu  li a 
{
display: block;
width: 122px;
height: 39px;
}
ul#menu li#accueil a 
{
width: 121px;
}
ul#menu li#contact a 
{
width: 121px;
}

ul#menu  li span 
{
display: none;
}
ul#menu li#accueil 
{
background: url('img/accueil.jpg') no-repeat;
}
ul#menu li#forum
{
background: url('img/forum.jpg') no-repeat;
}
ul#menu li#ecoute 
{
background: url('img/ecoute.jpg') no-repeat;
}
ul#menu li#telecharger 
{
background: url('img/telecharger.jpg') no-repeat;
}
ul#menu li#contact 
{
background: url('img/contact.jpg') no-repeat;
}
ul#menu  li#accueil a:hover 
{
background: url('img/accueil2.jpg') no-repeat;
}
ul#menu  li#forum a:hover 
{
background: url('img/forum2.jpg') no-repeat;
}
ul#menu  li#ecoute a:hover 
{
background: url('img/ecoute2.jpg') no-repeat;
}
ul#menu  li#telecharger a:hover 
{
background: url('img/telecharger2.jpg') no-repeat;
}
ul#menu  li#contact a:hover 
{
background: url('img/contact2.jpg') no-repeat;
}
/* Fin du menu Firefox */

/* Début corps */
#corps
{
padding-left: 10px;
padding-right: 10px;
}

#corps p
{
font-size: 14px;
}

#corps h3
{
font-size: 16px;
padding-left: 30px;
color: #FFFFFF;
}

#corps span
{
font-weight: bold;
padding-left: 400px;
font-size: 12px;
}
/* Fin corps */

/* Début du footer */
#footer
{
color: #FFFFFF;
font-size: 12px;
text-align: center;
}
/* Fin du footer */

/* Début des liens */
a
{
color: #FFFFFF;
text-decoration: none;
}

a:hover
{
color: #FFFFFF;
text-decoration: underline;
}
/* Fin des liens */
Édité le 10/07/2008 à 01:27:08 par Samaf
Image utilisateur
 
Hors ligne Cocopop # Posté le 10/07/2008 à 01:58:07
I'm not a bot
Avatar
Groupe : Membres
Je crois savoir pourquoi essaye en faisant qqch comme ca :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="menu">

<!-- Début du menu -->
<ul id="menu">
		<li id="accueil"><a href="#"><span>accueil</span></a></li>
        <li id="forum"><a href="#"><span>forum</span></a></li>
        <li id="ecoute"><a href="#"><span>ecoute</span></a></li>
        <li id="telecharger"><a href="#"><span>telecharger</span></a></li>

        <li id="contact"><a href="#"><span>contact</span></a></li>
    </ul>
<!-- Fin du menu -->
</div>

Ensuite configure le dans le CSS (taille etc)
Image utilisateur
 
Hors ligne Samaf # Posté le 10/07/2008 à 11:27:53
Avatar
Groupe : Membres
Je ne comprend pas pourquoi tu rajoute une autre div menu.
Image utilisateur
 
Hors ligne birdy42 # Posté le 10/07/2008 à 14:18:20
Apprendre de nos erreurs :)
Groupe : Membres
moi ce que je comprends pas surtout, c'est que y a 2 fois le meme id pour des balises différentes
alors qu'un id est sensé être unique...
ZéRo un jour ZéRo toujours
 
Hors ligne Samaf # Posté le 10/07/2008 à 14:57:35
Avatar
Groupe : Membres
Ba oui, je me demande pourquoi il a mis ça.
Image utilisateur
 

Retour au forum "XHTML / CSS / Javascript" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 588 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0634s (0.0374s)