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 ?
Version imprimable
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:
2
3
4
5
6
7
8
9
10
11
12
13
Ah ah ! Les positions à Papa !Citation:
Donc le texte à gauche, comme toutes les listes
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
et voila le code HTML...Code:
2
3
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" />
Ha !!
Pas bon du tout, le input est à la ligne du dessous...
J'adore le CSS :cry:
Attention : tu as écrit classe="adroite" pour l'image.
Il faut que je retourne en classe !!! ;)
Merci !
Ha mais pas fini, il y a toujours un saut de ligne pour le input et la petite image...
Pourquoi ?
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:
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>
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…
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...
Vous créez des sites web et vous n'avez rien compris à l'intégration. Dommage :(
La solution de NoSMoking marche bien !!!
Merci a tous les deux !:ccool:
C'est un peu prétentieux, non...Citation:
Envoyé par Muchos
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...
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 !).
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... ;)
Et alors ? :roll:Citation:
sérieux même dans la page toute simple de Google il a des tables...
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.Citation:
on retrouve encore le mot "interdit" <table>
Pour faire une liste, il existe list…
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:
un CSS capricieux qui en plus n'est pas interprété de la même manière d'un navigateur à l'autre
Pour ma part, je fais de l'intégration web en amateur depuis septembre 2011 seulement. Je n'ai donc pas vos obligations.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.
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.
Désolé, mais des gens arrivent à réaliser des sites magnifiques en respectant les normes.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.
Ce n'est pas mon cas, mais ça viendra peut-être. Pas question de baisser les bras.
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 exempleCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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!
Merci quand même pour ton code, voici le visuel...
Bonjour,
Pourrais-tu donner toutes les contraintes de ton affichage stp (si le texte est plus long, les lignes suivantes doivent-elles rester à côté ou "habiller" le couple image/input? La taille de l'image est-elle tj la même ? Est-ce une image purement déco ? Les li sont-ils de taille fixe ?...)
En quoi la première proposition de NoSmoking ne répondait-elle pas à tes attentes ?
Citation:
Envoyé par NoSmoking
Bon, je viens de refaire une tentative en essayant de bien faire gaffe à tous les autres codes span et class et ça marche !
Merci a vous tous et toute !