28219 sujets

CSS et mise en forme, CSS3

Liste d'image et à côté texte correspondant

Bonsoir à tous!

Voilà j'ai encore un petit problème ou plutôt une petite question qui va peut-être parraître bête...

Voilà je fais une liste d'images qui s'affiche donc les unes en dessous des autres et je me demandais comment afficher le texte correspondant à l'image juste à côté de celle-ci.
Dois-je faire une autre liste qui se placera à côté des images ? ou bien est-ce que je peux me débrouiller de façon à caler le texte à côté dans la même div ?

Encore une fois voici mon code :


#goodies_wallpaper_affiche_scroll{
	position:absolute;
	height:582px;
	width:279px;
	top:35px;
	left:-10px;
	overflow:auto;
}

#goodies_wallpaper_affiche_scroll ul {
	position:relative;
	list-style-type:none;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#goodies_wallpaper_affiche_scroll ul li {
	color:#FFFFFF;
	margin: 1em 0 1em 0;
	padding:0px 0 90px 25px;
	height:18px;
}

#goodies_wallpaper_affiche_scroll ul li a
	{
	color:#FB3300;
	display:block;
	height:98px;
	width:129px;
	}

#goodies_wallpaper_affiche_scroll ul li a:hover
	{
	color:#FEFE40;
	border:2px;
	height:98px;
	width:129px;
	}


Et mon code HTML :


			<div id="goodies_wallpaper_affiche_scroll">
		
			<ul>
				<?
				$sql_wall="SELECT * FROM oeuvres WHERE categorieID ='3'";
				$req_wall=mysql_query($sql_wall) or die (mysql_error());
				while ($goodies_wall=mysql_fetch_array($req_wall)) {
					$image=$goodies_wall['imagesSRC'];
					$serie=$goodies_wall['serie'];
					$id=$goodies_wall['ID'];
				?>
					<li><a href="#?idgoodies=<?=$id?>" target="catalogue_conteneur_scroll"><img src="<? echo $image ;?>" height="98" width="129" border="1"></a></li>
				<?
				}
				?>
			</ul>
			</div>


Merci d'avance et bonne fin de soirée! Smiley smile

Aurélie
Modifié par lilie507 (29 Jan 2006 - 19:28)
Bonjour,

Effectivement ce n'est pas très compliqué : Ajoute le texte en question après l'image dans la partie HTML, et dans ta CSS, arrange-toi pour que les images se calent à gauche du texte sinon il apparaîtra en dessous. Selon ce que tu veux faire (texte cliquable ou pas), la méthode peut-être différente.

Smiley cligne
Nilpohc a écrit :
Bonjour,

Effectivement ce n'est pas très compliqué : Ajoute le texte en question après l'image dans la partie HTML, et dans ta CSS, arrange-toi pour que les images se calent à gauche du texte sinon il apparaîtra en dessous. Selon ce que tu veux faire (texte cliquable ou pas), la méthode peut-être différente.

Smiley cligne


Merci beaucoup... mais quelle est la ligne de code qui permet de placer le texte à gauche de l'image? Smiley rolleyes de plus ça sera mon texte qui sera cliquable et non pas l'image...
Pas du tout, rien n'empêche que l'image ET le texte soient cliquables tous les deux. Je vais te donner d'autres indices :

- Si tu veux que le texte soit cliquable aussi :
Ajoute simplement le texte après l'image (mais toujours dans la balise <a>) mais modifiela largeur de tes éléments de liste (li) dans ta CSS (augmente ou passe en auto)

- Si tu ne veux pas que le texte soit cliquable :
Ajoute le texte après l'image mais après la balise </a>, et passe ton "a" en flottant dans ta CSS pour que le texte vienne a côté.

tu vois mieux le truc ?
Merci beaucoup Nilpohc!!! c'est nickel maintenant, le texte est un peu collé à l'image sous FF mais je pense que je devrais pouvoir régler ce problème Smiley smile

Voici le code que j'ai mis :


#goodies_wallpaper_affiche_scroll ul li a
	{
	color:#FB3300;
	display:block;
	height:98px;
	width:129px;
	float:left;
	}


En revanche le texte est aligné en haut de l'image, y aurait-il un moyen de le centrer par rapport à celle-ci? j'ai essayé de mettre différents attributs dans ce style mais il ne bouge que l'image... ou dois-je placer le code pour qu'il change le texte de place? Smiley confused

Merci beaucoup en tous cas pour ton aide!!

Aurélie
Raphael a écrit :
Bravo, le problème est donc [Résolu] on dirait Smiley cligne

presque... puisque j'aimerais bien centré mon texte au milieu de l'image si qyelqu'un savait comment faire ...
Smiley confus
gcyrillus a écrit :
bonjour,
applique un 
vertical-align:middle;
a ta balise image ... Smiley smile
a plus

j'ai bien essayé de mettre ce code un peu partout (dans la div ul, dans la div li) mais rien n'y fait, le texte ne se centre pas par rapport à l'image...
ou dois-je placer exactement ce code ? car je n'ai pas de balise image et de plus, je voudrais que ça soit le texte qui soit centré par rapport à l'image.

Merci d'avance & bonne soirée

Aurélie
Sujet clos
Aller à