Probleme de mise en page en css

bonjour,
je suis en traind e refaire le graphisme de mon site et j'essai de le faire en total css.

me voilà donc face a quelques problemes de mise en page :

1er probleme :
sous IE ma div menu est positionné au bon endroit alors que sous FF elle se retrouve tout en bas decalé et plus grande en largeur.

2em probleme :
je souahiterai que ma div-gauche soit toujours de la meme hauteur que mon contenu ( 100% de haut) et inverssement si div-gauche plus grand que div-contenu alors hauteu de div-contenu = div gauche.

voilà en image se que je recherche a faire.
http://www.photos-vosges.fr/nouveau/images/exemplecss.jpg

pouvez vous m'aider a mettre ce css en place svp ?

Salut,

nos médiums étant actuellement en vacances il faudrait nous donner ton code actuel (ou mieux encore un lien vers une page en ligne).

Ou alors tu demandes un "code tout fait" ce qui va à l'encontre des règles du forum et n'aurait quasiment aucun intérêt pédagogique. Le mieux serait de (re)lire le Guide de survie du positionnement CSS.

Tu pourrais également t'inspirer des gabarits.
Modifié par Heyoan (28 Feb 2009 - 15:52)

non je veu pas un code tout fais j'ai deja assez bossé dessus comme ça

j'ai regardé les différents gabarit mais j'essai d'adapté a mon graphisme (ma mise en page)

voilà un lien de ma page :
lien test css

Bon ne trouvant pas une solution efficace j'ai usé d'un subterfuge pour la hauteur. (modif graphique)

Par contre j'ai un problème avec mon menu entre IE et Firefox.
le menu (vert et noir) est bien placé sous IE et sous firefox il grandit en largeur et passe par dessus mon div gauche.

Pouvez vous jeter un œil et m'expliquez pour quel raison sa bug sous FF.


merci
lien probleme sous FireFox
Modifié par fabrice88 (28 Feb 2009 - 17:27)

Ben pour l'instant ton code comporte des erreurs de validation qu'il faut commencer par corriger (notamment 2 éléments DOCTYPE, HTML, HEAD, etc. typiques d'une utilisation incorrecte d'include.)

D'autre part ta page fait 749ko pour des images toutes petites !

Ce serait sympa (en plus d'être une bonne idée) de diminuer leur taille et éventuellement de les compresser.

Pour ce qui est de colonnes de même hauteur lire l'astuce qui va bien.
Modifié par Heyoan (28 Feb 2009 - 18:13)

ok merci pour l'info je regarderai ça apres mais là j'en suis a la structure de la page. les poids d'images et autre include sont provisoir car se sont ceux de l'ancien model.
si la page n'est pas valide W3c c'est justement a cause de l'include mais bon sa disparaitra apres.

par contre pour mon menu je trouve pas de solution

fabrice88 a écrit :
ok merci pour l'info je regarderai ça apres mais là j'en suis a la structure de la page. les poids d'images et autre include sont provisoir car se sont ceux de l'ancien model.
si la page n'est pas valide W3c c'est justement a cause de l'include mais bon sa disparaitra apres.

Peut-être mais en attendant on ne peut pas t'aider car (en plus d'attendre une plombe que l'image se charge ce qui n'a rien de réjouissant ! ) on n'a aucune certitude que ces erreurs ne sont pas la cause des autres dysfonctionnements.


Edit: pour être plus précis il serait possible de t'aider en y passant plus de temps que nécessaire (en corrigeant soi-même les erreurs de validité puis en cherchant une solution à partir de là) mais bon c'est quand même toi qui demande un coup de main et le minimum serait de faire en sorte qu'il soit facile de t'aider.
Modifié par Heyoan (28 Feb 2009 - 18:58)

euuuuuh j'avai corrigé avnt ton message .... mais je voudrais surtout pas t'embété.

ps : une plombe
Modifié par fabrice88 (28 Feb 2009 - 19:18)

fabrice88 a écrit :
euuuuuh j'avai corrigé avnt ton message .... mais je voudrais surtout pas t'embété.

Ah... désolé je croyais que tu voulais dire que tu laissais comme ça jusqu'à ce que ton problème soit réglé.

Mais du coup je ne vois plus de chevauchement du menu dans Firefox.

pas de soucis. c'est ok pour le chevauchement j'avai un left au lieu de right.

Par contre au lieu que dans mon menu les liens soit alignés completement a gauche ils sont plus ou moins decale vers la droite. j'ai pourtant mis un float left.
autre probleme est l'alignement de mes lien en hauteur. different entre ff et ie .
Modifié par fabrice88 (28 Feb 2009 - 19:38)

fabrice88 a écrit :
Par contre au lieu que dans mon menu les liens soit alignés completement a gauche ils sont plus ou moins decale vers la droite. j'ai pourtant mis un float left.
autre probleme est l'alignement de mes lien en hauteur. different entre ff et ie .

Voir Le rendu par défaut des éléments HTML pour une explication globale et l'astuce spécifique sur les listes.


Sinon quelques remarques générales (certaines étant peut-être prématurées puisque tu n'as pas encore de contenu) :

* à quoi servent tous ces position:relative ?

* à quoi servent tous ces float:left ? Il vaudrait vraiment prendre le temps de (re)lire le Guide de survie du positionnement CSS.

* ton document n'est pas structuré : voir http://openweb.eu.org/articles/respecter_semantique

* en particulier ton header ne devrait pas être une image en background puisqu'elle comporte une information (tellement importante qu'elle pourrait/devrait être dans un h1) : voir Mettre un titre en image et rester accessible. Pour le reste c'est un peu tôt puisque tu n'as pas de contenu mais autant y penser dès maintenant.

* Tu fixes la hauteur de certains éléments (dont #menutail et #contenu) alors que tu ne peux pas la connaître à l'avance (par exemple le visiteur peut augmenter la taille du texte).

* Si tu désactives les images on ne voit plus grand chose (penser en particulier à donner une couleur de fond aux éléments dont la couleur de la police est la même que celle du body)

etc...

voili voilou : de quoi t'occuper encore un moment !
Modifié par Heyoan (28 Feb 2009 - 20:11)

Merci grand chef. Effectivement se son des choses auxquels je n'avais pas pensé.
Je vais voir ca de plus prêt.