Forum d'entraide PHPFrance

Bonjour,

j'ai une application que j'ai developpé exclusivement pour IE pour l'instant.
J'essaie de la modifier pour qu'elle soit présentable sous firefox également.

pour faire court, j'ai un cadre lien contenant:
- une image étirée à la taille du cadre et qui fait office d'image de fond
- un texte court faisant office d'intitule de rubrique
- une petite image faisant office d'icone

voilà mon code : et les CSS : Sous IE pas de problème, le cadre prendre 48% de la page, a la bonne hauteur en pixel et les icones et titres sur l'image.

Par contre sous Firefox, le cadre prend toute la page en largeur, la taille de la fenêtre en hauteur.

où est le problème au niveau de mon dimensionnement?

Ne met pas de valeur de dimensions à un lien...

Entour les d'un DIV plutot avec ces elements !

Pour compléter le message d'Elie, seuls les éléments de type bloc peuvent être définis avec des dimensions.

Par ailleurs et dans le même ordre d'idée, le fait de mettre display:inline fait perdre aux éléments (même de type bloc) le fait de pouvoir être définis avec des dimensions.

Pour aligner horizontalement des éléments de type blocs tout en pouvant définir leur largeur on peut employer float

voilà mon code :

Code : Tout sélectionner

<A HREF="...." CLASS="rubriqueMenu"> <IMG SRC="fond_cadre.jpg" CLASS="fondMenu"> <IMG SRC="icone.jpg" CLASS="iconeRubrique"> <P CLASS="titreRubrique">CONSULTER UN TABLEAU</P> </A>

Ton code n'est pas valide : un élément en ligne ne peut pas contenir d'éléments de bloc. Autrement dit, P ne peut pas avoir A comme élément parent.

Pour attribuer des dimensions et des marges autres que latérales à un élément en ligne, la propriété display: block en CSS est là.

Autre remarque, plus générale : commencer par développer pour IE n'est pas une bonne solution, le navigateur de Microsoft n'étant pas très respectueux des standards du Web (même si la version 7 apporte de nettes améliorations par rapport aux versions précédentes). Je te conseille vivement, notamment pour les feuilles de styles, de développer en utilisant d'abord Opera et/ou Safari (qui ont un support des CSS très bon, voire excellent pour Opera), puis Firefox et enfin IE 7 puis 6 (en prenant soin d'utiliser des feuilles de styles distinctes pour IE 7 et 6 et d'appeler ces feuilles au moyen de commentaires conditionnels).

ok alors j'essaie de faire ça correctement pour que ca passe sous IE et Firefox, dans mon cas IE a la priorité.

J'ai beau essayer de tourner la chose dans tous les sens, je n'arrive pas à placer les cadres,etc au bon endroit.

Je résume :
j'ai un cadre principal. (1)
le lien
une image de fond (2)
un cadre (sur l'image de fond donc remonté) (3)
une image icone
un texte


le tout devant être un lien.
Mais quoiqu'il arrive, en remontant le cadre (3) sur l'image de fond (2), l'icone et le texte ne sont plus des liens. je ne vois pas comment organiser ça.

salut
a la place d inline tu mets inline-block dans rubrique menu
tu rajoutes une class pour le lien avec display:block
ca resoudra les problemes entre ff et ie( 7 en tout cas ) pour les dim

je ne suis pas sur du rendu graphique que tu veux, donc pour le reste je ne sais pas trop
tu peux ajouter une image du rendu desiré dans un post ???
http://imageshack.us/

La valeur inline-block n'est pas implémentée par Firefox 2 (en revanche, aucun souci avec Firefox 3).

mmm exacte meme si elle fonctionne quand meme!!!

alors
display: -moz-inline-block;
display: inline-block;