[Résolu]Alignement image/list

Hello,

Je reviens avec des problèmes d'alignement. J'ai une image a coté de laquelle je voudrai faire figuerer une liste... malheureusement sous ie la liste va s'afficher en dessous. Comment faire pour que la liste s'affiche directement a coté?

J'utilise le code xhtml suivant :

<img width="118" height="93" class="imageleft" alt="tzzz" src="imgs/zzzzz.png" />
<ul>
	<li>eque porro quisquam est qui dolorem </li>
	<li>ipsum quia dolor sit amet, consectetur, adipisci velit</li>
	<li>i ratione voluptatem sequi nesciunt. Neque porro</li>
</ul>

avec la CSS suivante :

.imageleft{float:left;padding-right:3px; padding-left:5px; border:0; display:block}

Modifié par mego (30 Jun 2006 - 10:07)

salut,

Essaye de mettre ta liste en float left aussi (la balise <ul>).

++

lav_01 a écrit :
salut,

Essaye de mettre ta liste en float left aussi (la balise <ul>).

++

Nop, c'est pas ça

Une autre idée peut être?

Bonjour,

Je pense que la taille du container n'est pas suffisamment large pour contenir cote à cote image + ul. A vérifier avec une vision plus complète du code.

re,

Expliquer comme tu l'a fait, la solution que j'ai tester marche. Peut etre que je n'ai pas tout saisi !!

Sinon tu peut mettre ta liste en float: right avec une marge negative pour l'alignement.

voila

ok j'ai pas tout donné en fait c'est pour ça... dsl, je pensais que la partie de code précédente était suffisante. Voici donc le reste :
xhtml:

<div class="cadrecentre">
<div class="bloccadrecentre">

<h1>The glow in the dark</h1>
<img width="118" height="93" class="imageleft" alt="temporary tattoos" src="imgs/girl-temporary-tattoos.png" />
<ul>
	<li>eque porro quisquam est qui dolorem </li><br />
	<li>ipsum quia dolor sit amet, consectetur, adipisci velit</li><br />
	<li>i ratione voluptatem sequi nesciunt. Neque porro</li><br />

</ul>
  </div>
	</div>	

css

.cadrecentre {/* conteneur global et arrière-plan du titre du cadre */
width: 580px;
background:url(../imgs/bg_center_top.png)top left no-repeat;
padding-top: 11px;
margin:11px 0 0 0;

}
.bloccadrecentre {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(../imgs/bg_center_btm.png) bottom left no-repeat;
margin-bottom: 5px;
padding: 0px 3px 10px 15px;
}
.imageleft{float:left;padding-right:3px; padding-left:5px; border:0; display:block}

En fait j'ai 2 problèmes, je n'arrive pas à aligner la liste coté de l'image... Mais egalement la hauteur de bloccadrecentre ne s'adapte pas au contenu qui est à l'intérieur...

faut peut-etre aussi customiser ul avec margin paddinc etc...

re,
Calcule bien la largeur du conteneur de l'image et de la liste (qui semble etre en ligne??), je pense que xavier à fait la bonne remarque.
Pour le deuxieme probleme il me semble que tu trouvera ta reponse en faisant une recherche dans le forum, ce probleme viens du fait qu'en mettant ton contenu en flottant tu le sors du flux et de ton conteneur. tu peut regarder içi :
http://www.complexspiral.com/publications/containing-floats/
+
Modifié par lav_01 (29 Jun 2006 - 17:12)

lav_01 a écrit :
tu peut regarder içi : http://www.complexspiral.com/publications/containing-floats/[/url]
+

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Mes plus plattes excuses.
je corrige.

La solution de xavier ne fonctionne pas...
En fait si je prends du texte et le place à la place du <ul> ça fonctionne très bien. C'est bel et bien ma liste qui pose problème...
J'ai un peu du mal à cerner la chose

re,

Eclaire moi pourquoi met tu des <br /> après tes <li></li> ?
Si ta liste est en display: inline, le probleme peut venir de la.
la soluce plutot
Sinon donne le code pour ta liste, cela sera plus facile de cerner le hic !!

J'ai compris ton probleme apres relecture du post :
En fait ton image est une balise en ligne ta liste est un bloc donc en transformant ta liste en balise en ligne tu obtient le comportement souhaité.
!!
Modifié par lav_01 (30 Jun 2006 - 12:38)

lav_01 a écrit :
re,
Eclaire moi pourquoi met tu des <br /> après tes <li></li> ??
Si ta liste est en display: inline, le probleme peut venir de la.
Sinon donne le code pour ta liste, cela sera plus facile de cerner le hic !!
!!

Les <br /> je les avais mis pour faire un test...
Par contre je viens de tester en plaçant ma liste en display:inline, et là ça marche !
Je comprends pas vraiment, mais en tout cas le problème est réglé