centrer une liste

17 janvier 2018 à 18:17:14

Bonsoir,

pour mon site (taroxxx.github.io) j'ai créé une navbar mon seul soucis est que que n'arrive pas a la centrer :/

voila mon code html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles/style.css">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <link href="images/favicon.ico" rel="shortcut icon" type="image/ico" >
        <meta charset="UTF-8">
        <title>Tarox Art</title>
    </head>
    <body>
            <ul>
                <li><a id="lien" title="My draw" href="https://taroxxx.github.io/draw">Draw</a></li>
                <li><a id="lien" href="#">Experiment</a></li>
                <li><a id="lien" href="#">Inking</a></li>
            </ul>
            <a title="My Instagram" href="https://www.instagram.com/tarox.art/" target="_blank" ><img class="logoinsta" src="images/instalogo.png" alt="..."/></a> 
            <p title="add me on Instagram :)" class="cursordefault" style="font-size: 75px">@tarox.art</p>
            <a style="float:left; text-decoration : none" class="cacher" href="https://taroxxx.github.io/woody">√</a> 
    </body>
</html>

ainsi que mon code css:

ul {
    padding:0;
    margin:0;
    list-style-type:none;	
    }
   li {
    margin-left:2px;
    float:left; /*pour IE*/
    }
   ul li a {
    display:block;
    float:left;   
    width:100px;
    background-color:rgb(255, 255, 255);
    color:rgb(0, 0, 0);
    text-decoration:none;
    text-align:center;
    padding:5px;
    border:2px solid;
    border-color:#DCDCDC #ffffff00 #ffffff00 rgba(255, 255, 255, 0);
    }
   ul li a:hover {
    background-color:rgb(255, 255, 255);
    border-color:#000000 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #ffffff00;
    }

je ne vous donne pas l’entierter de mon code HTML je n'en voit pas l’utiliter

-
Edité par Tarox 17 janvier 2018 à 18:23:35

Flosteo

17 janvier 2018 à 18:26:50

Hello!

Ton bonheur se trouve ici normalement.

www.florentretif-osteopathe.fr

Tarox

17 janvier 2018 à 19:00:02

j'ai essayer mais maintenant ma liste n'est plus horizontal

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles/style.css">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <link href="images/favicon.ico" rel="shortcut icon" type="image/ico" >
        <meta charset="UTF-8">
        <title>Tarox Art</title>
    </head>
    <body>
    <div>
        <ul>
            <div id="conteneur"><li><a id="lien" title="My draw" href="https://taroxxx.github.io/draw">Draw</a></li></div>
            <div id="conteneur"><li><a id="lien" href="#">Experiment</a></li></div>
            <div id="conteneur"><li><a id="lien" href="#">Inking</a></li></div>
        </ul>
    </div>
        <a title="My Instagram" href="https://www.instagram.com/tarox.art/" target="_blank" ><img class="logoinsta" src="images/instalogo.png" alt="..."/></a> 
        <p title="add me on Instagram :)" class="cursordefault" style="font-size: 75px">@tarox.art</p>
        <a style="float:left; text-decoration : none" class="cacher" href="https://taroxxx.github.io/woody">√</a> 
    </body>
</html>

ul li a {
    float:left;   
    width:100px;
    background-color:rgb(255, 255, 255);
    color:rgb(0, 0, 0);
    text-decoration:none;
    text-align:center;
    padding:5px;
    border:2px solid;
    border-color:#DCDCDC #ffffff #ffffff rgb(255, 255, 255);
}
ul li a:hover {
    background-color:rgb(255, 255, 255);
    border-color:#000000 rgb(255, 255, 255) rgb(255, 255, 255) #ffffff;
}

#conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
}

Offkors

17 janvier 2018 à 19:55:07

Salut,

Change juste ta ligne de css :

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

par ça :

ul {
    padding: 0;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table;
}

A+ !

-
Edité par Offkors 17 janvier 2018 à 19:58:21

Tarox

18 janvier 2018 à 7:11:30

Offkors a écrit:

Salut,

Change juste ta ligne de css :
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
par ça :
ul {
    padding: 0;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table;
}
non sa ne marche pas ma liste est toujours vertical D:

Lamecarlate

18 janvier 2018 à 7:26:55

Bonjour,

enlève les div autour des li de ta liste, ton premier HTML était très bien.

Ce pourquoi tu n'arrives pas à centrer c'est parce que tes li sont en float: left. Un display: flex sur le ul, par contre, ça devrait aider. Cependant : tu auras sûrement d'autres listes sur ton site, ne style pas ul directement, donne-lui une classe, comme "menu".

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Offkors

18 janvier 2018 à 9:41:41

Tarox a écrit:

Offkors a écrit:
Salut,

Change juste ta ligne de css :
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
par ça :
ul {
    padding: 0;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table;
}
non sa ne marche pas ma liste est toujours vertical D:

Lorsque je vais sur l'url de ton site (la navbar y est horizontale)et que je fais la modif directement dans ma console avec le CSS que je t'ai donné ça fonctionne parfaitement. En revanche comme le dit Lamecarlate tu devrais ajouter une classe sur tes listes afin de ne pas être embêter par la suite.

A+

-
Edité par Offkors 18 janvier 2018 à 9:43:05

Tarox

18 janvier 2018 à 18:04:41

Offkors a écrit:

Tarox a écrit:
Offkors a écrit:
Salut,

Change juste ta ligne de css :
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
par ça :
ul {
    padding: 0;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    display: table;
}
non sa ne marche pas ma liste est toujours vertical D:
Lorsque je vais sur l'url de ton site (la navbar y est horizontale)et que je fais la modif directement dans ma console avec le CSS que je t'ai donné ça fonctionne parfaitement. En revanche comme le dit Lamecarlate tu devrais ajouter une classe sur tes listes afin de ne pas être embêter par la suite.

A+

-
Edité par Offkors il y a environ 8 heures

alors oui effectivement sur mon site elle est horizontal mais elle est sur la gauche :/ non ?

le soucis c'est que soit elle est horizontal mais sur la gauche soit centrer mais pas horizontal :/

EDIT: j'ai voulus classer mon css pour qu'il soit plus lisible j'ai créé un nouveau fichier css j'ai mis mon css de navbar dedans et... suspens... sa MARCHE

-
Edité par Tarox 18 janvier 2018 à 18:28:08