La largeur dépasse d'un chouia

hello,

Afin que ma page soit "propre" :
http://www.lemarcaire.fr/maquettes/casting_cars/administration/index2.html
j'ai 2 petits soucis :
- contrairement à IE 7 ou l'alignement de ma barre horizontale "INTERFACE D'ADMINISTRATION" se fait correctement, sous FIREFOX, elle est décalée vers le bas
- également sous FIREFOX, la hauteur de mon bloc de droite "principal" dépasse de quelques pixels ce qui fat apparaître une scrollbar alors que c'est ok sous IE.

Pour ces 2 petits soucis, j'ai vérifié mes margin et padding des éléments blocs sous "principal" et tout me semble ok. Bizarre.


Merci,

Pascal
Modifié par Pascal68bis (16 Jun 2007 - 08:58)

Pascal68bis a écrit :
Pour ces 2 petits soucis, j'ai vérifié mes margin et padding des éléments blocs sous "principal" et tout me semble ok. Bizarre.

Par contre, tu n'as pas validé le code HTML de ta page. Il y a notamment une erreur grossière qui saute aux yeux à la lecture du code. Je te laisse la découvrir soit en relisant ce code, soit à l'aide d'un outil de validation.

Une fois que ça sera réglé et que la page sera valide, on pourra s'atteler aux différents problèmes de rendu.

Ouh la, oui!
Je ne pense jamais assez au validateur.
C'est bon j'ai corrigé néanmoins l'alignement de la barre ne se fait toujours pas correctement et la hauteur du bloc de droite dépasse toujours encore un peu sous Firefox

en fait, je pense que ça a à voir avec la valeur height définie à 100% pour le bloc "principal" mais je ne vois pas pourquoi il y a ce légér déplacement
Modifié par Pascal68bis (18 Jun 2007 - 10:13)

Heu... et sinon c'est normal que tes titres du menu de gauche soient des h1, et que ton titre « INTERFACE D'ADMINISTRATION DU SITE DE CASTING CARS » soit un div simple et pas un hN ?

Pour information :
- dans un premier temps, on crée un document HTML avec une structure de titres cohérente, le plus haut niveau étant un (ou des) h1 ;
- dans un deuxième temps, on utilise les CSS pour afficher les titres de la manière voulue (nota : le passage des titres en majuscules peut aussi se faire en CSS, et ça laisse plus de latitudes pour changer plus tard la mise en forme des titres).

Pour le décalage... j'avoue ne pas trop avoir saisi de quel décalage il s'agit. Aucun décalage ou différence entre Firefox et IE6 ne me saute aux yeux. Ce qui saute aux yeux, ce sont les barres de défilement inutiles, dues à la mise en forme (bien étrange...) de div#principal.

effectivement, des div n'étaient pas nécessaiares pour le titre, je les ai remplacés par des éléments h3. Merci.

a écrit :
Pour le décalage... j'avoue ne pas trop avoir saisi de quel décalage il s'agit. Aucun décalage ou différence entre Firefox et IE6 ne me saute aux yeux. Ce qui saute aux yeux, ce sont les barres de défilement inutiles, dues à la mise en forme (bien étrange...) de div#principal.

=> en fait, je veux que la bordure supérieure du titre "ANNONCES PIECES" soit parfaitement alignées, donc en continuité, avec la bordure inférieure du titre "INTERFACE D'ADMINISTRATION". C'est le cas sous Internet explorer 7 mais pas avec Firefox où la bordure inférieure de "INTERFACE D'ADMIN..." est légèrement décalée vers le bas. D'après ce que tu me dis, IE 6 doitfaire apparaître le même chose que Firefox.
En fait, c'est pas bien grave, c'est un détail mais j'aimerai bien savoir pourquoi ça n'est pas aligné.

a écrit :
Ce qui saute aux yeux, ce sont les barres de défilement inutiles, dues à la mise en forme (bien étrange...) de div#principal.

=> oui, je voudrai que ces barres de défilement inutiles disparaissent.
Pour ce qui est de la mise en page "étrange", j'ai pensé mettre cette page en forme sous forme de 2 colonnes, une à gauche, contenant le menu, d'une largeur de 20% et une colonne à droite, d'une largeur de 80%.
Ces 2 blocs sont en position fixe et je ne vopis pas ce qu'il y a d'étrange ...

Pascal68bis a écrit :
effectivement, des div n'étaient pas nécessaiares pour le titre, je les ai remplacés par des éléments h3.

C'est à dire qu'avant ce titre, tu as au moins un h1 puis un h2, qui suivent un ordre logique ?

Pour l'instant, le plan de ton document ressemble à ceci :

h1 [Titre manquant]
  h2 [Titre manquant]
    h3 [Titre manquant]
      h4 [Titre manquant]
        h5 RESTAURATIONS
        h5 ANNONCES PIECES
        h5 ANNONCES VEHICULES
        h5 INTERFACE D'ADMINISTRATION DU SITE DE CASTING CARS

Alors qu'il serait préférable d'avoir :

h1 Casting Cars - spécialiste Porsche
  h2 Restauration
  h2 Annonces pièces
  h2 Annonces véhicules
h1 Interface d'administration du site de Casting Cars

Quelque chose comme ça...

Pascal68bis a écrit :
En fait, c'est pas bien grave, c'est un détail mais j'aimerai bien savoir pourquoi ça n'est pas aligné.

Essaies d'agrandir la taille du texte (Control-Plus ou Control-Molette), tu verras que c'est encore moins aligné...

Pour être sur d'avoir un alignement parfait, il faut :
- soit utiliser des images ;
- soit utiliser des éléments qui sont logiquement liés (comme des cellules de tableau).

Les alignements de traits horizontaux sont une des choses les plus difficiles à obtenir facilement sur écran avec les technologies web. Contrairement à ce que l'on obtiendra avec un logiciel de PAO, la maitrise de l'espace vertical est toute relative sur le Web (sauf à faire du Flash), notamment à cause de la gestion souple du texte.

a écrit :
Ces 2 blocs sont en position fixe et je ne vopis pas ce qu'il y a d'étrange ...

À vrai dire, ils ne sont pas en position fixe (position: fixed) mais en position absolue (position: absolute). Utiliser le positionnement n'est pas idiot, mais pas non plus obligatoire. On pourrait utiliser un flottant pour le menu, et une simple marge à gauche pour le conteneur principal.

Voir le tutoriel suivant et adapter sur deux colonnes.

Les barres de défilement viennent des bordures de div#principal, qui se rajoutent à la largeur de 80%. D'où le problème de donner une largeur fixe lorsque que ça n'est pas absolument nécessaire.

Sinon, le moyen le plus fiable d'avoir un trait vertical sur toute la hauteur de la page est d'utiliser une image de fond sur body. Voir à ce sujet :
http://pompage.net/pompe/colonnesfactices/

a écrit :
C'est à dire qu'avant ce titre, tu as au moins un h1 puis un h2, qui suivent un ordre logique ?

En fait, j'ai l'habitude d'utiliser les balises h en fonction de leur taille prédéfinie, mais effectivement il est plus logique de les utiliser en fonction de leur ordre hiérarchique.

a écrit :
Les barres de défilement viennent des bordures de div#principal, qui se rajoutent à la largeur de 80%

=> c'est donc ça!!! J'ai pensé mettre le titre "INTERFACE D'ADMINISTRATION" en position absolue histoire de faire disparaître cette barre, mais finalement je vais laisser comme ça, ce n'est qu'une interface d'administration ...

Merci pour tout.