18073 sujets

Questions générales et questions de débutants

Comment aligner horizontalement des "images réactives sans javasc

Bonjour Smiley biggrin

J'ai suivi à la lettre le tuto sur "Une image réactive (rollover) sans javascript" qui est là : http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript
et ca marche super Smiley biggrin

J'ai par contre un soucis dans la mise en oeuvre, lorsque je met plusieurs images, elles s'empilent verticalement les unes sur les autres. Je souhaite que ces images se trouvent cote à cote, alignés horizontalement. Je n'y arrive pas Smiley decu . Si quelqu'un a une idée Smiley biggrin merci par avance Smiley cligne
C'est simplement parce que la Div indique un retour de ligne implicite.

Tu dois la remplacer parce une span (je ne sais pas si cette méthode est correcte mais elle marchera)
Bonjour, merci de ton aide.

Petit problème : avec ma culture limité je ne comprend pas où je dois intervenir.

Je me demande où se trouve la "div" qui indique un retour de ligne implicite ? et comment la remplacer par une "span" ?

Bon soyons clair je ne sais pas ce qu'est une "div" et une "span" Smiley rolleyes

Si mon cas est désespéré bein...tant pis Smiley decu mais si il y a une petite chance que j'arrive au bout de cette réalisation qui me tient tant à coeur merci de me répondre Smiley biggrin
Tu devrais lire ça :

http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html#ss_part_3

Il est question de DIV et de SPAN avec leurs différences, et lis ce qui précède également si tu veux être bien formé.

Autre remarque, je pense que pour apprendre il vaut mieux essayer de recopier le code (à la main donc) et d'essayer de comprendre ce que chaque ligne fait Smiley smile

Pour te répondre, dans le code (X)HTML tu as :

<div class="preload"></div>
<div class="conteneur">
<a class="image" href="http://www.alsacreations.com" title="cliquez !"></a>

</div>


Comme expliqué dans le lien ci dessus, la balise <div></div> est une balise de type block, c'est à dire que tout ce qui est à l'intérieur de celle ci est enfermé dans un block, et les block une fois fermé par la balise </div> implique un retour de ligne.

Tu utiliseras donc <span></span> à la place, qui est une balise de type inline, qui peut donc être mise plusieurs fois sur une même ligne.

Tu auras donc

<span class="preload"></span>
<span class="conteneur">
<a class="image" href="http://www.alsacreations.com" title="cliquez !"></a>

</span>
Sujet clos
Aller à