Discussion :

[LuckyDj]

Bonjour, j'ai une problème d'affichage uniquement sous internet explorer alors que mon site est valide w3. J'ai tout vérifié et je n'ai pas trouvé l'erreur c'est pour cela que je fais appel a vous!

voici l'adresse à laquelle la page est hebergée:
http://demierreluc.dyndns.org/test/

Vous pourrez voir que si vous l'ouvrez avec internet explorer, il y a un problème d'affichage avant le premier article...

Merci de votre aide!

[Invité]

C'est peut être pasque IE n'est pas aux normes (étonant ? NON!!).

[LuckyDj]

La tu m'apprends rien... mais n'empeche que la plupart des utilisateurs utilisent IE donc j'aimerai quand même résoudre mon problème... Meme si je n'utilise pas IE personellement

[Invité]

Tu peux afficher ton code ici s'il te plait ?

[LuckyDj]

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
<div class="corps">
  <table class="article">
    <thead>
      <!-- Titre de l'article (en-tête) -->
      <tr>
        <th> <?php echo  $donnees['titre_art']; ?> </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <!-- Lien vers la page de commentaire  -->
        <th><a href='#' onClick="window.open('commentaire.php?id=<?php echo $donnees['id']-1;?>','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=0, copyhistory=0, menuBar=0, width=800, height=430');return(false)">Ajouter/voir un commentaire</a></th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <!-- contenu de l'article -->
        <td><img class="<?php echo  $donnees['classe']; ?>" src="<?php echo  $donnees['source']; ?>" alt="<?php echo  $donnees['description']; ?>" title="<?php echo  $donnees['titre_img']; ?>"/>
          <p class="black"><?php echo  $donnees['texte']; ?></p></td>
      </tr>
    </tbody>
  </table>
</div>

et le CSS correspondant:

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
.corps {
   	margin-right: 25px;
   	margin-left: 200px;
   	margin-bottom: 10px;
   	padding: 5px;
   	color: #B3B3B3;
   	background-image: url(corps3.jpg);
   	border: 2px solid black;
   	border: inset;
   	margin-top: 10px;
 
}
 
.article {
   	margin-right: 25px;
   	margin-left: 25px;
   	margin-bottom: 10px;
   	padding: 5px;
   	color: #B3B3B3;
   	background-image: url(corps3.jpg);
   	border: 2px solid black;
   	border: inset;
   	margin-top: 10px;
}

[Invité]

C'est vraiment bizarre. Je peux pas t'aider désolé. Mais j'aimerais bien savoir ce qui cloche alors si qqun de plus expérimenté que moi pouvais regarder...

[LuckyDj]

J'ai localisé le problème, par contre je n'ai pas encore réussi à le résoudre... en fait j'ai fixé la largeur de la table en % et IE n'a pas l'air d'aprécier, le problème c'est que si je ne fais pas comme ca, Ca sera moche suivant les résolutions

Voici le CSS pour table

Code :

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

1
2
3
4
5
6
7
8
9
10
11
table {
	margin-right: 50px;
	margin-left: 50px;
	margin-bottom: 10px;
	padding: 5px;
	color: #B3B3B3;
	background-color: #626262;
	border: 2px solid black;
	width: 95%;
	border: outset;
}

[Invité]

J'ai eu un problème du style avec la page d'accueil de mon site. J'avais fixé les valeurs en % et le navigateur ne voulait rien savoir. J'ai remarqué qu'en enlevant le doctype le problème disparaissait.

[LuckyDj]

J'ai essayé ta variante mais ca ne change rien!

[IdF-Socrateus]

La tu m'apprends rien... mais n'empeche que la plupart des utilisateurs utilisent IE donc j'aimerai quand même résoudre mon problème... Meme si je n'utilise pas IE personellement

Aie confiance, FF vaincra !

sinon je comprend pas pourquoi ton style s'applique seulement sur une image et pas sur les thead, tr, th, td, etc ?!?
enfin, soit une classe s'applique à plusieurs éléments similaires -mais là y'en a qu'une à la fois-, soit à un seul, et dans ce cas :
si tu veux des styles pour une cellule précise, utilise plutôt des id

