CSS et liste en UL

Version imprimable

Voir 40 message(s) de cette discussion en une page

04/08/2012, 18h15
Décibel

CSS et liste en UL

Bonjour,

dans une liste en UL avec 4 niveaux, j'ai à la fin de chaque ligne un input type="radio", mais j'aimerais qu'il se place totalement à droite.
Donc le texte à gauche, comme toutes les listes, mais le input à droite, est-ce possible ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<head>
	<style type="text/css">
        input {float: right;}
        </style>
</head>
<body>
	<ul>
		<li>toto<input type="radio" /></li>
		<li>tata<input type="radio" /></li>
		<li>tutu<input type="radio" /></li>
	</ul>
</body>

Citation:

Donc le texte à gauche, comme toutes les listes

Ah ah ! Les positions à Papa !

04/08/2012, 19h37
Décibel
Super !!!
Mais, ;)
Mais j'ai aussi une image avant et elle ne va pas à droite elle alors que le input oui...
J'ai modifié le css ainsi
Code:

1 2 3 <style type="text/css"> .adroite {float: right;} </style>
et voila le code HTML...

Code:

<li>Blabla<img src="../images/web.png" width="46" height="15" alt="Web" classe="adroite" /><input type="radio" name="radio" id="<?=$dataN4['Id_arbo']?>" onClick="Maj_Select(this)" class="adroite" />
04/08/2012, 19h43
Décibel

Ha !!
Pas bon du tout, le input est à la ligne du dessous...
J'adore le CSS :cry:
04/08/2012, 19h44
Muchos

Attention : tu as écrit classe="adroite" pour l'image.
04/08/2012, 20h03
Décibel

Il faut que je retourne en classe !!! ;)

Merci !
04/08/2012, 20h06
Décibel

Ha mais pas fini, il y a toujours un saut de ligne pour le input et la petite image...
Pourquoi ?
05/08/2012, 14h47
Décibel

Personne pour une petite idée de comment faire pour que l'image et le input reste sur la même ligne que le texte ? :cry:
05/08/2012, 16h38
NoSmoking

Bonjour,
je ferais plutôt

Code:

<li><span style="float:right"><img src="http://www.developpez.net/forums/images/buttons/home.gif" width="46" height="15" alt="Web"><input type="radio" name="radio"></span>Blabla</li>
05/08/2012, 18h36
Muchos

Le problème, c'est que le `float' fait son travail. Dès que le texte du li le pousse, il se décale sur la ligne du bas.

Perso, j'ai cherché aussi des solutions à base de `text-align'; je n'ai rien trouvé d'autres…
05/08/2012, 18h41
Décibel

Parfois je me demande pourquoi on se prend la tête avec ce CSS, alors qu'avec une table la chose est réglée en 2 secondes...
En sachant aussi que pour le référencement li ou table ont la même puissance, c'est à dire nulle...
05/08/2012, 18h44
Muchos

