28172 sujets

CSS et mise en forme, CSS3

Bonjour! Smiley biggrin

J'ai un petit problème depuis mon passage à Firefox3, certains éléments qui se trouvent dans mon "contenu" se décalent vers la gauche alors qu'ils doivent être centré à l'intérieur du contenu. J'ai remarqué ce problème depuis mon passage à Firefox3, et le plus étrange est que ce problème ne se produit que sur une partie du contenu et non l'ensemble.

Pour mieux comprendre, regardez sur cette page par exemple: http://chrispics.free.fr/chresidencelecarignan.php
Le titre, ainsi que le tableau, sont centrés par rapport au cadre noir. En revanche, les bandes bleus ainsi que les photos, en-dessous, sont décalées sur la gauche. Mais la où ça devient encore plus bizarre: si vous regardez la miniature tout en bas, vous voyez qu'elle n'est pas au même niveau que les autres plus haut, elle est + vers la droite, et donc en fait, elle se trouve dans la bonne position, celle où devrait être les autres.
Je vous met une screen si jamais le problème ne s'affichait pas sur votre navigateur...: http://chrispics.free.fr/chrispicsdivers/problemeff3.jpg

En regardant dans le code de ma page, je n'ai pas l'impression de voir de problème... savez-vous d'où cela peut-il venir? Smiley rolleyes
Modifié par Chrispic (09 Jul 2008 - 19:39)
Chrispic a écrit :
En regardant dans le code de ma page, je n'ai pas l'impression de voir de problème...

Pour ma part j'en vois quelques uns:
- des paragraphes vides utilisés pour créer des espacements en lieu et place de marges;
- des éléments FONT qui trainent; Smiley eek
- des attributs align="center" un peu partout; Smiley eek
- 7 erreurs HTML pour la page indiquée (dixit validateur du W3C).

On peut peut-être commencer par corriger tout ça.
Et pourquoi pas utiliser un peu de padding sur le cadre noir, et laisser son contenu prendre toute la largeur disponible dans le cadre?
Merci pour ta réponse.

Alors je viens de corriger les erreurs trouvées avec W3C, je n'avais pas testé la page lors de ma dernière modification de la page ^^

Concernant les éléments FONT, je suppose qu'ils ont été retiré avec la correction pour W3C, car j'avais remarqué qu'il y en avait en trop.

Pour les align="center", au fond c'est pas grave, non? Je veux dire, si on ne cherche pas à avoir un site totalement conforme?
Si je veux les remplacer pour obtenir le même effet, je dois passer par la feuille de style? (j'ai oublié de préciser que je suis pas très connaisseur en la matière, j'ai refait mon site et maintenant je me contente de réutiliser les pages en modifiant juste les informations).

Pour le contenu du cadre noir, j'ai pas envi que ça touche les bords, je trouve ça pas très esthétique.
Modifié par Chrispic (09 Jul 2008 - 13:44)
Bonjour

a écrit :
Pour les align="center", au fond c'est pas grave, non? Je veux dire, si on ne cherche pas à avoir un site totalement conforme?


Difficile dans ces conditions d'exiger d'un navigateur respectueux des standards de se conformer à tes attentes si toi tu ne l'est pas, non ?
Ouais sûrement. Ces histoires de conformité sont plus prise de tête qu'autre chose pour moi Smiley biggol

Mais des align="center" pourraient expliquer mon problème? Si c'était le cas, pourquoi mon problème se situe à un niveau où il n'y a pas de align="center"?

Je vais essayer d'arranger ça tout de même, mais comment centrer mes éléments dans le tableau dans ce cas?
Désolé pour ce double post, mais c'était pour dire que je pense avoir résolu mon problème.

En regardant le tutoriel de ce site et ma feuille de style, j'ai effectué ces modifications pour mes miniatures 106x100:

CSS que j'avais:

.miniature{
width:487px;
margin-left: 10px;
border-style:solid; 
border-width:1px; 
border-color:#fff;
}


Et ce que j'ai modifié:

.miniature{
[b]margin-left: 10px;
margin-right: 10px;
width: 487px;[/b]
border-style:solid; 
border-width:1px; 
border-color:#fff;
}


Toutefois, je ne comprends toujours pas pourquoi ça marchait très bien avant sans ça. Smiley rolleyes

Edit: et finalement j'opte pour ça, puisque c'est plus court et que ça marche aussi:

.miniature{
margin: 0 auto;
width: 487px;
border-style:solid; 
border-width:1px; 
border-color:#fff;
}

Modifié par Chrispic (09 Jul 2008 - 14:57)
Bon, pour les align=center, je laisse tomber, j'ai passé l'après-midi à trouver une solution pour les remplacer mais je n'arrive pas à mon but... vu que l'affichage reste correct avec ceux-ci, je laisse tel quel, c'est tout ce que je recherche.

Bon et bien problème résolu, merci pour vos conseils.