28173 sujets

CSS et mise en forme, CSS3

Bonjour

Sur cette page http://www.hasparren.net/locations/essai.html , j' essai de juxtaposer une liste à puce avec une image auquel j' ai appliqué une classe, je n'y parviens pas, la liste seule ok, l'image seule ok, les 2 ensembles impossible.
Est ce réalisable ? Je sèche .... Smiley rolleyes

Merci

Bonne après midi

Code css : (La totalité du code est embarquée sur la page)

.float {
width: 98%;
margin-top: 15px;
border: dotted 1px #6C383a; 
}
.img_droite 
{
float: right;
margin: 4px;
border: 1px solid #000;
}
li {
background-position: -1% 75%;
}


Code html :
 <div class="float">
  <ul>
  <li>Hego Alde</li>
  <li>Appartement F4 - 140 m2 - 3 chambres  </li>
  <li>6 pers</li> 
  <li>Animaux accept&eacute;s : non</li> 
  <li>Thermes &agrave; 7 km (5 mn)</li> 
  <li>Loyer: 330 &agrave;</li>  
  <li>470 &euro; /semaine selon p&eacute;riode&nbsp;</li>                                        
  </ul>
  <img src="chambres/essai.jpg" class="img_droite"/></div>
  <div class="float"></div>
  <div class="float"></div>

Modifié par africa (05 Feb 2008 - 16:46)
bonjour
dans le code html, ce qui doit flotter (ici l'image) doit précéder ce qui se mettra à sa gauche (la liste à puces)

donc: HTML


<div class="float">
<img src="chambres/essai.jpg" class="img_droite"/>
<ul>
  <li>Hego Alde</li>
  <li>Appartement F4 - 140 m2 - 3 chambres  </li>
  <li>6 pers</li> 
  <li>Animaux acceptés : non</li> 
  <li>Thermes à 7 km (5 mn)</li> 
  <li>Loyer: 330 à</li>  
  <li>470 &#8364; /semaine selon période </li>                                        
  </ul>
</div>


CSS :

.float {
width: 98%;
margin-top: 15px;
border: dotted 1px #6C383a; 
}
.img_droite 
{
float: right;
margin: 4px;
border: 1px solid #000;
}