Vous créez des sites web et vous n'avez rien compris à l'intégration. Dommage :(
05/08/2012, 18h45
Décibel

La solution de NoSMoking marche bien !!!

Merci a tous les deux !:ccool:
05/08/2012, 19h01
Décibel

Citation:

Envoyé par Muchos

Vous créez des sites web et vous n'avez rien compris à l'intégration. Dommage :(

C'est un peu prétentieux, non...
Je me fais ch... avec le CSS depuis des années et je fais beaucoup de mes sites avec cela en évitant les tables, mais sérieux, bien souvent je regrette...

Et la chose est bien là...
Si mon texte est un peu trop long, l'image et le input passent en dessous...
Pas de solution, pour une chose qui semble si simple, alors je veux bien ne pas connaitre grand chose à l'intégration, mais il faudrait qu'elle soit "simplement" possible...
05/08/2012, 19h26
Muchos

Désolé d'avoir été prétentieux, mais on doit comprendre que la structuration d'une page web, c'est le contenu d'un côté, la mise en forme de l'autre. On ne doit plus utiliser table pour faire des mises en page, ça ne sert pas à ça. On peut utiliser la propriété css `display: table;'.

Perso, je trouve que CSS est un langage génial, qui rend l'intégration bien plus simple qu'avant (avant 1996 mdr !).
05/08/2012, 19h44
Décibel

Mouaiii, la preuve, ma simple liste ne marche pas comme je le souhaite.
Je ne sais pas si tu es à ton compte, pour moi c'est le cas.
J'ai perdu des heures et des heures à me prendre la tête pour simplement essayer de faire beau dans cette liste, tout cela pour ne pas utiliser une table.
Alors tu vois je développe en PHP de gros sites et le coté développeur "politiquement correct" me fait bien rigoler.
Pour moi il y a le PHP d'un coté, le HTML de l'autre, les données de l'autre encore, le javascript, et maintenant un CSS capricieux qui en plus n'est pas interprété de la même manière d'un navigateur à l'autre et tout ça pour quoi ?
Pour qu'un développeur jubile devant son code, sérieux pour le reste cela ne sert strictement à rien !
Le CSS c'est génial pour les couleurs de liens, les images de fond, les couleurs, tailles de texte, bref la déco mais pour monter une page, une table est mille fois plus simple et précis et interprétée à la perfection par tous les navigateurs.
Je crois aussi qu'Amazon et Google, pour ne parler que de eux, ont bien compris cela et dans leur site on retrouve encore le mot "interdit" <table>, sérieux même dans la page toute simple de Google il a des tables... ;)
05/08/2012, 20h18
Muchos

Citation:

sérieux même dans la page toute simple de Google il a des tables...

Et alors ? :roll:

Citation:

on retrouve encore le mot "interdit" <table>

table n'est absolument pas « interdit ». C'est juste que ça sert à réaliser des tableaux de données, pas à faire des mises en page. C'est comme h1 : ça sert à faire un titre de niveau 1, pas à écrire en gros.

Pour faire une liste, il existe list…

Citation:

un CSS capricieux qui en plus n'est pas interprété de la même manière d'un navigateur à l'autre

Ce n'est pas la faute d'un langage s'il est supporté différemment ou pas du tout par un navigateur. Et ce n'est pas de la faute de CSS si vous l'avez utilisé sur le tard.

Citation:

Je ne sais pas si tu es à ton compte, pour moi c'est le cas. […] le coté développeur "politiquement correct" me fait bien rigoler.

Pour ma part, je fais de l'intégration web en amateur depuis septembre 2011 seulement. Je n'ai donc pas vos obligations.
Par contre, je ne crois pas qu'il s'agisse de « politiquement correct », mais de « bonnes pratiques » (respect des standards, accessibilité…). C'est éthique et pratique à la fois.

Citation:

J'ai perdu des heures et des heures à me prendre la tête pour simplement essayer de faire beau dans cette liste, tout cela pour ne pas utiliser une table.

Désolé, mais des gens arrivent à réaliser des sites magnifiques en respectant les normes.
Ce n'est pas mon cas, mais ça viendra peut-être. Pas question de baisser les bras.
05/08/2012, 20h47
Décibel

Je ne souhaite pas polémiquer, mais de quels standards tu parles ?

Mes sites passent au W3c et il se moque bien de trouver des tables ou des div...

Perso je crois que le div est une mode...
Et pour faire de jolis sites, on trouve aussi bien des sites avec des tables qu'avec des div...

hors de toute polémique :mouarf: !!

Le principe du positionnement en flottant est des plus simples et également le plus délicat à sentir, à preuve cette discussion.

Pour rappel les éléments flottant sont retirés "partiellement" du flux mais reste attachés à leur conteneur. Ces éléments n'occupent que la place nécessaire à leur contenant.

float:left;
ce placement ne pose pas de problème dans la grande majeur partie des cas.

Les éléments "flottant left" se positionnent normalement et laissent de la place sur la même ligne à leur droite. Les éléments suivant occupent ainsi la place laissée libre.
Ce comportement est facilement interprétable par les moteurs de rendu.

float:right;
le moteur de rendu place les éléments dans le flux puis doit positionner l'élément "flottant right", il doit donc recalculer les positions et emplacement des éléments précédents, mais on le sait tous les moteurs de rendu n'ont pas la même efficacité, je ne citerais pas de nom ;)

Dans ton cas ce qui est intéressant de faire est de lui facilité la tâche, en lui indiquant tout de suite quel élément doit aller à droite, il lui sera plus facile de mettre les éléments dans le flux au bon endroit la place restante étant connue.
Pour cela tout ce qui doit être placée à droite et placé dans un même conteneur et c'est ce conteneur qui est déclaré "flottant right", d'où l'écriture "inversée" des éléments.
Une autre solution aurait été de mettre la première partie dans un conteneur en float:left, le résultat aurait été correct.

Voila en espérant avoir démystifié un peu ce soucis.

[EDIT]
Ajout fichier exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE HTML> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[...]</title> <style type="text/css"> ul li{ list-style-type:none; background-color:#e0e0e0; margin:1px 0; } </style> </head> <body> <ul> <li>Blabla<span style="float:right"><img src="http://www.developpez.net/forums/images/buttons/home.gif" width="46" height="15" alt="Web"><input type="radio" name="radio"></span></li> <li></li> <li><span style="float:right"><img src="http://www.developpez.net/forums/images/buttons/home.gif" width="46" height="15" alt="Web"><input type="radio" name="radio"></span>Blabla</li> <li></li> <li><span style="float:left">Blabla</span><span style="float:right"><img src="http://www.developpez.net/forums/images/buttons/home.gif" width="46" height="15" alt="Web"><input type="radio" name="radio"></span></li> <li></li> </ul> </body> </html>

06/08/2012, 08h50
Décibel

Merci pour ta réponse !
Mais en fait cela marche très mal...
Si le texte "Blabla" dans ton exemple est trop long, l'image et le input passent en dessous...
Alors tout se décale...
La liste est une liste de dossiers et le input permet d'avoir une action sur le dossier, s'il passe à la ligne tu peux imaginer les erreurs qui va y a avoir...
J'aurai bien mis une table, pour ne plus perdre de temps (!!!) mais il y a des fonctions en CSS qui affichent la liste sous un aspect d'arborescence...
Bon pour finir j'ai tout viré, l'image et le input seront à la suite du texte... :?
Merci a vous mais pas merci à CSS!

Voir 40 message(s) de cette discussion en une page