Discussion :

[luta]

soit la page suivante à ouvrir avec IE puis firefox:
http://sebastien.tiscar.club.fr/sof/NewsXML.xml
bon vous voyez bien le soucis avec les images je suppose
étant un doc xml on ne voit pas vraiment le code mais disons que c est écrit ainsi
pour un élément

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
 
<div class="RSS">
  <div class="item">
    <div class="title"><a href="http://www.sofreavia.com">Titre3</a></div>
    <div class="content">
      <div class="img"><img src="http://images.google.fr/images?q=tbn:RB8dwah8OCPKgM:http://lapuissancemillenere.viabloga.com/images/goku_t.jpg"></div>
      <div class="description" align="right">Description 3 zoirgfe zrhozrgh zoir gozie goize bgoizbnoizeb oizebr goizbegoizbe gobzegoibzerogbzorebgozb ozbgozbegobzuzbeg u ob oib ioboib oibeafo b obqzeofub oouebf zefoib 
      </div>
    </div>
  </div>
 <div class="item">
   <div class="title">Titre 2</div>
   <div class="content">
     <div class="img"><img src="http://www.developpez.com/template/logo.gif"></div>
     <div class="description" align="right">Description2</div>
    </div>
  </div>
</div>

et les css correspondantes...

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
/*Contient ttes les news*/
.RSS{
	width:100%;
	float:left;
	display:block;
	margin-bottom:1px;
}
.RSS .item{
	display: block;
	border: thin solid #008AB5;
	padding: 10px;
	margin: 5px;
	width: 800px;
}
.RSS .item .title{
	background-color: #00A5D9;
	margin: 3px;
	padding: 5px;
	font: bold larger;
	letter-spacing: 3px;
	text-align: left;
	text-indent: 15;
	word-spacing: 5;
}
.content{
display:block;
float:left;
width:800px;}
.RSS .item .img{
	border: medium solid Black;
	border-width: 3;
	margin: 1;
	display: inline;
	float:left;
}
 
.RSS .item .description{
	display: inline;
	float: left;
	margin: 1;
	text-align: justify;
}

ce que je ne comprend pas c est pourquoi mon image est "au dessus" du reste...pourtant avec IE...nickel..
si qq un comprend mon soucis, je le remercie de m aider.

[PuppeT mAsTer]

Ton problème est fréquent : il vient de IE à vrai dire !! Microsoft n'a pas suivi les normes W3C pour son navigateur et en gros IE n'a pas les mêmes "mesures" que Firefox donc il te faut créer une CSS pour IE et uen pour FF et les autres navigateurs suivant les normes.

++

PM

[luta]

je comprend pas...ou est l erreur donc?

[PuppeT mAsTer]

L'erreur est dans les softs qui ne comprennent pas la même chose dans tes mesures de placements de tes div. Grossièrement tu dis 3 px au deux, FF comprendra 3px et IE comprendra 2px par exemple. D'où la necessité de créer deux CSS avec une détection du navigateur client.

PM

[luta]

ok, mais je ne voies pas de solution du coup puisque je ne connais pas la taille de mon image...
normalement,
le div contenant le div qui lui contient l image devrait se resizer automatiquement or ce n est pas le cas on dirait..du coup, je ne sais vraiment pas comment régler mon problême.. la taille des img changeant tout le temps

[masu]

la premiere chose qui me derange c'est l'abscence de doctype.
Deuxiement ca fait pas un peu beaucoup de div tout ca.

Ensuite pour ton image je ferai bien un float:left dessu

[luta]

le doctype n est utile que pour la validation...or ce que je veux c est simplement que tout le monde puisse voir mon doc...

la quantité de div est peut être un peu importante certes mais je suis loin d être un spécialiste webmaster ...

Ensuite pour ton image je ferai bien un float:left dessu

est ce que tu veux dire que je peux virer le div qui entoure l image et mettre une propriété css flaot: left sur l image elle même?

[masu]

quelque chose dans ce genre serait plus clair il me semble

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="RSS">
  <div class="item">
    <h3 class="title"><a href="http://www.sofreavia.com">Titre3</a></h3>
    <img class="img" src="http://images.google.fr/images?q=tbn:RB8dwah8OCPKgM:http://lapuissancemillenere.viabloga.com/images/goku_t.jpg"> Description 3 zoirgfe zrhozrgh zoir gozie goize bgoizbnoizeb oizebr goizbegoizbe gobzegoibzerogbzorebgozb ozbgozbegobzuzbeg u ob oib ioboib oibeafo b obqzeofub oouebf zefoib
    <div class="spacer">&nbsp;</div>
  </div>
  <div class="item">
    <h3 class="title">Titre 2</h3>
    <img class="img" src="http://www.developpez.com/template/logo.gif"> Description2
    <div class="spacer">&nbsp;</div>
	</div>
</div>

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
.RSS{
	width:100%;
	margin-bottom:1px;
}
.RSS .item {
	border: thin solid #008AB5;
	padding: 10px;
	margin: 5px;
	width: 800px;
	text-align: justify;
}
.RSS .item .title {
	background-color: #00A5D9;
	margin: 3px;
	padding: 5px;
	font: bold larger;
	letter-spacing: 3px;
	text-align: left;
	text-indent: 15;
	word-spacing: 5;
}
.content {
	display:block;
	float:left;
	width:800px;
}
.RSS .item .img {
	border: medium solid Black;
	border-width: 3;
	margin: 1;
	float:left;
}
 
.spacer {
	clear:both;
	height:1px;
	line-height:1px;	
}

[masu]

le doctype n est utile que pour la validation...or ce que je veux c est simplement que tout le monde puisse voir mon doc...

Le doctype ne sert pas qu'a la validation, suivant le doctype les navigateurs peuvent avoir différents rendus.
Si tu veu que ton site soit lisible convenablement tu doit quand meme produire un document HTML valide.

[luta]

Merci bcp je vais essayer ça.

[luta]

hummm je vois,
est ce que les logiciels du type dreamweaver peuvent nous "forcer" à respecter un doctype?
Merci pour votre aide en tout cas

[masu]

hummm je vois,
est ce que les logiciels du type dreamweaver peuvent nous "forcer" à respecter un doctype?
Merci pour votre aide en tout cas

Non dreamweaver ne fait pas ca, je ne connais pas de logiciels qui le font.
Par contre tu peu utiliser l' extention firefix html validator, il te met une petite icon en bas a droite pour t'indiquer si ton code est valide ou pas tres pratique je trouve.
ensuite il y a le site de la w3c pour valider.