comment créer un menu avec sous thème à l'intérieur ?

**razily** · 06/03/2012, 17h54

Bonjour à tous ;

voilà , j'essai de trouver l'art ou la manière de faire pour réaliser ce genre de menu http://fr.sports.yahoo.com/05032012/...mars-2012.html
Le fond j'aime bien

j'imagine C une image sous photoshop ou gimp fera l'affaire après mettre en fond , mais après les bordures entre les liens .

Autre point important que je souhaite apprendre C comment faire pour apparaître des sous thèmes comme sur ce site !!
j'ai besoin de réaliser un menu similaire à ceci !!

j'ai essayé de regarder le code css mais apparemment yahoo utilisait je ne sais pas des frameworks car y a des widgets etc ...

un truc simple permettant de réaliser un menu similaire merci

merci !!

**NoSmoking** · 06/03/2012, 18h16

Bonjour,
au CSS prêt tu as un menu ressemblant dans http://css.developpez.com/galerie/de...talderoulant3/

**razily** · 06/03/2012, 20h26

Envoyé par NoSmoking

Bonjour,
au CSS prêt tu as un menu ressemblant dans http://css.developpez.com/galerie/de...talderoulant3/

merci

s'il vous plaît j'ai besoin d'aide : en fait mon problème c'est de séparer mes listes visuellement i-e arriver à mettre une bordure entre une image de fond sur un menu :

voici le code et remarquez l'image

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>essai fond</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="dolphincontainer">
	
		<ul>
			<li><a href="#1" title="css menus"><span>Home</span></a></li>
			<li><a href="#2" title="css menus" class="current"><span>About Us</span></a></li>
			<li><a href="#3" title="css menus"><span>Services</span></a></li>
			<li><a href="#4" title="css menus"><span>Our Work</span></a></li>
			<li><a href="#5" title="css menus"><span>Contact Us</span></a></li>
		</ul>
	
</div>
</body>
</html>

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
#dolphincontainer{
    
   
   
}

ul {
   background-image: url(blue.png);
    
   margin: 0;
   padding: 0;
    background-repeat: no-repeat;
  
   
}

li {
    
  list-style-type: none;
  display: inline;
  
  
   
   
 
    
}

ul li a{
  
      margin: 2px;
      padding: 10px ;
       
        text-decoration: none;
        
    
    
    
   
    width: 20px;
   
}


span {
    
    
     
    font-family: 'Times New Roman',Times,serif;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    color: black;
    text-decoration: none;   
    
}

l'image :

http://www.casimages.com/img.php?i=1...1719290397.jpg

remarquez qu'il n'y a aucune ligne de séparation j'ai tenté de mettre une bordure à gauche mais çà dépasse

maintenant en essayant de mettre un image de fond aussi sur

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

ul {
   background-image: url(blue.png);
    
   margin: 0;
   padding: 0;
    background-repeat: no-repeat;
  
   
}

li {
    
  list-style-type: none;
  display: inline;
  
  
   
   
    background-image: url(blue.png);
    
}

l'image :

http://www.casimages.com/img.php?i=1...2036570670.jpg

mais y a une séprataion mais y a un bout de blanc qui cole avec !!
donc je me demande comment dans certains menus des sites il arrivent à mettre une image comme fond avec des bordures je ne sais pas si ce ne sont des images merci pour l'aide

**razily** · 11/03/2012, 09h37

Envoyé par NoSmoking

Bonjour,
au CSS prêt tu as un menu ressemblant dans http://css.developpez.com/galerie/de...talderoulant3/

bonjour

dites ,quel est vraiment l'utilité de &nbsp ???

merci

**NoSmoking** · 11/03/2012, 15h55

en fait mon problème c'est de séparer mes listes visuellement i-e arriver à mettre une bordure entre une image de fond sur un menu :

tu n'as que l'embarras du choix, padding margin, ajout d'un élément vide et autre border pour le cadre, sans oublier la

.

dites ,quel est vraiment l'utilité de &nbsp ???

c'est un espace insécable, un exemple pour voir

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Espace insécable]</title>
<style type="text/css">
body{
  font-family:"courier new";
  font-size : 1em;
}
span{
  background-color: #e0e0e0;
}
</style>
</head>
<body>
pas de différence entre
<br>| Texte avec espace naturel |
<br>|&nbsp;Texte avec espace insécable&nbsp;|
<br>sauf dans ce cas
<br><span> |Texte avec espace naturel </span>
<br><span>&nbsp;|Texte avec espace insécable&nbsp;</span>
</body>
</html>

**razily** · 26/03/2012, 11h47

Merci 1000 fois , je suis revenu sur vos codes et au départ je suis un peu perdu car je ne savais pas comment récupérer le fichier js mais au final ce code marche correctement et constitue une aide précieuse !!

encore une fois 1000 merci d'avoir pris le temps , de rédiger le code

comment créer un menu avec sous thème à l'intérieur ?

Discussions similaires

Partager

Partager