28172 sujets

CSS et mise en forme, CSS3

Alignement après un display:block

J'ai une image (la flèche) qui est un lien avec effet de survol
c'est donc un display block et ça me met un retour à la ligne
or je voudrais que l'élément suivant (image blanche) <a><img src=""></a>
soit directement collé à mon image flèche
voici mon code :
http://momagrenoble.com/test/
est ce qu'il existe un moyen autre que de positionner mes elements "en dur" ?
merci
<div id="begin"><a class="rollover-left" href="photo001.html"><img src="./images/arrow-left.gif"></a></p>


Premièrement, s'assurer qu'à un <div> correspond un </div> et non un </p>

Ensuite :
#begin{
  display:inline;
}

devrait résoudre le problème.
Bonjour,

Sauf erreur de ma part, le div prend par defaut toute la place disponible.
Les div sont donc à la suite les uns des autres.
Je vous propose donc de:
-1- definir ton div general "all" avec les couleurs, la largeur, ... que vous aouhaitez,
-2- définir un div pour chaque fleche, celui de la fleche gauche, flotte à gauche et celui de la fleche droite flotte à droite
-3- enfin, definir le div des photos.

un peu comme cela
--XHTML --

<body>

<div>

<!--  <div id="begin"><a class="rollover-left" href="photo001.html"><img src="./images/arrow-left.gif" alt="" /></a></div> -->
  <div class="flecheg"><a href="#" alt="D&eacute;placement vers le d&eacute;but"><img src="FlchGche.bmp" width="34px" height="34px" alt="" title="Fl&ecirc;che gauche"/></a></div>

  <div class="fleched"><a href="#" alt="D&eacute;placement vers la fin"><img src="FlchDrt.bmp" width="34px" height="34px" alt="" title="Fl&ecirc;che droite"/></a></div>

  <div class="image"><img src="ImgTst.bmp" width="150px" height="110px" alt="" title="Cela pourrait &ecirc;tre une photo"/></div>
</div>
</body>


-- CSS --

body {color: #000000; background: #606060}

div.flecheg {float: left; width: 50px; height: 50px; background: #404040; margin: 0px; padding: 0px}

div.fleched {float: right; width: 50px; height: 50px; background: #404040; margin: 0px; padding: 0px}

div.image {text-align: center; background: #000000; margin: 0px; padding: 0px}
Sujet clos
Aller à