Rendus différents sous IE et FireFox.

**Thanor** · 15/10/2006, 19h31

Bonjour, alors voilà, toujours par rapport à mon site : http://thanor.chez-alice.fr, que j'ai un peu retravaillé, qui est validé par le W3c.

Sous IE, le rendu est "impeccable" (conforme à ce que je veux du moins

); par contre si je passe sous firefox, ça n'a plus rien à voir

c'est tout superposé, on peut pas cliquer sur le menu, à croire que ma feuille de style n'est pas correctement interprétée. A priori utiliser un style transitional au lieu de strict ne change rien...

J'ai lu pas mal de tuto, d'explications, j'ai un peu "synthétisé" pour voir quels seraient les paramètres qui jouent, mais bon, je vois pas..

Si besoin je peux afficher mon css et mon code.

Merci.

**francis m** · 16/10/2006, 00h21

un peu de code permettra de mieux aider

**trotters213** · 16/10/2006, 08h59

et bienvenue à toi frêre Nîmois

Désolé mais ton site n'est pas conforme

Par exemple tu ne peux pas faire

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><br /></li>

.
Tu n'utilises qu'une seule fois corps et en-tete donc utilises des id plutôt que des class.
Supprime le heigth dans .corps et #menu et dis nous s'il y a toujours une différence.

**Thanor** · 16/10/2006, 10h07

Alors non il n'y a plus de différence... par contre mon menu est en haut à gauche, et mon corps de page est en-dessous.

Voilà mon css (il n'y a pas les styles de police de photo etc., uniquement les conteneurs):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
#en-tete{
		width:100%;
		padding:10px 0px;	
		border-bottom: 1px solid #cccccc;	
		margin:0;
		height:100px;
	}
 
 
#corps{
		top:100px;
		border:3px solid #cccccc;
		position:absolute;
		width:100%;
		margin:0;		
      }
 
 
#menu{		
		position:relative;
		width:18%;			
		margin:0;		
		border:2px solid #cccccc;
     }		
 
#droite{		
		position:relative;
		width:82%;
		margin-top:0;				
		overflow:auto;			
		padding:0 0 0 1%;
	}
 
#pied{
		position:absolute;
		margin-top:5%;				
}

Et voilà la structure de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
 
<head>blablabla</head>
 
<body>
 
<div id="en-tete"> <h1>Bienvenue sur le site !!</h1> </div>
 
<div id="corps">
 
     <div id="menu"> <?php include ("menu.php"); ?> </div>
 
     <div id="droite"><?php include (pageainclure.php); ?></div>
 
</div>
 
<div id="pied"> <?php include ("pied.php"); ?> </div>
 
</body>
 
</html>

Les border plutot moches, sont inutiles, mais uniquement pour bien voir où se limitent mes cadres.

COmment faire cette simple mise en page banale en-tete / menu à gauche / contenu à droite / pied en bas???? Ca m'énerve :p

**trotters213** · 16/10/2006, 10h16

utilise float :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#menu{		
position:relative;
width:18%;			
margin:0;		
border:2px solid #cccccc;
float:left;
}		
 
#droite{		
position:relative;
width:82%;
margin-top:0;				
overflow:auto;			
padding:0 0 0 1%;
float:right;
}

par contre de cette manière ta div droit sera toujours en dessous car la somme de tes width est trop grande regarde : 18% + 82% = 100% et en plus tu rajoutes 2px de border autour de ton menu (donc 4 px) + 1% à ton padding de gauche + encore 3px à gauche et à droite de ton corps (donc 6px) donc c'est trop grand

**Thanor** · 16/10/2006, 10h25

Ok c'est bon, j'avais pas vu la suite après ton [code]..

Merci, confrère Nimois !

**trotters213** · 16/10/2006, 10h33

c'est normal
Essaie ceci alors :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
* {
margin:0px;
padding:0px;
}
 
#en-tete{
width:100%;
padding:10px 0px;	
height:100px;
}
 
 
#corps{
top:100px;
position:absolute;
width:100%;		
}
 
 
#menu{		
width:18%;	
border:2px solid #cccccc;
float:left;
}		
 
#droite{		
width:80%;			
padding:0 0 0 1%;
float:right;
}
 
#pied{
position:absolute;
margin-top:5%;				
}

ceci t'enlève la barre de défilement horizontale

**Thanor** · 16/10/2006, 10h37

Arf bon maintenant la seule différence, c'est que sous FireFox c'est à peu près bon, sous IE, mon en-tete est trop haut et déborde sur le cadre "corps"....

**Thanor** · 16/10/2006, 10h42

Par contre, pourquoi je nai plus ma barre de défilement verticale malgré mon overflow:auto ?

**trotters213** · 16/10/2006, 10h54

Envoyé par Thanor

Par contre, pourquoi je nai plus ma barre de défilement verticale malgré mon overflow:auto ?

Parce que ta largeur fait 100% ou moins de la taille de la fenêtre donc il n'y a aucune raison d'avoir une barre de défilement.
Tu peux du coup supprimer ton overflow ainsi que tes position:relative qui ne servent à rien

et corriger ces erreurs

Sinon j'ai le même résultat sur IE et FF.

PS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.pres{
		font-size:20px;
		color:#B0C4DE;
}
 
.accueil{
		font-size:20px;
		color:#B0C4DE;
}

=

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.pres,
.accueil{
		font-size:20px;
		color:#B0C4DE;
}

le

**Thanor** · 16/10/2006, 11h12

Oui mais le overflow servait à faire défiler verticalement pour la présentation des photos, à la base je voulait que mon menu ne défile pas lorsqu'on faisait défiler l'écran vers le bas.

Et pour les erreurs du w3c, ce sont des erreurs dues au script javascript de page tiscail, malheureusement je n'ai aps accès à ce code là étant donné qu'il se trouve virtuellement après mon </html>, donc je ne pourrai jamais les régler.

**trotters213** · 16/10/2006, 11h39

Envoyé par Thanor

Oui mais le overflow servait à faire défiler verticalement pour la présentation des photos, à la base je voulait que mon menu ne défile pas lorsqu'on faisait défiler l'écran vers le bas.

Pourquoi mettre des photos alors

?

**Thanor** · 16/10/2006, 11h51

Ben les photos c'est pour la présentation, pour montrer des exemples.... Mais je vois pas ce que ca change lol.

**trotters213** · 16/10/2006, 11h56

Ok je viens de comprendre : tu veux pouvoir faire défiler ta divdroit sans que ton menu ne bouge c'est ça ?

**Thanor** · 16/10/2006, 12h00

Exaxctement ! Avant, quand mon site était fait à l'arrache, sans doctype ni rien, il suffisant de mettre pour mon div menu position:fixed, et là ça bougeait plus.. mais je crois que ça fonctionne plus à présent...

**trotters213** · 16/10/2006, 14h12

je n'avais pas fait attention mais ton code est totalement faux dans tes rubriques : tu as des balises head, meta et html dans ta balise body, tu fais des include qui ne sont pas bon du tout regarde ta page électricité par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Sarl DME-Nîmes-Gard (30) : Electricté, automatisme, plomberie...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Electricite industrielle, automatisme, chauffage, climatisation a Nimes, devis sur simple demande n'hesitez pas a me contacter !">
<meta name="keywords" content="electricien, electricite, electricite industrielle, climatisation, climatisation reversible, automatisme, portail electrique, alarme, chauffage, domotique, plomberie, electricien nimes, electricité nimes, climatisatin nimes, automatisme nimes, portail electrique nimes, alarme nimes, chauffage nimes, domotique nimes, plomberie nimes, electricien gard, electricite gard, automatisme gard, climatisation gard, alarme gard, chauffage gard, domotique gard, plomberie gard, Sarl DME, artisan, antennes, satellite, depannage nimes, maintenance nimes, installation nimes, depannage gard, maintenance gard, installation gard, portail automatique, coffret electrique" > 
<meta name="author" lang="fr" content='F. Mombel'>
<meta name="Revisit-after" content='15 days'>
<link rel="home" title="Accueil" href='http://thanor.chez-alice.fr/index.php?page=accueil'>
<link rel="author" title="Contact" href='societedme@tiscali.fr'>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="en-tete"> <h1>Bienvenue sur le site de Delta Maintenance Entreprise !!</h1> </div>

<div id="corps">

<div id="menu"> <ul>

<li><a href="index.php?page=accueil" title="L'accueil">Accueil</a><br /><br /></li>

<li><a href="index.php?page=presentation" title="Presentation">Presentation</a><br /><br /></li>

<a href="index.php?page=presentation_electricite" title="Electricite">Electricite</a><br /><a href="index.php?page=presentation_automatisme" title="Automatisme">Automatisme</a><br /><a href="index.php?page=presentation_plomberie" title="Plomberie">Plomberie</a><br /><br />
<li><a href="index.php?page=contact" title="Contact">Nous contacter</a><br /><br /></li></ul>

<div id="xiti-logo"><p>
<a href="http://www.xiti.com/xiti.asp?s=274005" title="Mesurez votre audience">
<script type="text/javascript">
<!--
Xt_param = 's=274005&p=';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" ';
Xt_i += 'src="http://logv32.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Analyse d\'audience">');
//-->
</script>
<object>
<noscript>
<div id="xiti-logo-noscript">
Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv32.xiti.com/hit.xiti?s=274005&p=" alt="Analyse d'audience" />
</div>
</noscript>
</object>
</a>
</p></div>  </div>

<div id="droite">

<html>

<head>

<title> DME-Nimes-Gard (30) : electricite - industriels/batiment/particuliers, alarme, lumière, ..</title>

<meta name="robots" content="index, follow, all">

<meta name="description" content="Electricite industrielle, automatisme, chauffage, climatisation a Nimes, devis sur simple demande n'hesitez pas a me contacter !">

<meta name="keywords" content="electricien, electricite, electricite industrielle, climatisation, climatisation reversible, automatisme, portail electrique, alarme, chauffage, domotique, plomberie, electricien nimes, electricité nimes, climatisatin nimes, automatisme nimes, portail electrique nimes, alarme nimes, chauffage nimes, domotique nimes, plomberie nimes, electricien gard, electricite gard, automatisme gard, climatisation gard, alarme gard, chauffage gard, domotique gard, plomberie gard, Sarl DME, artisan, antennes, satellite, depannage nimes, maintenance nimes, installation nimes, depannage gard, maintenance gard, installation gard, portail automatique, coffret electrique, coffret electrique nimes, coffret electrique gard, eclairage, eclairage nimes, eclairage gard"> 

<meta name="author" lang="fr" content='F. Mombel'>

<meta name="Revisit-after" CONTENT='15 days'>

<link rel="home" title="Accueil" href='http://thanor.chez-alice.fr/index.php?page=accueil'>

<link rel="author" title="Contact" href='societedme@tiscali.fr'>

<META name="verify-v1" content="OhITfZcvdJlvUvd5KA3NQr8DH7kP4SAq0lgf5J/9ZwY=" />

</head>

