supprimer l'espace du à une liste

**laurentSc** · 05/10/2013, 22h35

Bonsoir,

j'effectue une mise en page à base de listes (plus propre que des tables). Mais l'usage des listes induit l'apparition d'un espace tout à gauche ; y a-t-il moyen de l'éliminer ?

Code actuel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>test</title>
    <style type="text/css">
#navigation { width:777px; font-family:Arial, Helvetica, sans-serif;}
#navigation .menu { float:left; width:33%;margin:0; padding:0; background-color:red;margin-right:2px;}
 
#navigation ul li { list-style:none; }
.title {
background-color:#4FA600; 
color:white;
width:100%;
display:inline-block;
text-align:center;
  font-weight:bold;
}
 
a:link:hover {color:#000000;} 
 
</style> 
</head>
  <body>
    <div id="navigation">
      <ul>
        <li><span class="title">Site Map</span></li>
        <li>
          <ul class="menu">
            <li><span ><a href="#">Liste1</a></span></li>
 
          </ul>
          <ul class="menu">
            <li><span ><a href="#">Liste2</a></span></li>
 
          </ul>
          <ul class="menu">
            <li><span ><a href="#">Liste 3</a></span></li>
 
          </ul>
 
        </li>
      </ul>
    </div>
  </body>
</html>

**winow** · 05/10/2013, 23h11

bonsoir
il faut enlever ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-right:2px;

Invité · 05/10/2013, 23h43

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#navigation .menu {
    background-color: #FF0000;
    float: left;
    margin: 0; /* modifié */
    padding: 0;
    width: 33.33%; /* modifié */
}

100 / 3 = 33.33333 => 33.33%

**laurentSc** · 06/10/2013, 17h43

Bonjour,

je viens de faire les 2 modifs (pas dispo avant).

D'abord, 33.3 car avec 33.33, la 3e colonne disparaît (comprends pas pourquoi), et l'espace, lui, ne disparaît pas

**rodolphebrd** · 06/10/2013, 22h13

Bonjour,

pour le code HTML je verrais cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="navigation">
  <ul>
    <li><span class="title">Site Map</span>
      <ul class="menu">
        <li><a href="#">Liste 1</a></li>
        <li><a href="#">Liste 2</a></li>
        <li><a href="#">Liste 3</a></li>
      </ul>
    </li>
  </ul>
</div>

Pour supprimer l'espace à gauche il faut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ul { padding: 0; }

Ce qui donnerais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
ul {
	padding: 0;
}
#navigation {
	width: 777px;
	font-family: Arial, Helvetica, sans-serif;
}
#navigation .menu li {
        float: left;
	width: 33%;
	margin: 0;
	padding: 0;
	background-color: red;
	margin-right: 2px;
}
#navigation ul li {
	list-style: none;
}
.title {
	display: block;
	background-color: #4FA600;
	color: white;
	width: 100%;
	text-align: center;
	font-weight: bold;
}
a:link:hover {
	color: #000000;
}

http://codepen.io/anon/pen/FsHcw

**laurentSc** · 07/10/2013, 00h04

Ca tombe très bien car je viens de me doter d'un 2e PC et Codepen marche dessus alors que pas sur l'autre. Ca a l'air de bien répondre, mais je ne regarderai vraiment que demain, et si ça convient,

supprimer l'espace du à une liste

CSS

Vue hybride

Discussions similaires

Partager

Partager