Probleme de mise en page avec feuille de style

**Clydys** · 02/01/2009, 14h42

J'essaye de réaliser un petit site, avec une feuille de style, que j'ai écrit en piochant des infos sur le net car je suis moins que débutant, et j'ai plus ou moins réussi a faire ce que je voulais, le problème c'est que la majorité des internautes utilisent IE et exactement mon css présente un gros défaut de mise en page avec ce navigateur, LIEN SUPPRIMÉ ont peut le constater ici.
Mais avec firefox tout fonctionne correctement, je joins la feuille de style.
Je vous remercie d'avance.

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
102
103
104
105
106
107
108
109
110
111
112
113
114
 
 html,body {
	margin: auto;
	text-align: center; 
	background-color: #F4F4F4;
}
/*boite haute de la page avec largeur totale a placer juste apres la balise body*/
div#header {
	TEXT-ALIGN: center;
	color: #FFFFFF;
    background-image:url(haut.png); background-repeat: no-repeat;
	height: 90px;
    padding: 2px;
}
/*cololone de gauche*/
div#left {
    float: left;
    width: 220px;
	background-color: #F4F4F4;
}
/*boite a contenu libre avec texte a gauche*/
div#menus{
	TEXT-ALIGN: left;
	padding: 10px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	font-family: arial, verdana, sans-serif; color: #4A91C3; font-size: 10pt; font-weight: bold;
	border-width: 1px;
	border-style: solid; border-color: #ACACAC;
}
/*collone de droite*/
div#right {
    float: right;
	width: 180px;
	background-color: #F4F4F4;;
}
/*Boite a contenu libre avec texte au centre*/
div#sponsors{
	TEXT-ALIGN: center;
	padding: 10px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	font-family: arial, verdana, sans-serif; color: #4A91C3; font-size: 10pt; font-weight: bold;
	border-width: 1px;
	border-style: solid; border-color: #ACACAC;
}
/*collone du milieu*/
div#contenu{
	TEXT-ALIGN: center;
	color: #1D163F; 
    background-color: #F4F4F4;
	padding: 2px;
	margin:0px 190px 10px 230px;
}
/*boite contenu libre avec texte au centre, peut être place dans toutes les colonnes*/
div#libre {
	color: #1D163F;
	width: auto;  
    background-color: #FFFFFF;
	font-family: arial, verdana, sans-serif; font-size: 10pt;
	padding: 5px;
	border-width: 1px;
	border-style: solid; border-color: #ACACAC;
	margin-bottom: 5px;
}
/*page complete pour avoir une largeur fixe au centre de l'écran*/
div#page {
	width: 1000px;
    margin:10px auto 5px auto;
	color: #1D163F;
    background-color: #F4F4F4;
	TEXT-ALIGN: center;
}
/*bas de page a placer juste avant la balise /body*/
div#footer {
	TEXT-ALIGN: center; color: #FFFFFF;
	height: 90px;
    background-image:url(bas.png);
	position: relative;
	margin-bottom: 5px;
	clear : both;
	width: 100%;
	font-family: arial, verdana, sans-serif; color: #FFFFFF; font-size: 7pt;
 }
 /*boite a contenu libre avec texte a gauche, peut etre placé dans n'importe quelle collone*/
div#libreg{
	text-align: left;
	color: #1D163F;
	width: auto;  
    background-color: #FFFFFF;
	font-family: arial, verdana, sans-serif; font-size: 10pt;
	padding: 5px;
	border-width: 1px;
	border-style: solid; border-color: #ACACAC;
	margin-bottom: 5px;
}
a:link {
	color: blue;
	text-decoration:none;
}
 
a:visited {
	color: purple;
	text-decoration:none;
}
 
a:active {
	text-decoration:overline;
}
 
a:hover {
	color:red;
	text-transform: uppercase;
}

**glober62** · 02/01/2009, 14h56

Bonjour,

Quelle version utilises-tu pour ie ?

**Macmillenium** · 02/01/2009, 14h58

Bonjour,

Dans ton code CSS, #right et #left sont floattante alors pourquoi #contenu ne l'est pas aussi ?
Dans ton code HTML tes div ne sont pas dans l'ordre => tu as left right contenu alors que logiquement c'est (selon l'ordre d'affichage) left contenu right.

Voici ton code CSS corrigé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
/*collone du milieu*/
div#contenu{
	TEXT-ALIGN: center;
	color: #1D163F; 
    background-color: #F4F4F4;
	padding: 2px;
	margin:0 5px;
	float:left;
	width:575px;
	}

et HTML :

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
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
165
166
167
168
169
170
171
172
 
<body>
<div id="header"></div>
<div id="page">
	<div id="left">
 
	<div id="menus">
