28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Alignement puce, image, texte

Bonjour,

Je suis actuellement en train de mettre en place un portlet qui permet de consulter des documents au travers d'une arborescence. L'arbre est gérer en ajax et s'affiche dans un div de taille fix 200x300px. Ma grande difficulté est le rendu html. Je mis ci dessous un rendu html "type" de l'arbre qui provoque le problème d'alignement. Le problème réside dans l'alignement de la puce, de l'image et du texte sur une seule ligne sans retour à la ligne.
J'ai chercher du coté des div, des float, mais rien de concluant.


<html>
<body>
<style type="text/css">
	.icon {
		height : 20px;
		width  : 20px;
	}
</style>
<div style="height : 300px; width : 250px; border:1px solid black; overflow : auto;">
	
	<ul>
		<li><strong>Root</strong>
			<ul>
			<li><img class="icon" /> dossier 1
				<ul>
				<li><img class="icon" /> dossier 1a
					<ul>
					<li><img class="icon" /> dossier 1a1
						<ul>
						<li><img class="icon" /> dossier 1a1a</li>
						<li><img class="icon" /> dossier 1a1b</li>
						<li><img class="icon" /> dossier 1a1c</li>
						</ul>
					</li>
					</ul>
				</li>
				<li><img class="icon" /> dossier 1b</li>
				<li><img class="icon" /> dossier 1c</li>
					<ul>
					<li><img class="icon" /> dossier 1c1
						<ul>
						<li><img class="icon" /> dossier 1c1a</li>
						<li><img class="icon" /> dossier 1c1b</li>
						<li><img class="icon" /> dossier 1c1c</li>
						</ul>
					</li>
					</ul>
				</li>
				<li><img class="icon" /> dossier 1d</li>
				<li><img class="icon" /> dossier 1e</li>
				</ul>
			</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>


Merci, d'y avoir jeté un oeil !

Adrien.
Modifié par Adrien. (20 Aug 2007 - 10:49)
Alors je ne sais pas si tu t'en es rendu compte, mais la puce, l'image et le texte ne sont pas alignés uniquement parce le div n'est pas assez grand.
Bon pour respecter ce que tu demandes, c'est à dire dans du 200*300px, j'ai réussi à trouvé un petit truc sympa.
Il te suffit d'ajouter ceci entre les balises <style></style>:

li
{
margin-left : -20px;
}


Ainsi les puces seront décalées sur la gauche. Et tu peux aussi choisir de diminuer la police...

Voilà, j'espère avoir répondu à ton attente.
Bon courage Smiley cligne
Salut,

et pense aussi à déclarer correctement le code CSS comme suit :


<style type="text/css">
...
</style>
En fait, je sais que le div n'est pas assez grand, ce que je voudrais c'est dans le cas ou le div n'est pas assez grand forcer l'alignement de la puce, de l'image et du texte quite à ce que ca me ralonge la scrollbar horizontale.

Pour le texte, il suffit que je remplace les espaces par &nbsp; et je n'ai plus de retour a la ligne mais il est reporté entre l'image et le texte.
L'idéal serait que j'encapsule le texte et l'image dans un bloc. L'objectif est que ca marche au minimum sous firefox et ie6/7.
Ah tu veux dire que c'est peu importe l'arbre...là ce n'était donc qu'un exemple Smiley ohwell
Peut-être qu'il faudrait que tu te renseigne sur le overflow:scroll, mais je n'en suis pas sur, je n'ai jamais touché à ça encore Smiley murf

Bon courage
Essais de définir la propriété "white-space: nowrap;" pour ton élément "li" ou pour un bloc qui contiendrait la puce, l'image et le texte.
Sujet clos
Aller à