ndjpoye Posté 13 Octobre 2004 Posté 13 Octobre 2004 Bonjour à tous. Alors voila, j'ai une image suivi d'une liste UL/LI et tous cela dans un div. Primo, je ne comprend pas pourquoi ma liste commence directement en dessous de l'image au lieu d'aller à Côté. J'utilise une feuille de style dans laquelle la taille du duv est fixé à 645px et la taille de la liste et de l'image à 310px (donc, ça peut rentrer côte à côte). Deuxième problème, j'aimerais que ma liste reste tout le temps à doite de l'image, quelque soint le nombre d'élément (et non pas qu'elle coulle en dessous de l'image). Et pour finir bien évidamant, il faudrais que mon div "englobe" totalement l'image et la liste, quelque soit le navigateur utilisé (ie ou Mozilla). A part ça, je veut rien Merci d'avance de votre aide.
ams51 Posté 13 Octobre 2004 Posté 13 Octobre 2004 Sur ton image met un "float:left" Dans le CSS : .image { float:left;} Dans le htm : <img src="" class="image">
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Merci mais ... il reste quelques petit problème. Sous Mozilla, si ma liste est plus petite que l'image, le div n'englobe plus l'image (il me sert de cadre et de fond). Et si ma liste et plus grande que l'image, elle coule sous l'image. Ce que je comprend pas aussi, c'est pourquoi un lu commence "naturellement" en dessous de l'image alors qu'un paragraphe par exemple ne le fait pas ?
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Arf, nouveau problème e, méttant un float: left, la puce, sous mozzila, rogne l'image. Et si je mets un padding, il commence à partir du bord gauche de mon div parent et non pas à partir du bord droit de l'image.
Xavier Posté 13 Octobre 2004 Posté 13 Octobre 2004 Alors voila, j'ai une image suivi d'une liste UL/LI et tous cela dans un div. Primo, je ne comprend pas pourquoi ma liste commence directement en dessous de l'image au lieu d'aller à Côté. Tout simplement parce que ul est un élément de type "bloc", qui se placent "en-dessous" de l'élément bloc précédent, par opposition aux éléments en-ligne qui ne créent pas de retour à la ligne. J'utilise une feuille de style dans laquelle la taille du duv est fixé à 645px et la taille de la liste et de l'image à 310px (donc, ça peut rentrer côte à côte).J'en déduis que tu as une résolution de 1024 px de large... ce qui ne sera pas forcément le cas de tous tes visiteurs Merci mais ... il reste quelques petit problème. Sous Mozilla, si ma liste est plus petite que l'image, le div n'englobe plus l'image (il me sert de cadre et de fond). Et si ma liste et plus grande que l'image, elle coule sous l'image. Ce que je comprend pas aussi, c'est pourquoi un lu commence "naturellement" en dessous de l'image alors qu'un paragraphe par exemple ne le fait pas ? En mettant un float sur ton image, tu l'as sortie du flux (la suite des balises)... elle déborde donc mais là je crois que je vais laisser les spécialistes du positionnement flottant répondre en détail à ce sujet que je ne maîtrise pas encore totalement plutôt que de dire n'importe quoi
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Merci pour ces détails. La balise img pas de style inline elle non? Ca veut donc dire que 1block à coté d'1 inline réagissent comment si 2 bocks étaient côte à côté. Pour ma résolution, ça passe en 800x600 (ça m'a quand même fait douté alors, je suis aller voir). Merci pour ces info instructives. J'ai mis margin-left: 310px; pour mon ul, et il n'y a plus de problème avec les puces ou avec le texte qui coule. Par contre, j'ai toujour pas le div qui englobe l'image si la liste est plus petite
ElMoustiko Posté 13 Octobre 2004 Posté 13 Octobre 2004 J'en déduis que tu as une résolution de 1024 px de large... ce qui ne sera pas forcément le cas de tous tes visiteurs Pas forcément, en 800*600 ca passe , en 800*600 la largeur max sans redimenssionement ni scrollbar c'est aux alentours de 770px Sinon pour ton problème, oui c'est logique, en mettant l'image en flottant, tu l'as sortie du flux. Le fait que tes <li> passent sous l'image c'est normal aussi. Donc en gros tu veux l'image à gauche et la liste à droite qui ne "coule" pas sous l'image et tu veux que ton div conteneur englobe le tout quelque soit la hauteur des éléments. Donc tu met float: left; sur l'image, float: right; sur le ul, et tu dois rajouter un petit truc crado en dessous, mais indispensable (sauf erreur) pour ce que tu veux faire. Tu peux rajouter un <hr class="space" /> et dans les css : hr.space { clear: both; } Voilà qui devrait faire l'affaire @++
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Pour la résolution, ça passe juste avec une barre de défilement verticale mais ça passe Ta méthode est nickel mais j'ai un petit soucis. Ca affiche un bare en dessous de la carte (hr). J'avais lu il me semble sur le net qu'il y avais moyen de la cacher avec l'attribut display mais j'arrive pas à trouver commen faire (je me trompe peut être d'attribut, ma mémoire flanche ...).
ElMoustiko Posté 13 Octobre 2004 Posté 13 Octobre 2004 (modifié) Faut pas jouer avec l'attribut display ou visibility sur hr sinon ca va merder, et c'est comme si tu l'avais pas mis (a moins que.... essai avec hr.space {clear: both; visibility: hidden ; } ) Sinon tu dois jouer sur color, background et border pour le "cacher". Modifié 13 Octobre 2004 par ElMoustiko
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 YYYYYes.... Ca marche nickel chrome avec visibility: hidden. Merci beaucoup. Bon ben j'avais des ami(e)s webmaster qui me disaient que les div c'était pas top par rpport aux tables est, c'est clair que si l'on veut être compatible avec un max de navigateur, c'est pas évidant. Mais bon, c'est motivant. Merci à tous pour votre aide. Ps: il y a moyen de cloturer le sujet maintenant que la solution a été donnée?
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Pour ton info ElMoustiko, on vient de me donner une solution qui me semble encore un peut mieux que la tienne (sans vouloir te contrarier, la tienne étant déjà fort pratique). C'est presque pareil sauf qu'aux lieu d'un hr, c'est un div. Et là, pas besoin de visibility: hidden. Ca n'a pas non plus l'air de pertuber le flux de ma page (à voir à l'usage). Et encoe merci pour tout.
ElMoustiko Posté 13 Octobre 2004 Posté 13 Octobre 2004 Oui ca revient au même, mais en fait avec un hr c'est mieux, même s'il faut jouer sur la mise en forme. Déjà avec div : <div class="space"> </div> tu pourrais enlever le mais ca serait encore pire du point de vue sémantique <div class="space"></div> avec ht : <hr class="space" /> Donc un petit gain au niveau du html (minime... mais bon) Et donc au niveau sémantique, même si div n'a aucune valeur sémantique, ca n'a en fait rien à faire là en principe, alors qu'un hr est deja "un peu" plus justifiable. Donc au final les 2 solutions sont en fait les mêmes, l'une un peu plus "correcte" même si dans les 2 cas c'est de la bidouille.
ndjpoye Posté 13 Octobre 2004 Auteur Posté 13 Octobre 2004 Chapeau bas monsieur ElMoustiko. Ca c'est de l'esplication instructive. Ben mersi beaucoup. Je vais donc prendre la solution "sémentiquement" correcte alors :-)
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant