28220 sujets

CSS et mise en forme, CSS3

Problème positionnement image par rapport au texte

Bonjour,

J'aimerais en bas de chaque article mettre deux liens permettant de revenir à la page précédente ou d'aller à la suivante, j'ai testé avec juste du texte pas de problème en faisant un float:left et un float:right mais j'aimerais devant chaque texte insérer une icône de flèche directionnelle, et là le positionnement est bizarre : l'image ne s'aligne pas correctement par rapport au texte.

Voici le résultat que j'aimerais obtenir dans la pièce jointe.

Merci d'avance !

Olivier upload/6108-imagetest.gif
Bonsoir,
Tu peux ajuster cela via la propriété "vertical-align", en visant les images. Egalement possible en décalant via le positionnement relatif.

Bonne continuation
Salut,

Comment insères-tu ton image? Tu peux utiliser le pseudo-format :before dans ton fichier CSS.

@++

Edit: Par exemple...

.precedent:before
{
content: url("ton_image.png");
}

Modifié par Tony_M (17 Apr 2006 - 18:11)
et comment je les positionne l'un par rapport à l'autre??

je fais un float:left pour l'image et le texte qui doivent aller à gauche?

un float:right pour l'autre bloc??
Salut,

Pour synthétiser, tu fais deux blocs, un avec une classe précédente (ou un id, si l'élément est unique) et une classe suivante (ou un id). Tu leurs appliques un float left et right avec une image en background
mais si je mets l'image en background, la flêche ne pourra pas être un lien non???

J'ai essayé de placer tout ca dans deux div, mais je ne parviens pas à aligner la flêche avec le texte et en plus j'aperçois déjà que le résultat n'est pas le même dans IE !

regardez ici :

http://w3.homedns.org/Olivier/p1.html

le css se trouve à la fin de la page normal.css

http://w3.homedns.org/Olivier/normal.css

le plus simple c'est que je crée une image avec du texte inclus dedans mais alors ca ne serait pas très bon pour l'accessibilité.
Salut,

Pourquoi ne pas faire du lien un bloc et mettre l'image en background ? 

a {
	display: block;
	width: 150px;
	height: 50px;
	background: url(tonimage.pcx);
	padding: 0 0 0 10px;
}
Sujet clos
Aller à