Alignement d'une liste non ordonnée sans retirer les balises !
Résolu/Fermé
emmmmmy
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
-
14 févr. 2019 à 15:43
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 14 févr. 2019 à 17:29
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 14 févr. 2019 à 17:29
A voir également:
- Alignement d'une liste non ordonnée sans retirer les balises !
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Comment retirer une page sur word - Guide
- Liste de diffusion whatsapp - Guide
- Liste de numéro de téléphone suspect 07 ✓ - Forum Mobile
3 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié le 14 févr. 2019 à 17:30
Modifié le 14 févr. 2019 à 17:30
C'est good. J'ai mis un float: left; comme Zorghtod m'avais conseillé, et un padding-right 15px Merci beaucoup !
OK -))
l'essentiel c est que tu y arrive que tu comprenne un minimum ce que tu fais et que tu apprenne un peu en meme temps !
a+
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié le 14 févr. 2019 à 16:22
Modifié le 14 févr. 2019 à 16:22
Salut voila un exemple simple
avec list-style-type: none;
display: inline;
tu fais a ta sauce pour le padding !
A+
avec list-style-type: none;
display: inline;
tu fais a ta sauce pour le padding !
<!DOCTYPE html> <html> <head> <title> Liste sans puce et horizontal </title> <meta charset="utf-8"> <style type="text/css"> .horizontal { list-style-type: none; display: inline; padding-left: 30px; } </style> </head> <body> <ul> <li class="horizontal">N°1 </li> <li class="horizontal">N°2 </li> <li class="horizontal">N°3 </li> </ul> </body> </html>
A+
emmmmmy
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
14 févr. 2019 à 16:44
14 févr. 2019 à 16:44
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié le 14 févr. 2019 à 16:51
Modifié le 14 févr. 2019 à 16:51
Salut si il sont pas sur la meme ligne c est que plus loin dans le css il doit y avoir des valeurs qui annule le
display: inline;
mais comme ca sans avoir reelement les code html et css impossible de te dire quoi modifier !
ps l image que tu as mise est la meme que en haut :-))
display: inline;
mais comme ca sans avoir reelement les code html et css impossible de te dire quoi modifier !
ps l image que tu as mise est la meme que en haut :-))
Bonjour,
en effet avec CSS, c'est une des bases le positionnement.
D'abord vous pouvez commencer par enlever les comportements de balises gênants pour ce que vous voulez faire.
Comme avec list-style-type:none;
Pour l'alignement vous pouvez essayer avec float:left;
Ce qui indique que la balise se positionnera en "flottant" à gauche de l’élément qu'elle suit.
à noter:
_ que le positionnement dit 'flottant' est parfois gênant car les éléments remis dans le (dit) flux normal des balises(ç.à.d. leur positionnement à la suite l'un de l'autre qui différencie les comportements de types bloc(article, section, div...) des comportements de types dits inline (comme pour p, span, et la plus grande majorité des balises destinées à un contenu texte)) peuvent du coup être mal positionne. Pour cela vous pouvez utiliser sur cet élément intermédiaire la propriété CSS clear avec la valeur 'both'.
_ vous devez être à l'aise avec vos sélecteurs de balises, comme par exemple en utilisant des classes ou id pour vos éléments ciblés. Il est aussi possible de ne cibler que les balises 'enfants'(ou incluses dans) d'une autre.
Si vous n'êtes pas sûr faites une recherche 'sélecteur CSS' il y a beaucoup de méthodes, des plus fréquentes à celles qui ne serviront que dans des cas particuliers. Les cas particuliers permettent d'éviter d'alourdir le HTML inutilement avec des attributs, d'écrire plus rapidement , de pouvoir automatiser simplement avec l'usage d'un langage de programmation etc...
_ Il n'y a pas de règles absolues pour le positionnement en CSS. Il y a plusieurs méthodes. Chacune est à adapter au contexte(et ce que l'on veut). Ici le positionnement flottant m'a semblé le plus adéquat. ça dépends aussi des habitudes de chacun/chacune. Pensez au clear:both; si vous utilisez ce type de positionnement , ça évite des surprises en modifiant la page.
Si vous n'avez un livre qui vous sert de référence en C.S.S. ayez un site sus la main qui les regroupe pour pouvoir facilement trouver les propriétés avec lesquelles vous n'êtes pas familière.
Comme par exemple l'incontournable site de ceux qui éditent les standards web:
https://www.w3schools.com/cssref/default.asp
Il à l'avantage d'être à jour et d'indiquer les différences éventuelles dans les navigateurs, exhaustif et indiquant aussi les notions qui ne sont plus à utiliser. Il permet aussi de 'tester' directement par un exemple de code modifiable.
en effet avec CSS, c'est une des bases le positionnement.
D'abord vous pouvez commencer par enlever les comportements de balises gênants pour ce que vous voulez faire.
Comme avec list-style-type:none;
Pour l'alignement vous pouvez essayer avec float:left;
Ce qui indique que la balise se positionnera en "flottant" à gauche de l’élément qu'elle suit.
à noter:
_ que le positionnement dit 'flottant' est parfois gênant car les éléments remis dans le (dit) flux normal des balises(ç.à.d. leur positionnement à la suite l'un de l'autre qui différencie les comportements de types bloc(article, section, div...) des comportements de types dits inline (comme pour p, span, et la plus grande majorité des balises destinées à un contenu texte)) peuvent du coup être mal positionne. Pour cela vous pouvez utiliser sur cet élément intermédiaire la propriété CSS clear avec la valeur 'both'.
_ vous devez être à l'aise avec vos sélecteurs de balises, comme par exemple en utilisant des classes ou id pour vos éléments ciblés. Il est aussi possible de ne cibler que les balises 'enfants'(ou incluses dans) d'une autre.
Si vous n'êtes pas sûr faites une recherche 'sélecteur CSS' il y a beaucoup de méthodes, des plus fréquentes à celles qui ne serviront que dans des cas particuliers. Les cas particuliers permettent d'éviter d'alourdir le HTML inutilement avec des attributs, d'écrire plus rapidement , de pouvoir automatiser simplement avec l'usage d'un langage de programmation etc...
_ Il n'y a pas de règles absolues pour le positionnement en CSS. Il y a plusieurs méthodes. Chacune est à adapter au contexte(et ce que l'on veut). Ici le positionnement flottant m'a semblé le plus adéquat. ça dépends aussi des habitudes de chacun/chacune. Pensez au clear:both; si vous utilisez ce type de positionnement , ça évite des surprises en modifiant la page.
Si vous n'avez un livre qui vous sert de référence en C.S.S. ayez un site sus la main qui les regroupe pour pouvoir facilement trouver les propriétés avec lesquelles vous n'êtes pas familière.
Comme par exemple l'incontournable site de ceux qui éditent les standards web:
https://www.w3schools.com/cssref/default.asp
Il à l'avantage d'être à jour et d'indiquer les différences éventuelles dans les navigateurs, exhaustif et indiquant aussi les notions qui ne sont plus à utiliser. Il permet aussi de 'tester' directement par un exemple de code modifiable.
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié le 14 févr. 2019 à 16:42
Modifié le 14 févr. 2019 à 16:42
Salut
vue le niveau qu elle a en html css ,sinon elle ne poserait ce type de question ,
elle est pas prete de comprendre un traitre mot de ce que tu viens d ecrire !!
vue le niveau qu elle a en html css ,sinon elle ne poserait ce type de question ,
elle est pas prete de comprendre un traitre mot de ce que tu viens d ecrire !!
emmmmmy
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
14 févr. 2019 à 17:01
14 févr. 2019 à 17:01
Merci pour votre réponse,
cela m'a beaucoup aidé !
Effectivement, la balise float redirige les éléments à la suite les uns des autres.
Mais je dois trouver maintenant comment les espacer les uns des autres car ils forment une phrase à présent.
Ce qui est difficile pour la lecture des mots.
Merci de votre aide !
cela m'a beaucoup aidé !
Effectivement, la balise float redirige les éléments à la suite les uns des autres.
Mais je dois trouver maintenant comment les espacer les uns des autres car ils forment une phrase à présent.
Ce qui est difficile pour la lecture des mots.
Merci de votre aide !
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié le 14 févr. 2019 à 17:11
Modifié le 14 févr. 2019 à 17:11
le plus simple met du padding-right: ou padding-left: ou margin-right: ou margin-left: au balise li que tu veux écarter tu vois lequel te va le mieux
http://css.mammouthland.net/margin-padding-css.php
http://css.mammouthland.net/margin-padding-css.php
emmmmmy
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
14 févr. 2019 à 17:24
14 févr. 2019 à 17:24
C'est good. J'ai mis un float: left; comme Zorghtod m'avais conseillé, et un pudding-right 15px
Merci beaucoup !
PS: Oui je suis tout juste en train d'apprendre les bases donc c'est compliqué pour moi !
Je n'avais encore jamais publié sur un forum.
Et je commence tout juste.
Bien vu ;)
Bonne soirée et merci
Merci beaucoup !
PS: Oui je suis tout juste en train d'apprendre les bases donc c'est compliqué pour moi !
Je n'avais encore jamais publié sur un forum.
Et je commence tout juste.
Bien vu ;)
Bonne soirée et merci
emmmmmy
Messages postés
22
Date d'inscription
jeudi 14 février 2019
Statut
Membre
Dernière intervention
23 septembre 2019
14 févr. 2019 à 17:24
14 févr. 2019 à 17:24
- PADDING
Au lieu de pudding. C'est pas vraiment la même chose...