Positioner une image avec une liste a puce sur la droite de cette image

28 novembre 2005 à 20:37:58

Bonjour,

J'essaie depuis un certain temp de positioner ma liste a puce sur la droite de mon image.
Mais cette image doit etre positioner a un certain endroit.

voici 2 screen pour vous expliquez :
Voici l'image comme elle est actuellement (sans CSS)

Et voici comment je voudrais quelle soit :
ici

Je ne peux pas utiliser le positionement relatif (comme sur le screen), l'image sera placée differement en fonction des résolution d'écrans.

Merci de m'aider a trouver un moyen de positioner cette image a cet endroit, pour que tout le monde puisse la voir.

Arno

cerealekiller

28 novembre 2005 à 20:40:45

Tu a essayé un float: left; ?

Arno

28 novembre 2005 à 20:42:58

Oui, biensur mais alors l'image est colée au bord gauche, et je ne veux pas quelle soit toallement sur le cotée, mais plus loin (comme sur le screen 2).

voici la page en question : http://www.arno.hiya-host.com/folio/index2.php?page=about_me

gcyrillus

28 novembre 2005 à 22:53:58

bonjour,
en passant ton image en liste et la liste a mettre a droite en sous liste, j'arrive a un truc qui ressemble a ce que tu cherche:
extrait du code, le css est en ligne dans les balises, si cela te convient, ressort le et applique le a l'aide de class pour rester dans le xhtml / css (prend plutot le doctype xhtml 1.0 )
donc l'extrait de code que je te propose:

<div class="fond"> 
<h1>Un peu plus sur moi ...</h1>

<p><br /></p>
<ul class="liste1" style="list-style-type:none;margin:0;padding:0;">
<li><img src="http://www.arno.hiya-host.com/folio/images/arnaud.jpg" alt="Arnaud" class="float"

style="float:left;margin-left:55%!important;margin-left:30%"/>
<ul class="liste" style="float:left;" >
<li>Prénom : Arnaud</li>
<li>Nom : Gathy</li>

<li>Âge : 14 Ans</li>
<li>Date de Naissance : 2 Avril 1991</li>
<li>Pays : Belgique</li>
<li>Ville : Bruxelles</li>
</ul></li></ul>

<ul class="liste" style="clear:both;">
<li>Passions : Je passe presque tout mon temp sur mon ordinateur. Je joues a des jeux vidéos, j'aime coder en HTML, créer des

scripts en PHP.</li>
<li>Chanson préférée : Madonna - Die Another Day ( C'est vieu mais j'aime bien :o) )</li>
<li>Artistes : Sean Paul, David Guetta, the drill, Chemical Brothers</li>
</ul>

j'ai supprimé/passer une liste dans la premiere.
a plus

<edit> 2 petites apostrophes oublié, et le margin-left pour IE</edit>

<re-edit>tout compte fait, je ne suis plus trop sur si des ul dans des li, c'est valide !
alors voici une autre soluce sans sous liste a ma façon:

<ul class="liste" >

<li style="width:40%;text-align:right;margin-right:0;"><img

src="http://www.arno.hiya-host.com/folio/images/arnaud.jpg" alt="Arnaud" class="float" /></li>

<li style="margin:0;float:right;width:30%;margin-right:30%;">Prénom : Arnaud</li>
<li style="margin:0;float:right;width:30%;clear:right;margin-right:30%;">Nom : Gathy</li>
<li style="margin:0;float:right;width:30%;clear:right;margin-right:30%;">Âge : 14 Ans</li>
<li style="margin:0;float:right;width:30%;clear:right;margin-right:30%;">Date de Naissance : 2 Avril 1991</li>
<li style="margin:0;float:right;width:30%;clear:right;margin-right:30%;">Pays : Belgique</li>
<li style="margin:0;float:right;width:30%;clear:right;margin-right:30%;">Ville : Bruxelles</li>

</ul>

et je m'arrete la

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui