Discussion :

[michaeljeru]

Bonjour,
Afin de m'initier à CSS, je veux réaliser un site basique sur ma passion, les feux d'artifice. Le site ne comportera que 4 pages, mais pour l'instant, je me concentre sur celle qui s'appelle "components".

mon site
ma feuille CSS


J'essaye d'appliquer des styles CSS (grande première) sur mes div, et j'ai du mal.
J'ai créé une classe schéma, une classe caption, une classe medias (pour contenir le schema et la caption).

Ce que je veux, c'est avoir "sur la même ligne" mes 2 médias, centrés.

Problème 1 : barre de menu

Je n'ai implémenté pour l'instant que les pages Homepage et Components. Le problème que j'ai, c'est qu'en chargeant la page Components, cela décale toujours ma barre de menu de qq pixels, alors que ça n'a pas lieu avec les autres pages. Test effectué, en éliminant progressivement tout le contenu de la page, ce sont les images et les vidéos qui causent ce décalage.
Pourquoi ? Comment y remédier?

Problème 2 : positionnement des images / vidéos par rapport au texte

En regardant la page Components, je pense que mon pb est évident. Le texte suivant les médias vient se coller à droite, et j'ai beau avoir essayé de mettre mes 2 div medias dans un autre div container, avec les propriétés qui vont bien, j'obtiens toujours le même résultat...
Une idée ?

Bien sûr, étant débutant, je suis ouvert à toute critique, d'autant que je veux que mon site soit validé XHTML, donc si vous repérez des mauvais usages ou si il y a une façon plus propre de faire ce que j'ai fait, merci de me le signaler.

Merci d'avance pour votre aide.

[12monkeys]

Bonsoir

Pas bien sur d'avoir compris tes 2 problèmes, mais bon je m'y essaye :

Pour le problème 1 tu vois un décalage de l'ensemble de ton contenu vers la gauche uniquement sur la page Components ? Ca viens du fait que le contenu de ta page dépasse la hauteur du navigateur et donc celui ci affiche la barre de défilement à droite, chose qu'il ne fait pas sur les autres pas, n'ayant pas de contenu assez long.

Second souci : là j'ai plus de mal. Tu veux centrer tes images / vidéos par rapport au texte ? Alors il te suffit de rajouter une largeur précise à div.container.

[michaeljeru]

Pb1 : je suis effectivement arrivé à cette conclusion cet après midi. Bon, toutes mes pages auront pas mal de contenu, donc le problème ne sera plus visible, mais par curiosité, il y a une façon intelligente de corriger ce défaut ?

Pb2 : j'ai finalement opté pour une table, ds laquelle j'insère mes 2 div médias, et je n'ai plus de pb.

Merci pour ton aide.

[12monkeys]

Pour le premier problème : si je me souviens bien IE affiche toujours l'ascenseur, alors que Firefox ne le fais pas. Pour remédier à cela on peut utiliser la propriété overflow-y avec la valeur scroll déclaré sur body.

Pour ton second problème c'était quoi le souci alors ?