Créer un liseret sur le bord d'une section

17 août 2011 à 16:06:32

Bonjour à tous!

Je souhaite réaliser une liste de paragraphes que les visiteurs pourront réorganier comme ils le veulent. Pour cela, j'aimerais mettre le long de chaque paragraphe un petit "liseret" cliquable, que le visiteur pourra sélectionner pour faire glisser les paragraphes. Mon objectif est d'obtenir ce résultat: Création d'un liseret

Pour l'instant, j'utilise un tableau pour que le rectangle gris fasse la même hauteur que mon élément, mais je trouve ca vraiment pas top niveau respect des standards. J'ai aussi essayé de créer un paragraphe vide que je mets en float:left; et avec une hauteur de 100%, mais rien n'y fait, je n'arrive jamais à obtenir le même résultat que ci-dessus!

Une idée de comment je pourrais faire?

http://www.zenobe.free.fr/

jultoys

17 août 2011 à 16:39:41

Salut,

pour la hauteur oublie le "height: 100%", tu peux éventuellement le faire en javascript en captant la hauteur de ton paragraphe et en l'appliquant à ton élément qui servira de "poignée".

Étant donné que tu vas avoir besoin du Javascript pour organiser tes paragraphes ce serait dommage de se priver

Sinon, tu peux faire une case en haut à droit/gauche d'une hauteur et largeur fixes (genre 20px de coté) et avec une petite image indiquant aux gens que c'est la poignée de déplacement.

funtim78

17 août 2011 à 17:31:31

Merci pour ta réponse, mais il doit quand même bien y avoir un moyen de le faire en css uniquement?
Après c'est vrai, les poignées ne peuvent servir de toute façon que si l'utilisateur a javascript d'activé, donc il serait logique de les rajouter par ce moyen. Mais il y a forcément une méthode plus simple pour le faire!

http://www.zenobe.free.fr/

jultoys

18 août 2011 à 9:56:44

Tu peux le faire avec une image de la couleur que tu veux et qui fait 1px x 1px.
Ensuite, tu l'insert dans ta zone et tu lui applique les propriété css :

<html>
	<head>
		<title></title>
	<head>
	<body>
		<div class="paragraphe">
			<img src="..." alt="..." class="poignee"/>
			<p>Ton texte ici</p>
		</div>
		<div class="paragraphe">
			<img src="..." alt="..." class="poignee"/>
			<p>Ton texte ici</p>
		</div>
		<div class="paragraphe">
			<img src="..." alt="..." class="poignee"/>
			<p>Ton texte ici</p>
		</div>
	</body>
</html>

div.paragraphe {
	position: relative;
	padding: 10px 10px 10px 30px;
	margin-bottom: 10px;
	border: 1px solid #CCC;
}
		
img.poignee {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
}

C'est une autre solution...
Je ne l'ai testées qu'avec FF.

EmmanuelBeziat

18 août 2011 à 10:51:15

Bonjour,

Dans l'idée, un simple border-left suffirait ; mais si tu veux le rendre cliquable, je ne suis pas sûr de la marche à suivre.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Myssdii

18 août 2011 à 10:56:23

Si tes paragraphes sont de hauteur variable, il faut soit passer par des tableaux (mais comme tu l'as dit c'est pas élégant niveau code), soit en émuler un via les propriétés display: table-cell (mais problèmes de compatibilité avec IE7 et inférieurs), ou alors en Javascript (tu récupères la hauteur effective du paragraphe et tu l'appliques au liseret).

Pour des colonnes de hauteur fluide mais identiques, je ne connais que ces trois solutions.