<img src="inc/catgauche.gif" border="0"> MENU <br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./">  Accueil</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./tchat/">  Forums</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./tchat/map.php">  Carte des membres</a><br/>
 
<hr>
<img src="inc/lien.gif" border="0"><a href="./tchat/chat.php">  Salle de discussion</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./tchat/annuaire.php">  Annuaire</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./tchat/arcade.php">  Jeux d'arcade</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./Azulejos-Fresques.php">  Fresques-azulejos</a><br/>
</div>
 
<div id="menus">
<img src="inc/catgauche.gif" border="0">   ACTUALITE   <br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./A-la-une.php">  A la Une</a><br/>
<hr>
<img src="inc/lien.gif" border="0"><a href="./Faits-divers.php">  Faits divers</a><br/>
</div>
<div id="sponsors">
<img src="inc/catgauche.gif" border="0"><b>  Géolocalisation</b>
 
<hr>
<script language="JavaScript" src="../compteur_geoloc/geoloc.php" ></script><noscript><a href='http://www.geo-loc.com'>GEOLOC</a></noscript>
</div>
<div id="sponsors">
<img src="inc/catgauche.gif" border="0"><b>  Annonces</b>
<hr>
<script type="text/javascript">
var pf_id = "1601223";
var pf_format = "ctext4_160x600";
var pf_lang = "";
var pf_xslurl = "http://hst.tradedoubler.com/file/20649/contextual/pf_cx.xsl";
var pf_maxresults= "4";
var pf_method = "automatic";
var pf_keywords = "";
var pf_exclude = "";
var pf_categories = "";
var pf_epi = "";
var pf_bgcolor = "FFFFFF";
var pf_bordercolor = "ACACAC";
var pf_linkcolor = "0B0E17";
var pf_urlcolor = "0048FF";
var pf_textcolor = "858585";
</script>
<script type="text/javascript" id="pf_ads" src="http://hst.tradedoubler.com/file/20649/contextual/pf2.js"> </script>
</div>
 
	</div>
 
 
                <div id="contenu">
					<div id="libre">
						<img src="inc/catgauche.gif" border="0"><b>  Bienvenus chez Portugal-France</b>
 
						<hr>
 
<p align="left"><b>Chers Amis et chères Amies Internautes</b></p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Soyez les bienvenu(e)s sur le nouveau site Portugal-France Le site de la communauté Portugaise de France.</p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Depuis quelques mois que je cherchait un site ou la communauté portugaise puisse débattre des sujets qui leur tiennent a cœur, ainsi je cherchait un site accessible par tous, particulièrement visitable par les plus jaunes et cela sans craintes de leur age!!! 
N'ayant pas trouvé j'ai décidé de lancer celui-ci.</p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Maintenir et multiplier notre excellente culture correspond aux intérêts généraux.</p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">Moi-même et tous ces qui voudront participer a ce projet (sans retour financier), nous allons travailler dans un esprit d'ouverture, à élargir nos rapports amicaux, à accroître les échanges et à promouvoir la compréhension mutuelle entre les peuples et communautés. </p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	A cet égard, beaucoup reste à faire, mais j'en suis sur et certain qu'il y a de très belles perspectives devant nous. </p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Je souhaite ardemment que ce site devienne une fenêtre qui révèle les charmes de notre pays, les particularités et les relations de notre peuple, que cette fenêtre joue le rôle d'un pont qui:</p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Au travers du temps, révèle des facilités de communications leur serve de plate-forme pour des échanges francs, sincères, amicaux afin de devenir de vrais amis.</p> 
<p align="left"><img src="inc/catgauche.gif" border="0">	C'est avec l'espoir d'atteindre ce but que nous travaillerons sans ménager nos efforts. Soyez-en certains. </p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Je souhaite à chacun, et à chacune d'entre vous, que votre visite soit agréable et soit une réussite.</p>
 
