menu verticale css

Version imprimable

menu verticale css

bonjour,
je voulé créer une menu verticale en css (j'ai deja créer des menu en css mais le probleme c'est que sur mozzilla le texte des lien n'est pas mis en forme:
code css:

Code:

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
/*____template____*/
body{margin:0;
     padding:0;}
#container{padding:5px;
           width:945px;
		   margin:0;
		   height:100%;}
 
#banniere{margin:0;
          padding:20;
		  height:150px;
		  border:1px solid red;
		  border-bottom:0;}
 
#navigation{width:20%;
            margin:0;
            padding:0;
            float:left;
            border:1px solid red;}
 
#contenu {margin-left:30%;
          border:1px solid red;
		  }
 
#pied{margin:0;
      padding:5px;
      width:933px;
      height:20px;
      border:1px solid red;
      border-top:0;
	  clear:left;}
 
/*___menu vertical___*/
#menu-v{margin:0;
        padding:0;
		list-style-type:none;}
#menu-v li a{text-decoration:none;
           width:150px;
           height:25px;
           padding:5px;
           display:block;
           background-color:black;
           color:white;
           font:bold 18px;
           border:1px outset white;
           border-bottom:0;
           margin:1px;}
#menu-v li a:hover{text-decoration:underline;
                 color:black;
                 font:bolder;
                 background-color:white;}
#menu-v li a:visited{color:blue;}
#menu-v li a:active{color:red;
                  font:20px;}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 <head>
  <title>TP CSS5 CHANNARK</title>
  <link rel="stylesheet" type="text/css" href="tpcss5.css"/>
 </head>
 <body>
 <div id="container">
  <div id="banniere">Texte du banniere</div>
  <div id="navigation">
   <ul id="menu-v">
    <li><a href="">menu</a></li>
	<li><a href="">menu</a></li>
	<li><a href="">menu</a></li>
	<li><a href="">menu</a></li>
   </ul>
  </div>
  <div id="contenu">texte</div>
  <div id="pied">pied de page</div>
 </div>
 </body>
</html>

merci d'avance

23/01/2011, 05h04
legide
Je pense que le problème provient de cette ligne:
Code:

1 2 #menu-v li a:visited{color:blue;}
si cette effet n'est pas indispensable tu peux l'enlever:cry: just pour avoir un code qui marche sur tous les browsers.

correction

dsl jai fait une erreur j'ai copier le code d'autre page
code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>KITE 3 CSS/XHTML CHANNArK</title>
  <link rel="stylesheet" type="text/css" href="template/css.css"/>
 </head>
 <body>
 <div id="container">
  <div id="header"><h1>titre du site</h1></div>
  <div id="menu-v"></div>
  <div id="menu-h">
   <ul id="menu-hor">
    <li><a href="#7">Accueil</a></li>
	<li><a href="#8">Lien1</a></li>
	<li><a href="#11">Lien2</a></li>
	<li><a href="#9">Lien3</a></li>
   </ul>
  </div>
  <div id="text">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio ligula, vulputate at sagittis ac, condimentum quis quam. Donec quis massa et lorem tempus porta sollicitudin nec metus. Mauris vitae ipsum erat. Cras at dictum felis. Maecenas euismod consequat arcu. Fusce tincidunt aliquam ligula, at cursus odio lacinia sed. Curabitur consectetur accumsan leo, non lacinia odio aliquam in. Nam molestie metus nec enim euismod ultrices. Nulla sed arcu dui, sit amet ultricies ante. Maecenas ut odio mauris.</p>
   <p>Curabitur nec pulvinar orci. Aliquam erat volutpat. Morbi odio eros, malesuada et blandit ac, feugiat a turpis. Integer faucibus cursus velit, sit amet lacinia felis dapibus at. Aliquam ipsum odio, gravida eget congue nec, vulputate at leo. Vestibulum sed turpis libero, ornare congue neque. Integer vitae lacinia neque. Phasellus dapibus elit id sapien posuere in elementum augue mollis. Nullam sagittis laoreet mi quis molestie. Vivamus est magna, ullamcorper ac tempus at, condimentum et nunc. Aenean et ligula nibh, non dignissim lorem. Cras id ante metus, rutrum faucibus orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elit orci, eleifend in venenatis eget, gravida at nulla. Nulla molestie, ante sit amet tempor ornare, justo ligula molestie sem, eget consequat neque lectus eget diam.</p></div>
   <div id="footer"></footer>
 </body>
</html>

code css

Code:

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
body{margin:0;
     padding:0;}
/*___template___*/
#container{margin:0;
           padding:0;
		   width:100%;
		   background:black;}
#header{margin:0;
        padding:0;
		width:100%;
		height:100px;
		border-bottom:3px ridged #BFFFBF;
		background:#9C5611;}
#header h1{margin:0 5px;
          font:italic 300 2em verara, arial;
		  color:white;
		  text-transform:uppercase;
		  text-decoration:underline;}
#menu-h{margin:4px 2px 5px 25%;
        padding:0;
		width:70%;
		height:40px;
		background:#B89572;}
#menu-v{margin:4px 0 10px 2%;
		width:20%;
		float:left;
		min-height:150px;
		background:#B89572;}
#text{width:70%;
      margin:0 2px 0 25%;
	  padding:2px;
	  background:#8C5620;}
#footer{width:70%;
        height:30px;
		padding:5px 2px;
		clear:both;
		margin:10px 2px 1px 25%;
		background:#E3E3E3;}
/*___menu horizental___*/
#menu-hor{list-style-type:none;
          margin:0;
		  padding:0;}
#menu-hor li{float:left;}
#menu-hor li a{width:110px;
             height:30px;
			 padding:3px 2px;
			 margin:0 1px;
			 background:url('/template/button2.gif');
			 font:200 1.1em vardana, arial;
			 color:white;
			 display:block;
			 text-align:center;}

26/01/2011, 16h24
winow

cette ligne me parait bizarre :

Code:

<div id="footer"></footer>

ca serait pas pluto :

Code:

<div id="footer"></div>

Et tu as aussi une balise <div> qui n'est pas fermée avant ton pied de page.
26/01/2011, 20h48
channark

merci j'ai corrigé c'est erreurs mais le premier probleme n'est pas resolus c'est que les image d'arriere plan n'apparé pas
:cry:
26/01/2011, 21h10
winow

il semblerait que ton fichier css soit dans le même dossier que ton image (template)
et que tu appelle l'image a partir du fichier css qui se trouve dans template l'image button2 qui est aussi dans template

Code:

background:url('/template/button2.gif');

je verrai pluto

Code:

background:url(dossier ou est button2/button2.gif);

A+
28/01/2011, 00h16
channark

merciiiiiiiiiii c'est une erreur d'inatention :roll: merci beaucoup :)