Code :

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

1
2
3
4
5
6
7
 
<tr id="image_tab" ...>
 
<style>
#image_tab {
}
</style>

mais à mon avis, trop mélanger les <table> et des padding de 50px en css, c'est pas le top...

[LuckyDj]

Le problème c'est que je modifierai bien de premier article avec un id mais c'est tout généré en php donc c'est un peu plus dur...

[<romain/>]

Peut-être que ca viens des margin et padding qui ne sont pas initialise a 0.

Code :

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

1
2
3
4
5
 
*{
margin:0;
padding:0;
}

Ou sinon tu peux abondonner la mise en page avec des tableaux...

[IdF-Socrateus]

juste au passage, le doctype est en 1ère ligne, avant tout autre envoi...

Ou sinon tu peux abondonner la mise en page avec des tableaux...

OUI !
pourquoi pas rester avec des divs, en plus t'en utilise déjà un paquet !

encore une fois, padding de 50px + table => pas bon ! (soit l'un, soit l'autre, mais là tu mélanges deux façons de mettre en page)
si tu trouves l'extension de firefox qui permet d'afficher la topologie de la page, ça devrait se voir tout de suite (je n'ai pas le lien ici, mais c'est dans les extensions pour "développeurs").

mais c'est avant tout une question de positionnement dans la page, non ?
le bloc est aligné juste en dessous de ton bloc de gauche, donc tu est en float:right; (position:float; par défaut); or ça ne rentre pas à cause du padding de 50px, donc ça le met à la ligne.
si ça ne marche pas avec ça, il te restera à changer tout le positionnement pour le passer en position:absolute;

[Auteur]

bonjour,

as tu définis un style particulier pour tes div bannières (1, 2, 3) et ton div menu (float, position,...) ?

un détail me gêne : tu définis le même fond pour ton div conteneur et ta table.

[LuckyDj]

Je vois pas comment arriver à ce résultat seulement avec des div... Oui bien sur je n'ai pas cité tout mon CSS il y en a encore un bout!

CSS des bannières:

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
#banniere1
{
   float: left; /* La première partie sera à gauche*/
   width:724px; /* On définit la largeur de l'image */
   height: 200px; /* On définit la hauteur de l'image */
   background-image: url("images/ban1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   padding-left: 10px;
}
 
#banniere2
{
   width:100%; /* Se répétera sur toute la largeur de l'écran */
   height: 200px;
   background-image: url("images/ban2.jpg");
   background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
   margin-bottom: 10px;
}
 
#banniere3
{
   float: right; /* La dernière partie est à droite */
   width:55px;
   height: 200px;
   background-image: url("images/ban3.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

[IdF-Socrateus]

ce que tu veux (tu me dis si je me plante mais bon...) :
- 1 bandeau en haut
- 1 bandeau en bas
- entre les deux, ta page avec :

- un bloc à gauche
- un bloc principal à droite
- contenant plusieurs blocs
- et un bloc pour switcher les pages en bas

ça donne donc :
- 1 div width:100% en haut
- 1 div pour la page width:100%, avec dedans :

- 1 div width:20% (par exemple, ou largeur fixe...)
- 1 div qui contiendra les autres blocs (je ne détaille pas plus, c'est le principe qui compte)...

- 1 div width:100% pour la bas de la page

des fois un bout de papier c'est pratique pour savoir où on va

[Auteur]

d'après la feuille de style de ses bannières, je crois qu'il voudrait les placer sur la même ligne (les hauteurs des bandeaux sont identiques), et c'est là que ça bloque (en partie).

banniere1-banniere2-banniere3
Je pense pour disposer les images correctement quelle que soit la résolution, il faut utiliser un tableau et les balises img.

A partir du moment où banniere1 et banniere2 sont "flottant", elles sortent du flux normal de la page. Ce n'est pas parce que tu définis un float left pour banniere 1 et float right pour banniere 3 que banniere 2 sera au milieu.
En ce qui me concerne j'ai une résolution 800x600, banniere 3 est à droite mais il cache une partie du 1er paragraphe.