<center>Voici quelques photos pour vous montrer quelques réalisations en électricité, qu'il s'agisse de particuliers ou d'industriels.</center><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01047.JPG" alt="Eclairage jardin"></img><br>Concept d'éclairage d'un jardin privé.<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01048.JPG" alt="Eclairage jardin"> </img><br> Une autre vue.<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01054.JPG" alt="Eclairage extérieur"> </img><br> Eclairage homologué d'extérieur.<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01056.JPG" alt="Eclairage extérieur 2"> </img><br> La suite...<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01057.JPG" alt="Eclairage extérieur 3"> </img><br> Une autre vue.<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01059.JPG" alt="Eclairage extérieur 4"> </img><br> Encore une autre vue.<br><br><img id=photo vspace=20 align=absmiddle src="http://thanor.chez-alice.fr/Electricite/DSC01060.JPG" alt="Piloatage par HF">  </img><br> Tous les éclairages extérieurs sont pilotés par télécommande HF camouflée dans les feuillages.<br><br><b>Prochainement, nous vous proposerons les photos d'une installation électrique/domotique actuellement en cours de réalisation dans une maison.

<br>N'hésitez pas à me contacter !</b>
</html>
</div>

</div>

<div id="pied">  </div>

</body>

</html><!-- Cyberestat -->
<script language="javascript"><!--
	CM_CLIENT = "tiscali";
	CM_SECTION1 = "PagesPersoTiscali";
	CM_RUBRIQUE = "general";
// --></script>
<script language="javascript" src="http://js.cybermonitor.com/tiscali.js"></script>

<noscript><img src="http://stat3.cybermonitor.com/tiscali_v?R=general&S=total;PagesPersoTiscali"></noscript>
<!-- /Cyberestat -->

**Thanor** · 16/10/2006, 19h49

Oui oui oui oui c'est exact, je viens de corriger ça, mais j'avais oublié de modifier cette page c'est pour ça ^^ je pense que tout roule à présent, hormis le problème de mon ascensceur vertical et mon menu fixe.

Edit : j'ai réussi à avoir l'ascensceur mais ça ne fonctionne que sous FF pas sous IE. De plus mon menu n'est pas fixe. enfin je n'arrive pas à placer un footer en bas de ma page... bouh je vais pas y arriver...

**trotters213** · 17/10/2006, 08h37

Une nouvelle journée commence

Pour le footer utilise clear:both;. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#footer{
width:100%;
padding:10px 0px 0px 0px;			
height:50px;
border-top:1px solid #cccccc;
clear:both;
}

Pour ton menu fixe cherche sur Google du côté de "position fixed hack IE" (ou un truc du genre)et tu vas voir qu'il y en a une quantité phénoménales de sites qui parles de ça.

PS :
- tu voulais respecter les standards du W3C donc pas de absmiddle

- dans ta page presentation_automatisme tu ne peux pas faire ça :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul>
  <li><a href="index.php?page=accueil" title="L'accueil">Accueil</a><br /><br /></li>
  <li><a href="index.php?page=presentation" title="Presentation">Presentation</a><br /><br /></li>
  <a href="index.php?page=presentation_electricite" title="Electricite">Electricite</a><br />
  <a href="index.php?page=presentation_automatisme" title="Automatisme">Automatisme</a><br />
  <a href="index.php?page=presentation_plomberie" title="Plomberie">Plomberie</a><br /><br />
  <li><a href="index.php?page=contact" title="Contact">Nous contacter</a><br /><br /></li>
</ul>

pas de <br /> dans des éléments de liste et pas de balises <a> non encadrées par un <li></li>
- dernier point, je sais pas si tu le gères ou pas donc je te préviens, ta barre d'adresse se présenta comme ça : http://thanor.chez-alice.fr/index.ph...on_automatisme si quelqu'un mets un lien vers un script malveillant à la place de presentation_automatisme tu risques d'avoir les boulards

**trotters213** · 17/10/2006, 08h46

position:fixed sous IE recontré totalement par hasard.

**Thanor** · 17/10/2006, 11h26

Et comment je peux faire pour aller à la ligne sans <br /> ?

Pour le passage en paramètre d'une url dans l'adresse, oui je le gère, j'ai réparé la faille de sécurité donc ça va

le clear:both dans footer sert à quoi?

Rendus différents sous IE et FireFox.

CSS

Discussions similaires

Partager

Partager