IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Alignement à gauche liste ul


Sujet :

Positionnement en CSS

  1. #1
    Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2013
    Messages : 7
    Points : 4
    Points
    4
    Par défaut Alignement à gauche liste ul
    Bonjour,
    Je n'arrive pas à aligner mon sommaire comme je le souhaite.
    J'ai cherché sur internet un bon moment mais je ne trouve rien.
    J'ai fait une liste imbriquée avec <ul>.

    Visuellement je voudrais avoir ça :

    Sommaire :
    ......Standards XHTML et CSS : quelle différence ?
    ..........Le W3C et les standards du Web
    ..........Séparer le fond de la forme avec HTML et CSS

    J'obtiens ça avec mon code html et mon CSS

    .........Sommaire :
    .............Standards XHTML et CSS : quelle différence ?
    ..................Le W3C et les standards du Web
    ..................Séparer le fond de la forme avec HTML et CSS

    Je souhaite aligner sur la gauche sans marge mais quand je mets padding-left:0px, c'est toute la liste qui est alignée à gauche et il n'y a plus de décalage lié aux puces.

    Merci de votre aide

  2. #2
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bonjour,

    pouvez-vous poster votre code HTML et CSS.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  3. #3
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    octobre 2006
    Messages
    8 809
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 8 809
    Points : 4 275
    Points
    4 275
    Billets dans le blog
    1
    Par défaut
    Comme le dit Rodolphebrd, ça serait plus facile avec du code, mais essaye quand-même de remplacer padding-left par margin-left
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  4. #4
    Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2013
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Bonjour,
    Je viens d'essayer avec margin left mais ça ne fonctionne pas.

    Voici le code html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul>
    	<li>Sommaire</li>
    	<ul>
    		<li>Standards XHTML et CSS : quelle différence ?</li>
    		<ul>
    			<li> Le W3C et les standards du Web </li>
    			<li>Séparer le fond de la forme avec HTML et CSS</li>
    		</ul>
    	</ul>
    </ul>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    ul{list-style-type: none; padding-left: 0px;}
    h3{font-weight: normal;}

  5. #5
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 335
    Points : 8 097
    Points
    8 097
    Par défaut
    Pourquoi ne pas sortir le texte "Sommaire" de la liste tout simplement ?
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  6. #6
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    N'hésitez pas à consulter les cours CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul:first-child{
       padding-left: 0px;
    }
    http://codepen.io/anon/pen/nEsow
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 420
    Points
    91 420
    Billets dans le blog
    20
    Par défaut
    Ni les cours HTML... histoire de créer des listes imbriquées correctes !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2013
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Merci pour vos réponses. Dur d'être débutant .

    Par contre ça ne marche toujours pas avec la balise first-child.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul:first-child{
       padding-left: 0px;
    }
    ça ne change rien à la mise en page.

    Et pourquoi ne pas le retirer de la liste ?
    Car après il y a un espace d'une ligne entre le sommaire et la liste et je souhaite que ça soit collé.

  9. #9
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Bovino : oeil de lynx.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <ul class="pad">
      <li>Sommaire
        <ul>
          <li>Standards XHTML et CSS : quelle différence ? 
            <ul>
              <li> Le W3C et les standards du Web          </li>
              <li>Séparer le fond de la forme avec HTML et CSS</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .pad{
      padding-left: 0px;
    }
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  10. #10
    Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2013
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Merci ça marche !
    C'est qui le bovin ? C'est moi !?

    Je ne connaissais pas cet outil c'est pratique.

    Pour gérer le décalage entre les éléments de cette liste il faut faire de la même manière en mettant une classe dans la balise html concernée c'est ça ?

  11. #11
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Citation Envoyé par ciol007 Voir le message
    C'est qui le bovin ? C'est moi !?

    Il suffit d'ouvrir les yeux...
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  12. #12
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    octobre 2006
    Messages
    8 809
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 8 809
    Points : 4 275
    Points
    4 275
    Billets dans le blog
    1
    Par défaut
    Pour gérer le décalage entre les éléments de cette liste il faut faire de la même manière en mettant une classe dans la balise html concernée c'est ça ?
    Oui, c'est bien ça, afin de n'appliquer le CSS qu'à la première liste.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  13. #13
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    POur cibler les éléments il y a ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ul{
      list-style-type: none; 
    }
    ul:not(:only-child){
      padding-left: 0px;
      color:green;
    }
     
    ul ul {
      color:red;
    }
    ul ul ul{
      color:blue;
    }
    http://codepen.io/anon/pen/Jbhjs
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  14. #14
    Candidat au Club
    Homme Profil pro
    Inscrit en
    novembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : novembre 2013
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    lol ah oui j'avais pas vu bovino ..

    Merci en tous cas !

  15. #15
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    octobre 2006
    Messages
    8 809
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 8 809
    Points : 4 275
    Points
    4 275
    Billets dans le blog
    1
    Par défaut
    Tel quel, le codepen ne fonctionne pas (si on clique la couleur ne change pas), mais j'ai la flemme chercher un CSS correct...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  16. #16
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Codepen corrigé
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Aligner des listes à puce à gauche et à droite
    Par Jolt0x dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 05/02/2014, 15h10
  2. Alignement gauche droit dans liste <li>
    Par roduce dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 20/06/2009, 23h21
  3. [HTML][CSS] Alignement gauche ET droite dans un <li>
    Par gwendy dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/11/2005, 19h27
  4. Aligner à gauche et à droite dans un paragraphe
    Par camboui dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 02/11/2005, 10h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo