bonjour
j'essay de créé un tempate CSS
j'utilise le pourcentage pour la largeur;
j'ai essayé dabor de mettre une image de background pour le header (repeat-x) mais ca pas marché; puis j'ai essayé je mettre une image d'arrierplan pour les bouttons du menu horizentale mais ca ne marche pas:
le 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>
Menu 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:link{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;}