FireFox - Retour à la Ligne - Zone de Texte [CSS]

**Neroptik** · 24/02/2006, 13h32

Bonjour, j'ai deux trois petits soucis avec mon site, quoi de plus normal sur un forum d'entraide hihi.
Le premier defaut est un petit décalage que je n'arrive pas à resoudre à propos du positionnement des background sous firefox, pour ceux qui utilisent ce logiciel, rendez vous à cette adresse : http://adonisia.free.fr en bas de la page. Ce petit morceau decalé vers le bas se Nomme "Centrebas" dans ma feuille CSS ci dessous. et je n'arrive pas a consilier le tout avec Internet Explorer soit c'est IE qui le decale vers le haut et FireFox est bien soit c'est FireFox qui le decalle vers le bas et IE est bien ! je suis un peu Bloqué. voila pour mon premier problème.

Le deuxième des à propos de ma zone de texte, je ne sais pas comment expliquer cela mais c'est assez genant pour les Utilisateurs qui sont en 1024*768, pour les autres testez vous même sur mon site en reduisant la fenêtre en largeur. Le texte disparait sur les cotés ! jusqu'a se chevaucher pour ne plus rien voir ! dans ma feuille de style la partie texte se nomme "contenu" et bien que j'ai appliquer des marges, elles n'ont pas l'aire d'être prises en compte ...

sinon le texte ne se chevaucherai pas ! et pour le retour a la ligne, j'imagine que c'est du à mon "Line-height" qui est trop faible puisqu'il est à "2" mais en realité si je l'augmente mes lignes sont espacées abusivement !

J'aimerai donc que ma zone de texte soit bien définie au milieu de facon a ce que le texte ne se disparaisse pas si on reduit la fenetre et que celui ci passe à la ligne ... proprement ! Je le répète, faites un tour sur mon site pour bien comprendre.

Merci d'avance

Voici ma feuille de style :

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
a.thumbnail {
  display:block;
  width:80px;
  height:80px;
  background-position: center;
  background-repeat:no-repeat;
}
a.thumbnail span {
  visibility:hidden;
}
img {
	display: block;
	border:none;
}
 
a:link { 
	text-decoration: none;
	border:none;
}
 
a:visited { 
	text-decoration: none;
	border:none;
}
 
a:hover { 
	text-decoration: none;
	border:none;
	cursor: url("http://adonisia.free.fr/site2/uo.cur"); 
}
 
body {	
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000000;	
	font-size: 1em;	
	line-height: 12px;	
	color: #FFF8DC;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	cursor:url("http://adonisia.free.fr/site2/uo.cur"); 
}
#conteneur {
	position: inherit;
	top:0px;
	height:42px;
	background-image:url(http://adonisia.free.fr/site2/img/menu.gif);
	background-repeat: repeat-x;
	background-attachment:scroll;
	background-color:#000000;
	background-position:top left;
}
#menug {
	position:absolute;
	top:42px;
	left:0%;
	width:195px;
	height:954px;
	background-image:url(http://adonisia.free.fr/site2/img/menudroit.gif);
	background-repeat:no-repeat;
	background-attachment: scroll;
	background-color:#000000;
	background-position:left top;
}
#menud {
	position:absolute;
	top:42px;
	right:0%;
	width:195px;
	height:954px;
	background-image:url(http://adonisia.free.fr/site2/img/menugauche.gif);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-color:#000000;
	background-position:right top;
}
#centre {
	position: inherit;
	top:42px;
	right:195px;
	left:195px;
	height:72px;
	background-image:url(http://adonisia.free.fr/site2/img/centre.gif);
	background-repeat: repeat-x;
	background-attachment:scroll;
	background-color:#000000;
	background-position: center;
}
#banniere {
	position: inherit;
	top:0px;
	height:100px;
	background-image:url(http://adonisia.free.fr/site2/img/logo.gif);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color:#000000;
	background-position:top;
}
 
#contenu {
	position: static;
	margin-top:-21px;
	right:195px;
	left:195px;
	height:800px;
	background-image:url(http://adonisia.free.fr/site2/img/paper.jpg);
	background-repeat: repeat;
	background-attachment:scroll;
	background-color:#000000;
	line-height: 2px;
}
#centrebas {
	position: inherit;
	top:-21px;
	right:195px;
	left:160px;
	height:103px;
	background-image:url(http://adonisia.free.fr/site2/img/centrebas.gif);
	background-repeat: repeat-x;
	background-attachment:scroll;
	background-color:#000000;
	background-position:center;
	}
#textemenug {
	position:absolute;
	line-height: 0px;
	top:95px;
	left:45px;
	height:400px;
}
#textemenud {
	position:absolute;
	text-align:right;
	line-height: 0px;
	top:95px;
	right:45px;
	height:400px;
}

**dor_boucle** · 24/02/2006, 15h49

position: inherit; ??? et là ca herite de quoi d'autre que d'un div??

**Neroptik** · 24/02/2006, 17h12

Bah disons que j'ai appris le CSS sur le tas et que ca fonctionnait bien comme ca ... si tu a des suggestion a faire pour es trucs a modifier je suis à l'ecoute...

pour coder la feuille de style j'ai tester toutes les possibilités jusqu'a ce que ca fasse ce que je voulais.

**Neroptik** · 24/02/2006, 17h25

Ma partie contenu (ou se trouve le texte) n'est pas en inherit, elle est en static !

**narnou** · 24/02/2006, 19h36

Pour le soucis tu devrais normalement utiliser 2 feuilles de style différentes pour etre bien propre... détecter le navigateur et appliquer la bonne feuille de style...

Mais il y a une petite astuce pour contourner ca :

Précéder un style d'un _ empechera le moteur gecko (firefox, mozilla, netscape,...) d'iterpréter le style, mais iexplorer le comprendra...

Les browser standard eux, acceptent une syntaxe que iexplorer n'accepte pas, un truc du style #mondiv[id]. Le [id] indique que ce style ne concerne que les éléments possédant un attribut id (vu que l'appel de style se fait par id, aucun problème. on peut également jouer avec .uneclasse[class]).

Apparemment, iexplorer n'interprete pas non plus les propriétés placées dans un bloc de commentaire html () si la feuille de style est externe (<link rel="stylesheet" ...), firefox lui les reconnait. Attention par contre, si le style est codé directement dans la page (<style type='text/css" ...) iexplorer interpretera aussi le code en commentaire...

Tu peux donc utiliser ces astuces pour définir du code pour ces différents browsers.

Un peu bizarre comme procéder mais assez efficace. par contre il faut bien se dire que si un jour FF interpretre les _propriété ou ie les selecteur[attribut] ta css sera faussée :'(

Dans l'exemple de ton centre_bas :

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
 
#centrebas {
   position: inherit;
   /* cette ligne pour iexplorer seulement */
   _top:-21px;
   /* celle-ci pour firefox and co seulement */
   <!-- top:-60px; -->
   right:195px;
   left:160px;
   height:103px;
   background-image:url(http://adonisia.free.fr/site2/img/centrebas.gif);
   background-repeat: repeat-x;
   background-attachment:scroll;
   background-color:#000000;
   background-position:center;
   }

Ou bien une classe

Code :

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

1
2
3
#Centrebas {
...
}

pour iexplorer, et une classe

Code :

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

1
2
3
#Centrebas[id] {
...
}

pour firefox

Normalement, cela devrait t'avoir aidé

Pour ce qui est de ton problème de chevauchement de texte, personnellement je regarderai du coté de la propriété line-spacing, et de l'overflow de son conteneur... mais comme ca je ne vois pas...

Aussi pour l'histoire des margin je sais que firefox et ie ne les gere pas toujours de la meme manière, c'est parfois perturbant...

**Neroptik** · 25/02/2006, 15h52

Merci mille fois, je vais tester tout ca de suite. Et pour le texte je vais continuer mes recherches sur Line-spacing et overflow, merci pour tes astuce, je n'aurai jamais trouver tout seul.

Je vous tiens au courant de l'avancement 8)

Merci encore.

**Neroptik** · 25/02/2006, 16h16

Nikel ! L'attribut [id] fonctionne a merveille j'en ai meme profiter pour enlever un petit decalage au niveau des boutons de droite ! Merci vraiment impeccable... Bon vous pouvez pas voir le resultat tout de suite car j'ai pas acces a mes ftp pour le moment. mais en local je n'ai plus un sel problème

Me reste plus qu'a trouver pour cette histoire de retour a la ligne

J'attend d'avoir resolu mon probleme avec le texte avant de mettre la balise [resolu]

voila