Problème avec les grille css

Par Mimisuitou, il y a 12 ans

Les bases HTML/CSS

Bonjour à tous

Voilà mon petit problème, j'essaye de m’entraîner avec les grille css, et j'avoue que c'est beaucoup plus simple de commencer par ça !

Mon souci c'est avec mes ul et li je n'arrive pas à faire un style dessus, j'aimerais enlever les liste a puce et faire en sorte qu'elles soient pas en dessous des autre mais l'une a coté de l'autre. Pas moyen de savoir ou ça bug ...

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test site</title>
<link rel="stylesheet" href="grille.css">
<link rel="stylesheet" href="style.css">

</head>

<body>
<div class="container_12">
<div class="grid_3">
<h1>Logo du site </h1>
</div>
<div class="grid_9 contenu">
<ul>
<li>Acceuil</li>
<li>Acceuil</li>
<li>Acceuil</li>
<li>Acceuil</li>

</ul>
</div>

</div>
</body>
</html>

Voilà pour le code HTML et pour enlever les puce et mettre a droite les li dans mon CSS j'ai ça

.contenu ul li{
list-style:none;
float:left;
padding:0;
}
Suis-je dans la bonne voie ?

7 réponses

Mimisuitou, il y a 12 ans

pour le Screen shot j'ai pas d'exemple car je fais sans image je vais essayer de de le faire comme ça

en faite avec les grilles le design et plus structure avec les grille css que j ai eux avec le tuto ici ...

par exemple je veux mon logo ... puis a coté je veux le menu menu qui prend 3 colonnes et menu 9 ...

donc sa fait

LOGO Acceuil - truc - machin -...

j'aimerais que mes liste soit sans point et les aligner sur la gauche

xander, il y a 12 ans

essaye sa :

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test site</title>
<link rel="stylesheet" href="grille.css">
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="container_12">
<div class="grid_3">
<h1>Logo du site </h1>
</div>
<div class="grid_9 contenu">
<ul>
<li>Acceuil</li>
<li>Acceuil</li>
<li>Acceuil</li>
<li>Acceuil</li>
</ul>
</div>
<div class="cb"></div>

</div>
</body>
</html>

et dans ton css ajoute 

.cb{
    clear: both;
}

pour revenir dans le flux comme un float sort ton contenue du flux

xander, il y a 12 ans

et ajoute aussi

.contenu ul li{
list-style:none;
float:left;
padding:0;
display: inline-block;
}
Mimisuitou, il y a 12 ans

je viens d'essayer de rajouter mais ça ne marche pas :/

xander, il y a 12 ans

bisar sa t'aurais pas un screen pour avoir un aperçus de se que sa donne et de se que tu veut ?

xander, il y a 12 ans

tu peut me passe ton grille.css pour que je puisse t'aider directement sur la même base ?

Morgan, il y a 12 ans

Pour avoir une liste sans puce il faut mettre

ul{
    list-style: none; 
}

Et pour que tes liens soient alignés sur la gauche 

li{
    float: left;
}

Avec ça et les solutions précédentes ton menu devrait s'afficher comme tu le souhaite