menu verticale css

**channark** · 17/01/2011, 22h33

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 :

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
/*____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 :

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
<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

**legide** · 23/01/2011, 05h04

Je pense que le problème provient de cette ligne:

Code :

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

1
2
 
#menu-v li a:visited{color:blue;}

si cette effet n'est pas indispensable tu peux l'enlever

just pour avoir un code qui marche sur tous les browsers.

**channark** · 26/01/2011, 16h01

dsl jai fait une erreur j'ai copier le code d'autre page
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
<!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 :

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
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;}

**winow** · 26/01/2011, 16h24

cette ligne me parait bizarre :

Code :

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

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

ca serait pas pluto :

Code :

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

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

Et tu as aussi une balise <div> qui n'est pas fermée avant ton pied de page.

**channark** · 26/01/2011, 20h48

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

**winow** · 26/01/2011, 21h10

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 :

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

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

je verrai pluto

Code :

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

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

A+

**channark** · 28/01/2011, 00h16

merciiiiiiiiiii c'est une erreur d'inatention

merci beaucoup

menu verticale css

CSS

Discussions similaires

Partager

Partager