modifier l'aspect d'une liste de liens

**lavazavio** · 15/03/2007, 18h40

Bonjour,

Je me lance dans la conception d'un site perso (manziaki.free.fr)et j'ai quelques questions techniques :

Dans mon menu, j'ai des puces et les liens sont soulignés.
-J'aimerais enlever les puces en gardant la meme architecture et enlever le trait souligné.
-J'aimerais aussi savoir comment faire pour faire en sorte que lorsque on passe le pointeur sur un lien, celui-ci change de couleur ? J'ai reussi a mettre un voile par dessus le lien mais ce n'est pas ce que je cherche.

Merci beaucoup

Mon CODE HTML

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="manziaki, manziat, manziaty, manziatis, copains, album photos, forum, amis" />
<meta name="DC.title" content="Site d'une bande de copains de manziat" />
<title>Manziaki_accueil</title>
<link href="css_accueil.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style1 {font-family: "Snap ITC"}
-->
</style>
</head>
 
<body>
<!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
<!-- photo de la banniere -->
 
		<div id="photobanniere">		</div>
 
       <!-- Les menus -->
 
       <div id="menu">       
           <div class="element_menu">
               <h3 class="Style1"><img src="css/livre.png" /> Menu</h3>
               <ul>
                   <li><a href="index.html" title="Retournez à la page d'accueil">Accueil</a></li>
                   <li><a href="newz/index.html" title="Tenez-vous au courant des dernières maj">Newz</a></li>
                   <li><a href="albumphoto/index.html" title="Voir les différents albums photos">Album photos</a></li>
				   <li><a href="albumvideo/index.html" title="Voir les différentes vidéos">Album videos</a></li>
				   <li><a href="http://forumlaz.xooit.fr/index.php" target="_blank" title="faire un tour sur le forum">Forum</a></li>
               </ul>
         </div>
 
 
       </div>
 
	   <!-- L image de cote, largeur -->
 
		<div id="largeur">		</div>
 
 
	       <!-- Le corps -->
 
<div id="corps">
           <h1 class="Style1">Bienvenue ! </h1>
 
<p>Bienvenue sur mon  site !</p>
<p>Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site.</p>
<p>Non, en fait, il va surtout y avoir des photos de tout le monde, et m&ecirc;me quelques videos, c'est fou. </p>
           <h2>A qui s'adresse ce site ?</h2>   
<p>A tout le monde ! Enfin, du moins, &agrave; tous les gens qui ont acc&egrave;s &agrave; internet, parce que sans, c'est bien moins facile.
  </p>
<p>Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si ! </p>
<h2>Le menu </h2>   
           <p>Le site comporte diff&eacute;rentes parties telles que des newz, un forum, un album vid&eacute;os et la plus grosse je pense, l'album photos.         </p>
</div>
 
       <!-- Le pied de page -->
 
<div id="pied_de_page">
 
		   <script type="text/javascript" src="http://www.ovnet.net/cpt/?code=5/35/7094/4/1&ID=414676462"></script>
		   <br />
           <p>Copyright Lavazavio 2007, tous droits réservés  <a href="mailto:manziaki@free.fr">Contact</a></p>
</div>
 
</body>
</html>

MON CSS

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
body
{
   width: 1002px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url(css/fond.gif);
}
 
/* L'en-tête */
 
#en_tete
{
   width: 1000px;
   height: 100px;
   background-image: url(css/banniere.png);
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#photobanniere
{
	position: absolute;
	background-image: url(css/photobanniere.png);
	width: 178px;
	height: 100px;
	left: 803px;
	top: 144px;
 
}
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-repeat: repeat-x;
 
   border: 1px solid black;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3 /* Titre du menu */
{   
   color: #000000;
   font-family: "Snap ITC";
   text-align: center;
}
 
.element_menu ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a /* les liens du menu */
{
   color: #0000FF;
   font-family: "Tahoma";
   font-size:small;
}
 
.element_menu a:hover
{
   background-color: #FFFFA6;
   color: black;
}
 
/* L image de largeur */
 
#largeur
{
	position: absolute;
	width: 120px;
	height: 250px;
	background-image: url(css/largeur.png);
	float:left;
	left: 10px;
	top: 300px;
 
}	
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #000000;
   background-color: #FFFFFF;
   background-repeat: repeat-x;
 
   border: 1px solid black;
}
 
#corps h1
{
   color: #000000;
   text-align: center;
   font-family: "Snap ITC";
   }
 
#corps h2
{
   height: 30px;
 
   background-repeat: no-repeat;
   font-family: "Snap ITC";
 
   padding-left: 40px;
   color: #000000;
   text-align: left;
}
 
#corps p
{
	text-indent: 20px;
	font-family: "Tahoma";
	font-size: 13px;	
}
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #B6B6B6;
   background-repeat: repeat-x;
}

**LeXo** · 15/03/2007, 23h03

Code :

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

1
2
3
a {
border : none;
}

pour enlever le soulignement des liens

**alexp** · 16/03/2007, 02h24

si tu veux enlever la decoration des listes pour ton menu, rajoute cet attribut à la classe .element_menu ul :

Code :

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

list-style: none;

ce qui te donnera la feuille de style complete :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
body
{
   width: 1002px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url(css/fond.gif);
}
 
/* L'en-tête */
 
#en_tete
{
   width: 1000px;
   height: 100px;
   background-image: url(css/banniere.png);
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#photobanniere
{
	position: absolute;
	background-image: url(css/photobanniere.png);
	width: 178px;
	height: 100px;
	left: 803px;
	top: 144px;
	
}
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-repeat: repeat-x;
   
   border: 1px solid black;
   
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3 /* Titre du menu */
{   
   color: #000000;
   font-family: "Snap ITC";
   text-align: center;
}
 
.element_menu ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
 list-style: none;
}
 
.element_menu a /* les liens du menu */
{
   color: #0000FF;
   font-family: "Tahoma";
   font-size:small;
}
 
.element_menu a:hover
{
   background-color: #FFFFA6;
   color: black;
}
 
/* L image de largeur */
 
#largeur
{
	position: absolute;
	width: 120px;
	height: 250px;
	background-image: url(css/largeur.png);
	float:left;
	left: 10px;
	top: 300px;
   
}	
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: #000000;
   background-color: #FFFFFF;
   background-repeat: repeat-x;
   
   border: 1px solid black;
}
 
#corps h1
{
   color: #000000;
   text-align: center;
   font-family: "Snap ITC";
   }
 
#corps h2
{
   height: 30px;
 
   background-repeat: no-repeat;
   font-family: "Snap ITC";
   
   padding-left: 40px;
   color: #000000;
   text-align: left;
}
 
#corps p
{
	text-indent: 20px;
	font-family: "Tahoma";
	font-size: 13px;	
}
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #B6B6B6;
   background-repeat: repeat-x;
}

**Bisûnûrs** · 16/03/2007, 07h45

Supprimer les puces :

Code :

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

1
2
3
li{
   list-style:none;
}

Supprimer le soulignement et changer la couleur sur le hover :

Code :

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

1
2
3
4
5
6
li a{
   text-decoration:none;
}
li a:hover{
   color:#f09;
}

**LeXo** · 16/03/2007, 12h10

ah oui je croyais que ct

Code :

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

list-style-type : maPuce

et prkoi ça lui met une puce par défaut ?

**lavazavio** · 16/03/2007, 12h12

C'est réglé, merci beaucoup !

modifier l'aspect d'une liste de liens

CSS

Discussions similaires

Partager

Partager