<p align="left"><img src="inc/catgauche.gif" border="0">	Bien entendu nous restons a votre écoute pour toute question ou suggestion. <a href="./tchat/misc.php?action=rules">Consultez la charte du site.</a></p>
					</div>	
							<div id="libreg">
							<img src="inc/catgauche.gif" border="0"><b>  Derniers messages du Forum</b>
						<hr>
 
								<p align="left">?<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=19&amp;action=new" title="Homme - envie d'uriner en permanence">Homme - envie d'uriner en permanence</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=90&amp;action=new" title="Homme d'origine portugaise arret? a paris">Homme d'origine portugaise arret? a paris</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=89&amp;action=new" title="Avancement du site">Avancement du site</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=88&amp;action=new" title="A nossa velhina tradi??o">A nossa velhina tradi??o</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=67&amp;action=new" title="F?tes de fin d'ann?e">F?tes de fin d'ann?e</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=87&amp;action=new" title="superbe les petit jeux">superbe les petit jeux</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=86&amp;action=new" title="E voc? como foi o seu natal?">E voc? como foi o seu natal?</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=66&amp;action=new" title="Espace manquant">Espace manquant</a></li></ul>
 
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=79&amp;action=new" title="Receita dos formigos para festas de natal et fin de ano">Receita dos formigos para festas de natal et fin de ano</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=85&amp;action=new" title="Grande nuit de la Saint Sylvestre a la LUA VISTA">Grande nuit de la Saint Sylvestre a la LUA VISTA</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=82&amp;action=new" title="Cela ne sers a rien de pleurer">Cela ne sers a rien de pleurer</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=84&amp;action=new" title="Rancho moda do Centro">Rancho moda do Centro</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=83&amp;action=new" title="A vendre: navettes spatiales d'occasion pas ch?res, contacter la Nasa">A vendre: navettes spatiales d'occasion pas ch?res, con ...</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=81&amp;action=new" title="Hypertension art?rielle">Hypertension art?rielle</a></li></ul>
<ul><li><a href="http://www.portugal-france.com/tchat/viewtopic.php?id=80&amp;action=new" title="Un adolescent de Lesneven (29) d?c?de par suffocation">Un adolescent de Lesneven (29) d?c?de par suffocation</a></li></ul>
	</p>
							</div>
 
 
				</div>
 
 
 
 
 
		<div id="right">
		<div id="sponsors">
<img src="inc/catgauche.gif" border="0"><b>  Hebergement</b>
<hr>
<a href="http://1and1.fr/xml/order?k_id=19487266" target="_blank"><img src="http://banner.1and1.fr/xml/banner?size=4&number=1" width="125" height="125" border="0"/></a>
</div>
<div id="sponsors">
<img src="inc/catgauche.gif" border="0"><b>  Regie Pub</b>
 
<hr>
<a href="http://www.oxado.com/?origin=pub154580"><img src="http://www.portugal-france.com/Sponsors/oxado.jpg"></a><hr>
</div>
<div id="sponsors">
<img src="inc/catgauche.gif" border="0"><b>Annonces</b>
<hr>
<script type="text/javascript">
var uri = 'http://impfr.tradedoubler.com/imp?type(js)g(185274)a(1601223)' + new String (Math.random()).substring (2, 11);
document.write('<sc'+'ript type="text/javascript" src="'+uri+'" charset="ISO-8859-1"></sc'+'ript>');
</script>
</div
 
 
 
 
 
 
 
 
 
 
 
 
 
 
		</div>      
 
 
 
</div>
			<div id="footer">
?<a title="Clicky Web Analytics" href="http://getclicky.com/60617"><img alt="Clicky Web Analytics" src="http://static.getclicky.com/media/links/badge.gif" border="0" /></a>
<script src="http://static.getclicky.com/60617.js" type="text/javascript"></script>
<noscript><img alt="Clicky" width="1" height="1" src="http://static.getclicky.com/60617-db9.gif" /></noscript>
 © Copyright 2008 Portugal-france.com - Tous droits réservés.<br/>
Portugal-France.com recommande l'utilisation du navigateur libre et gratuit  <a href="http://www.mozilla-europe.org/fr/">Mozilla Firefox<img src="inc/logo_firefox.gif" border="0"></a> 			
			</div>
 
 
</body>
</html>

Fait attention a la qualité du code et a l'ouverture/fermeture des balises.

**GihefBey** · 02/01/2009, 15h28

Bonjour,

Quel est le problème ?
L'encodage de la page ?

Tu as deux fois <html>

Code html :

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

1
2
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>  <!-- en trop -->

Essaye en important ta feuille de styles plutôt comme ça

Code html :

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

<link rel="stylesheet" type="text/css" href="inc/ptfr.css">

Tu utilises plusieurs fois des id. Fais-en des class.

En xHTML les balises doivent être utilisées de manière appropriée
<hr />
<img />

-

**Clydys** · 02/01/2009, 18h42

Salut,

Merci aux intervenants, de m'avoir corrige les erreurs, il faut se dire que je suis vraiment débutant, apparemment tout fonctionne bien..

Pour l'instant je ne suis qu'a la structure, je me perfectionnerais par la suite, pour l'instant ces pages ne sont pas accessibles.

Merci beaucoup pour vos interventions.
Je déclare le sujet comme résolu, le problème principal venait de la boite de droite qui était positionné a l'interieur de celle du milieu.

Probleme de mise en page avec feuille de style

CSS

Discussions similaires

Partager

Partager