28221 sujets

CSS et mise en forme, CSS3

Liste d'articles

Bonjour,
Je souhaite utiliser essentiellement les css pour présenter une liste d'articles mais voilà, je n'y arrive pas malgré des heurs et des heues d'essais... Smiley bawling
mon modèle

=> un conteneur avec une image à gauche et du texte (ou plusieurs span) à droite.

Comment faire ?

Merci d'avance.
Modifié le 11 Nov 2004 - 20:31
Les bases je les ai, j'ai déjà réalisé plusieurs sites valides xhtml mais là mon problème c'est que je veux mettre l'image à gauche et non en dessous...
voilà ce que ça donne :
http://www.accrochweb.com/essai
Ici, si le texte est trop court, l'écart entre chaque bloc sera irrégulier.
Si je laisse les image en position normale ou relative, le texte s'affiche au-dessous !
Comment faire ?
Piste de soluution :
<edit>
Piste de solution :
</edit>

img { 
   float: left; 
}

div.texteadroitedelimage { 
   margin-left: value; /* la largeur de l'image + distance entre les deux */
}

Modifié le 11 Nov 2004 - 21:32
Administrateur
Stephan a écrit :
Piste de soluution : 

img { 
   float: left; 
}

div.texteadroitedelimage { 
   margin-left: value; /* la largeur de l'image + distance entre les deux */
}

Oui effectivement, c'est certainement plus propre ainsi.
Merci pour vos réponses mais ça ne fonctionne pas, sur IE ça marche mais pas sous Firefox => quand le texte est trop court, le conteneur du bloc est trop court et l'espacement avec le bloc suivant est donc trop court...
Dois-je utiliser des <table> et autres <tr>... (ça m'embetterait quelque peu).
De plus, je n'ai pas d'exemple, étant donné que les sites commerciaux sont tous créés avec des tableaux (si vous avez une exception je suis preneur).
Administrateur
tulipe a écrit :
Merci pour vos réponses mais ça ne fonctionne pas, sur IE ça marche mais pas sous Firefox => quand le texte est trop court, le conteneur du bloc est trop court et l'espacement avec le bloc suivant est donc trop court....

Non, cela fonctionne très bien, même si IE ne se comporte pas comme prévu.
Pour gérer le contenu autour de float :
http://www.yoyodesign.org/doc/w3c/css2/visuren.html#flow-control
http://www.openweb.eu.org/articles/initiation_float/

Tu verras rapidement ce qu'il faut faire Smiley cligne
Et s'il met un minheight: hauteur de l'image

ou tout simplement un clear: left avec <div class="clearer"> ne dessous du texte ?

Pour le clearer je l'ai appris sur ce forum, merci Smiley cligne
Administrateur
xeter a écrit :

ou tout simplement un clear: left avec <div class="clearer"> ne dessous du texte ?

Oui, c'est aussi ce que disent les deux liens que j'ai donné Smiley smile
Merci à vous tous, avec min-height ça fonctionne ! Je vais quand même réétudier le css 2 (jusqu'à présent je me suis toujours limité au css1) et c'est vrai que yoyodesign c'est très bien pour cela.
Ca doit faire au moins deux ans que je n'avais pas utilisé de min-height, ayant appris à mes débuts que cette propriété n'était pas du css valide (xhtml) et ne fonctionnait pas toujours, ce qui m'amène à ces deux questions subsidiaires : valide ou pas ? min-height interdit autrefois à cause de l'"ancien" IE (5.0...) ou pour une autre raison ?
Merci encore pour vos réponses (comme quoi y'a pas que l'site du zéro, hein sibellius Smiley langue !).
Administrateur
En passant, je rappelle que min-height est valide depuis sa création, mais n'est toujours pas reconnu par IE Smiley rolleyes
Sujet clos
Aller à