28173 sujets

CSS et mise en forme, CSS3

OK]Reprendre place libérée par image déplacée par un position:relative

Bonjour,

Veuillez m'excuser pour ce titre de sujet dans lequel il manque des mots mais je n'avais pas la place de tout écrire...
Revenons en à nos moutons, je dois convertir une page HTML au xHTML/CSS, et j'ai un petit souci. Voilà ce à quoi je dois arriver :
http://apu.mabul.org/up/1/apu-1-mr78fpe2hup13grzovxx0p4i.png
Voilà ou j'en suis :
http://apu.mabul.org/up/1/apu-1-o64ewnj50tslq26lc11yvidv.png
Et mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <style type="text/css">
           body
{
   width: 350px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   color: #666666; 
   font-size: 11px; 
   text-decoration: none
}
#conteneur
{
   width: 350px;
   border-left: 1px solid #94BED6;
   padding-left: 6px;
}
a 
{
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   color: #7E8CC1; 
   font-size: 11px; 
   text-decoration: underline
}
.image
{
   position: relative;
   right: 19px;
}
       </style>
   </head>
   <body>
        <div id="conteneur">   
                 <p>
					<img src="carre.gif" alt="Puce" class="image" /> 
					DE VRAIS OUTILS DE DIFFERENCIATION<br />
					<ul>
						<li>Observatoires</li>
						<li>Etudes de cohorte</li>
						<li>Données épidémiologiques</li>

						<li>Études en Vie Réelle des patients</li>
						<li>Études de population patient</li>
						<li>Registres</li>
						<li>Études cliniques</li>
						<li>Études de Santé Publique</li>
					</ul>
				 </p>
                 <p>
					<img src="carre.gif" alt="Puce" class="image" /> 
					Annonce Presse<br/>
					Fusce volutpat vestibulum tellus. Ut erat dui, tincidunt ac, vehicula et, viverra eu, pede.
                 </p>
		</div>	  
   </body>
</html>

Comme vous pouvez le voir, pour que la puce se mette à gauche de la bordure, j'utilise un "position: relative" dessus. Mais pour la peine, de la place se libère à la place de base de la puce, et cela fait une sorte de retrait à la première ligne du texte. Auriez-vous une solution pour retirer ce retrait?

Merci.
Modifié par Arthas (13 Jul 2007 - 12:58)
Arthas a écrit :
Mais pour la peine, de la place se libère à la place de base de la puce, et cela fait une sorte de retrait à la première ligne du texte.

Soit positionner la première ligne de texte en relatif également, soit utiliser une marge négative pour la puce plutôt que le positionnement relatif. Mais ça relève du bricolage...

Si tes puces doivent toujours être en face d'un titre, le plus simple est de les intégrer comme image de fond des titres, titres que tu pourras positionner en relatif pour les décaler vers la gauche. Par exemple:
h2 {
position: relative;
left: -40px;
padding-left: 40px;
background: url(mapuce.png) no-repeat left center;
}
Yop,

Pour positionner la première ligne de texte en relatif, je l'avais déjà fait mais ce n'aurait pas été pratique quand j'aurai du faire un paragraphe pour chaque article sorti d'une base de donnée...

Donc j'ai pris ta seconde solution, juste comme ce n'était pas des titres mais des paragraphes, j'ai mis au p et non au h2, et j'ai modifié les propriétés de background, conclusion : tout marche nickel !

Merci beaucoup.
Sujet clos
Aller à