28220 sujets

CSS et mise en forme, CSS3

bonjour, je suis dans une boite ou je m'occupe des mise en page css et j'ai comme toujour un probleme sur IE mais pas sur firefox.. Smiley decu voici le lien vous verrez de suite que c'est la brochure en bas a gauche qui decale:
http://new.esl.ch/fr/sejour-linguistique-cours-adultes-etudiants.htm
http://new.esl.ch/fr/sejour-linguistique-enfants-jeunes-ados.htm

c'est arrivé quand jai inseré une image qui faisait la taille de 160px, avant i ly avait une image de taille 120 px alors beaucoup plus petite qui depasait de rien...je cherche mais je trouve pas comment regler, et j'ai souvent des probleme dans ce genre, aidez moi les expert svp
Bonjour,

je ne sais pas si je vais pouvoir t'aider.. enfin, si, je sais que je ne pourrais PAS t'aider si tu ne mets aucun code ! Smiley cligne
Modérateur
bonjour,

en regardant avec ff d'abord , on aperçois deja un affichage decallé.
dans ton css pour booklet tu met un padding, qui s'applique aussi sur le positionnement de ton image, et en modifiant ton css pour l'image on peut la replacer et redimensionner. alors voici ce que j'ai fait avec FF:

img.image_block_center {
margin-left:-18px;
width:158px
}

j'ai remplacer ton css 'inadapter par celui-ci:, une marge negative pour reprendre le padding, et j'ai redimensionner en largeur ton image pour quelle ne deborde pas sur les bordures(2px en moins).
c'est du bricolage. tu pourrais te defaire du padding, et user des margin pour les differents elements contenu.
contrairement aux autres IE comprend height ou width comme largeur ou hauteur minimale.
Overflow:hidden; (ou clip) l'empechera de laisser le bloc s'aggrandir, mais laissera deborder l'image en en cachant une partie probablement.
Je n'ai pas tester ce code avec IE, si il ne convient pas , enleve plutot le padding (de booklet), redonne ses dimension a ta boite, et rogne les bords verticaux de ton image.
a plus et bon dev
Kwic a écrit :
Bonjour,

je ne sais pas si je vais pouvoir t'aider.. enfin, si, je sais que je ne pourrais PAS t'aider si tu ne mets aucun code ! Smiley cligne


Euh... Utilise Firefox comme navigateur... Il y a des outils conçus spécialement pour les développeurs.

Chemin à suivre: Fenêtre du haut, choisis outils et ensuite extensions. Une fenêtre s'affiche avec une option "obtenir d'autres extensions". Clique dessus. Ça t'amène sur la page de la fondation Mozilla. Choisis dans le menu de gauche "developer tools", va à la troisième page et download "html validator". Lorsque tu auras redémarrer Firefox, un bouton apparaîtra dans le bas, à droite de la fenêtre. Ce bouton te permettra de voir aisément le code source de n'importe quelle page de façon ordonnée et t'aidera à valider les tiennes.
Modifié par largowin (28 Oct 2005 - 05:21)