Quelques soucis de balises avec firefox

[Skyline]

Salut a tous sur mon site (xhtml+css certifié) j'ai certain probleme sous firefox.

Sous firefox :



Sous IE6



J'ai donc un probleme de centrage de texte, l'alignement, de marge en bas du texte et avec la commande float du css

Est ce que quelqu'un connait les balises alternatives ces balises qui doivent etre propre a ie6 ?

[Skyline]

J'allais oublier, voici l'adresse du site

http://perso.wanadoo.fr/skyline/

[calimo]

IE interprète les float différemment des autres (sans parler d'Opera )...
Tu n'as pas d'alternatives ?

[calimo]

Rapide coup d'oeil, quelques remarques :

Du XHTML 1.1 doit être servi avec le type Mime application/xml+xhtml. Je ne sais pas pourquoi le validateur laisse passer cette erreur. Voir la page http://www.w3.org/TR/xhtml-media-types/#summary


Ensuite

Code : Tout sélectionner

  <div class="principal">
    <div class="titre">  
      <div class="titretexte">Tutoriaux The Gimp</div>
    </div>
    <div class="texte">
      <div class="textetexte">
        <p class="illustration"><a href="gimp/index.htm"><img src="page_accueil/gimp.gif" width="61" height="48" alt="gimp" /></a></p>

        <p>Voici la dernière des rubrique de tutoriaux, celle de "The gimp", ce logiciel gratuit et très puissant vient de Linux et arrive sur windows</p>
      </div>
    </div>
  </div>

5 div pour deux lignes c'est beaucoup trop !
Essaye

Code : Tout sélectionner

        <h2>Tutoriaux The Gimp</h2>
        <p class="illustration"><a href="gimp/index.htm"><img src="page_accueil/gimp.gif" width="61" height="48" alt="gimp" /></a></p>

        <p>Voici la dernière des rubrique de tutoriaux, celle de "The gimp", ce logiciel gratuit et très puissant vient de Linux et arrive sur windows</p>

Ça devrait suffire, à la rigueur tu peux encadrer chaque bloc d'un div mais pas plus.

Pour les float il faut mettre des clear pour tout faire repasser à la ligne. Je crois que ça suffit (à vérifier).

[jv2759]

Il ne faut pas oublier que valide xhtml et css ne veux pas dire site visible. Car malheureusement certain naviguateur gére beaucoup plus mal les consigne du w3c que d'autre. Donc ce que tu crois avoir fait de juste sous ie ne l'est pas forcement...

Rapidemant j'ai regarder comme avoir un effet qui ressemble à ce que tu as. Il faut maintenant améliorer j'ai travailler vite fait...

Code : Tout sélectionner

.illustration {
	vertical-align: sub;
	margin-top: 2px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
}

Code : Tout sélectionner

    <div class="texte">
      <div class="textetexte"> 
        <p><a href="http://perso.wanadoo.fr/skyline/photoshop/index.htm"><img src="Skyline%20%20-%20Tutoriaux%20pour%20Photoshop,%20The%20Gimp%20et%20Photofiltre_fichiers/elements.gif" alt="photoshop" height="76" width="80" class="illustration"></a>
        Vous trouverez dans cette rubrique des tutoriaux créés à la base pour 
          Photoshop Elements 2.0 mais ces tutoriaux sont applicables sur les autres 
          versions de Photoshop. </p>
      </div>
    </div>

Ce n'est qu'un exemple tu doit pouvoir faire beaucoup mieux...

[SB]

Du XHTML 1.1 doit être servi avec le type Mime application/xml+xhtml. Je ne sais pas pourquoi le validateur laisse passer cette erreur.

devrait Voilà pourquoi il laisse passer.

[Invité]

Rapide coup d'oeil, quelques remarques :

Du XHTML 1.1 doit être servi avec le type Mime application/xml+xhtml. Je ne sais pas pourquoi le validateur laisse passer cette erreur. Voir la page http://www.w3.org/TR/xhtml-media-types/#summary


Ensuite

Code : Tout sélectionner

  <div class="principal">
    <div class="titre">  
      <div class="titretexte">Tutoriaux The Gimp</div>
    </div>
    <div class="texte">
      <div class="textetexte">
        <p class="illustration"><a href="gimp/index.htm"><img src="page_accueil/gimp.gif" width="61" height="48" alt="gimp" /></a></p>

        <p>Voici la dernière des rubrique de tutoriaux, celle de "The gimp", ce logiciel gratuit et très puissant vient de Linux et arrive sur windows</p>
      </div>
    </div>
  </div>

5 div pour deux lignes c'est beaucoup trop !
Essaye

Code : Tout sélectionner

        <h2>Tutoriaux The Gimp</h2>
        <p class="illustration"><a href="gimp/index.htm"><img src="page_accueil/gimp.gif" width="61" height="48" alt="gimp" /></a></p>

        <p>Voici la dernière des rubrique de tutoriaux, celle de "The gimp", ce logiciel gratuit et très puissant vient de Linux et arrive sur windows</p>

Ça devrait suffire, à la rigueur tu peux encadrer chaque bloc d'un div mais pas plus.

Pour les float il faut mettre des clear pour tout faire repasser à la ligne. Je crois que ça suffit (à vérifier).

Certe je dois simplifier le code mais comment faire pour placer le fond.
la balise h2 elle se paramétrer pour retomber sur le même look.[/b]

[Invité]

Sinon j'ai pas compris l'histoire du " type Mime application/xml+xhtml"
Vous pouvez m'expliquer ?

[jv2759]

pour h2, au lieux de faire

.titre{}

tu fait directement

h2{}

L'avantage de h2, c'est qu'il veux déjà dire que c'est un titre.

En plus tu utilise 2 div imbriquer à chaque fois, ce qui est inutile, tu peux tres bien en n'utiliser qu'un seul...



Pour l'entête xhtml. En fait c'est que quand tu demande un document à un serveur, ce dernier doit avant tout dire qu'elle type d'information il vas envoyer.

Or le xhtml 1.1, demande que le type envoyer soit :

application/xml+xhtml


Mais actuelement tout le monde n'est pas capable de gére ce genre d'entête, donc cela pause des probléme. Ce qui fait que ton document et envoyer comme :

text/html

Or ce n'est pas juste car ce n'est pas ce qui est demander.


Donc quand tu à chercher à valider ton code, il aurais du faire une erreure, ce qui n'est pas le cas.

[Skyline]

Merci j'ai compris.
Des que j'ai le temps je refait une refonte du site avec cette méthode bien pratique.

Sinon sous firefox je n'arrive pas centrer mes blocs comme sous ie6

[jv2759]

Je te conseil de faire un petit tour sur les site qui son ici :

http://www.geckozone.org/forum/viewtopic.php?t=13

il peuvent à l'occasion donner pas mal de truc sur l'utilisation de telle ou telle propriéter...

[Skyline]

Ok j'y vais

[bobo]

Centrage d'un bloc.
Soit l'extrait de code suivant :

Code : Tout sélectionner

<div class="container">
  <div class="contenu">
    Lorem ipsum dolor sit amet…
  </div>
</div>

Pour centrer le div "contenu" en utilisant la méthode standard (pas pour IE donc)

Code : Tout sélectionner

.contenu {
  margin-left: auto;
  margin-right: auto;
}

Pour IE

Code : Tout sélectionner

.container {
  text-align: center;
}
.contenu {
  text-align: left; /* Pour pas que le texte soit centré, juste le bloc */
}

Pour les deux, il faut tout

Code : Tout sélectionner

.container {
  text-align: center;
}
.contenu {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

Tou celà est expliqué en détail dans cet article.
Pour les float. Ils se comportent comme ils devraient dans Mozilla, et il me semblait que IE les interprétait comme ça aussi. Enfin bref, pour plus d'explication sur les float, je te suggère de lire cet article.

Enfin, je te suggère d'utiliser une balise <hx> à la place de <div class="titre">, c'est sémantiquement meilleur, et plus simple au niveau du code.

[Skyline]

Merci pour tes explications , c'est déja plus clair

[Benoit]

Du XHTML 1.1 doit être servi avec le type Mime application/xml+xhtml. Je ne sais pas pourquoi le validateur laisse passer cette erreur.

Parce que ce n'est pas une erreur dans la page mais une erreur du serveur. C'est un validateur HTML et rien d'autre, il ne te signale pas non plus si tu as fait des fautes d'orthographe

(et surtout ça permet aussi de valider des pages envoyées directement par upload)