Aide pour placement texte petite galerie

Bonjour à tous,

Voila j'ai créé une petite galerie et j'arrive pas à intégrer le texte à coté de la grande image (id=texte).
J'ai ca :

Voici le code CSS complet de la galerie :

div#galerie{
width: 650px ;
height:auto;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 15px ;
font: 0.8em Georgia, serif ;
}
ul#galerie_mini{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li{
float: left ;
}
ul#galerie_mini li a img{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo{
clear:both;
margin: 0 auto ;
padding-right:10px;
}
dl#photo dt{
font: italic 2.0em/1.5em Georgia, serif ;
color:#999;
}
dl#photo dd{
margin: 0 ;
}
dl#photo img{
border: 1px solid #dcb ;
}
#texte{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

Aller je donne le code HTML pour que ca soit plus simple :

<div id="galerie">
	<ul id="galerie_mini">
		<li>lien + mini image1</li>
		<li>lien + mini image2</li>	
		<li>lien + mini image3</li>	
		<li>lien + mini image4</li>	
		<li>lien + mini image5</li>		
	</ul>

	<dl id="photo">
		<dt>Les Terrasses de Sormiou</dt>
		<dd><img id="big_pict" src="chemin" alt="Les Terrasses de Sormiou 2" /></dd>
	</dl>
	<div id="texte">
		<p>Avenue Colgate<br/>13009 MARSEILLE</p>
	    <p>info1</p>	 
	    <p>info2</p>	 
	    <p>info3</p>	  
    </div>

</div>

Note : j'ai simplifié le code HTML pour une lecture plus simple.

Voila merci de votre aide, car j'ai essayer pas mal de chose (float etc...) et j'y arrive pas.
Modifié par jpp13 (11 Jul 2007 - 16:33)

Bonjour,

Les informations dans ton div texte, ne concernent-elles pas les Terrasses de Sormiou ?
Car si tel est le cas, tu pourrais l'inclure dans ta liste de définition, non ?
Car elles contribuent à informer sur l'objet en question.

Cela donnerait quelque chose comme ceci :

<div id="galerie">

	   <ul id="galerie_mini">
    		<li>lien + mini image1</li>
    		<li>lien + mini image2</li>	
    		<li>lien + mini image3</li>	
    		<li>lien + mini image4</li>	
    		<li>lien + mini image5</li>		
	   </ul>

  	<dl id="photo">
	   	<dt>Les Terrasses de Sormiou</dt>
  		<dd id="big_pict"><img src="chemin" alt="Les Terrasses de Sormiou 2" /></dd>
  		<dd id="texte">
        <p>Avenue Colgate<br/>13009 MARSEILLE</p>
	      <p>info1</p>	 
  	    <p>info2</p>	 
	      <p>info3</p>
  	  </dd>
  	</dl>

    </div>

Accompagné de :

div#galerie {
width: 650px ;
height:auto;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 15px ;
font: 0.8em Georgia, serif ;
}

ul#galerie_mini {
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}

ul#galerie_mini li {
float: left ;
}

ul#galerie_mini li a img {
margin: 2px 1px ;
border: 1px solid #dcb ;
}

dl#photo {
clear:both;
margin: 0 auto ;
padding-right:10px;
}

dl#photo dt {
font: italic 2.0em/1.5em Georgia, serif ;
color:#999;
}

dl#photo dd {
margin: 0 ;
}

dl#photo dd#big_pict {
border: 1px solid #dcb ;
float: left ;
}

dl#photo dd#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

dl#photo dd#texte p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin: 0 ;
padding: 0 ;
}

Bien sûr, certaines valeurs sont à modifier, comme par exemple les marges des éléments <p>.
De plus, je te conseillerais de spécifier tes tailles de polices en em plutôt qu'en px : Voilà pourquoi