Guide informatique hardware En1heure.com
Articles phares : Quelle alimentation PC | Choisir son ecran LCD PC

Chercher un sujet :

Image et a côté texte - xhtml

Support HTML / XHTML / CSS et validation de vos sites aux standards du Web.

Messages: 192
Inscription: Jeu Mai 06, 2004 3:27 pm
Image et a côté texte - xhtmlMessagePosté: Jeu Juin 03, 2004 4:58 pm

Bonjour,
J'essaye de faire un petit truc depuis quelques jours pour améliorer un peu mon site.
J'essaye de mettre une image et à côté le texte.
Seulement, quand j'en met deux l'une en dessous de l'autre, la seconde se met a droite et en bas de la première, et ainsi de suite.

Si quelqu'un a une astuce ?
Voici le code que j'utilise :
Code: Tout sélectionner
.text_contenu{font-size: 12px; margin-left: 3px; margin-right: 3px; margin-bottom: 1px; }


.lettrine {float: left; font-size: 3em; background-color: #e6e1e1; line-height: 1em;}

.cotelettrine{padding-left: 155px ; background-color: #e6e1e1;}


Code: Tout sélectionner
<div class="titre_contenu">
      Premier Kit :
   </div>
     <div class="text_contenu">
<span class="lettrine"><a href="http://www.tutoriels-fr.com/kits/1/"><img src="kits/1/images/kit1.jpg" class="img"/></a></span>

<span class="cotelettrine">texte texte texte</span>
</div>

<div class="titre_contenu">
      Premier Kit :
   </div>
     <div class="text_contenu">
<span class="lettrine"><a href="http://www.tutoriels-fr.com/kits/1/"><img src="kits/1/images/kit1.jpg" class="img"/></a></span>

<span class="cotelettrine">texte texte texte</span>
</div>


Merci d'avance a celui qui trouvera la solution :o

J'oubliais, pour mieux comprendre le problème :
http://www.tutoriels-fr.com/?page=kits
Avatar de l’utilisateur
Administrateur
Messages: 1614
Inscription: Ven Mar 26, 2004 7:16 am
Localisation: /var/www/
Image et a côté texte - xhtmlMessagePosté: Ven Juin 04, 2004 7:58 am

Hello,
tu peux déjà te passer du <span class="lettrine">, tu peux mettre <a class="lettrine"> ou <img class="lettrine">
Après <span class="cotelettrine">texte texte texte</span> il faut mettre un clear ce qui nous donnerait

XHTML
Code: Tout sélectionner
<span class="cotelettrine">texte texte texte</span>
<hr class="clear" />
</div>
(...)


CSS
Code: Tout sélectionner
.clear {
clear:both;
border:0em;
padding:0em;
margin:0em;
}

Sinon tu peux remplacer le <hr /> par un <br clear="both" /> mais ce n'est aps valide XHTML mais uniquement HTML. La méthode avec le <hr> (que SIB m'a donné) est préférable.

Tiens nous au courant ;)

Messages: 192
Inscription: Jeu Mai 06, 2004 3:27 pm
Image et a côté texte - xhtmlMessagePosté: Ven Juin 04, 2004 10:23 am

Ca marche, c'est impecable ;)
Encore une fois, merci a toi vanquish.

Je connaissais pas l'attribut <hr class="both" /> mais apparement ca a l'air bien pratique.

@u prochain problème ;p

Retourner vers HTML / XHTML / CSS



Chercher un sujet :


cron