28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je rencontre des problèmes comme beaucoup avec IE 6 pour les float, désolé de demander votre aide mais je me casse la tête depuis deux jours pour réussir ma mise en forme et je suis à cours d'idées.

je voudrais faire une boite contenant un titre, une image, un texte et un lien. Mon problème c'est que j'ai éssayé le "float", le "relative" et même le "clear" mais mon image dépasse de ma boite ou sinon mon texte disparait de la boite Smiley biggol .

adresse de mon exemple ici : http://86.65.208.132/intranet/test-alsacreations.php

Schéma détaillé :
http://86.65.208.132/intranet/images/maquette-article2.JPG

Pour information, j'utilise le framework Jquery pour afficher une div cachée qui s'ouvre en bas de la boite lors du clic sur le lien "plus d'info", mais le problème n'est pas là Smiley lol .

Pouvez-vous m'aider pour que ma mise en forme marche bien sous IE 6, IE 7 et FF?
Je souhaiterais que :
- la div contenant l'image soit fluide donc qui s'adapte à la taille de l'image,
- ma boite le soit aussi pour qu'elle prenne toute la largeur possible dans ma page et que la hauteur de celle-ci soit ajusté à son contenu.
- le lien doit être à la ligne et prendre toute la largeur de la boite pour être bien centré et en dessous du texte ou de l'image si le texte n'est pas assez grand.
- une div cachée est en dessous du lien et prend la largeur aussi de la boite,
- une petite marge interne à la boite pour faire joli.

Un grand merci pour ceux qui vont m'aider.
A bientôt
Xender
Bonjour Smiley smile

J'ai rapidement jeté un oeil à ta page et... il y a une pléiade d'erreurs ! Smiley confus
A ta place, je commencerais par nettoyer tout ça et supprimer les style internes aux balises. Un petit bloc de style dans la balise head sera beaucoup plus lisible... Smiley cligne

D'autre part, pour obtenir une résultat escompté, tu n'as pas besoin d'autant de div : ton image peut s'en affranchir et ton texte peut se contenter d'une simple balise de paragraphe. Smiley cligne
Un simple float sur ton image (placée devant le texte dans le code html) devrait te permettre d'obtenir ce que tu souhaites. Smiley murf
Bon voilà j'ai bien nettoyé le code je pense et ça marche un peu mieux.
quand j'affiche ma boite dans un page avec rien, c'est nikel tant qu'avec IE et FF Smiley biggrin Super !

Exemple corrigé : http://86.65.208.132/intranet/test-alsacreations2.php

Mais maintenant à cause du "clear:left" dans la classe "article_box_link" quand j'insère ma boite dans ma page principale, la boite s'éttire en hauteur autant que le menu de gauche, chose que je ne souhaite pas Smiley ohwell

Page principale avec ma boite : http://86.65.208.132/intranet/

Y-a-il un moyen de mettre en dessous de cette boite un div qui complèterait l'espace en trop pour que ma boite soit adapté à son contenu en hauteur? Sinon une autre astuce?

Merci beacoup de votre aide.
Modifié par xender (24 Apr 2008 - 13:43)
Bon ba tout va bien j'ai enfin trouvé mon bonheur ! Smiley biggrin

overflow: hidden;
height: 1%;

source : blog-and-blues.org

définir une hauteur pour IE et l'option overflow qui permet de supprimer les espaces en trop.

Merci quand même pour votre participation Smiley ravi
A+
Modifié par xender (24 Apr 2008 - 13:59)