Menu horizontal

**Marco85** · 30/10/2006, 09h11

Bonjour à tous,

Je tiens à préciser que je débute dans le monde du développement Web et je m'excuse par avance des "questions simples" que je pourrais poser.

Je souhaite faire un menu horizontal où certains éléments seraient placés à partir de la gauche et d'autres à partir de la droite. J'ai donc réussi à obtenir un menu approchant à ce que je souhaite.

Code XHTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon menu</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Default" href="rollover_navbar.css" />
   </head>
 
   <body>
 
        <div id="navcontainer">
            <ul id="navlist">
                <li class="speedbar_content_left"><a href="#" id="current"><span id="active">Item one</span></a></li>
                <li class="speedbar_content_left"><a href="#">Accueil</a></li>
                <li class="speedbar_content_left"><a href="#">Présentation</a></li>
                <li class="speedbar_content_left"><a href="#">Expositions</a></li>
                <li class="speedbar_content_left"><a href="#">Modèles</a></li>
                <li class="speedbar_content_right"><a href="#">Contact</a></li>
            </ul>
        </div>
 
   </body>
</html>

Code CSS :

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
#navlist
{
    padding-left: 0;
    margin-left: 0;
    background-color: #036;
    color: White;
    float: left;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
}
 
#navlist li
{
    display: inline;
}
 
.speedbar_content_left
{
    float: left;
}
 
.speedbar_content_right
{
    float: right;
}
 
#navlist li a
{
    padding: 0.2em 1em;
    background-color: #036;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid White;
}
 
#navlist li a:hover
{
    background-color: #369;
}

Comme vous pouvez le constater si vous regarder ce qui s'affiche, l'élément Contact n'a pas de barre de délimitation à gauche. C'est assez fâcheux. Je souhaiterais donc que l'emplacement de la barre de délimitation soit déterminé en fonction de la class à laquelle appartient l'élément. Si c'est speedbar_content_left qu'elle soit placée à droite et si c'est speedbar_content_right qu'elle soit placée à gauche.

J'ai déjà fait plusieurs tentatives qui se soldent par des échecs cuisants. Merci d'avance de votre aide.

Marco85

**Joe-La-Boule** · 30/10/2006, 09h15

En utilisant des class ou id et en leur appliquant des float left

**Marco85** · 30/10/2006, 09h20

Envoyé par antony59370

En utilisant des class ou id et en leur appliquant des float left

Merci de ta réponse antony59370.

Je ne comprends pas dans quelle mesure ajouter des class ou des id m'aidera parce que j'en ai déjà : navcontainer, navlist, speedbar_content_left et speedbar_content_right. Est-ce que tu peux expliquer un peu plus ta réponse s'il te plaît ?

Merci encore,

Marco85

**Joe-La-Boule** · 30/10/2006, 09h29

J'avais pas bien vu desolé

!
Dans ton html tu met : style="border-left 1px solid;" dans la balise de ton <li class="speedbar_content_right">

!

**Marco85** · 30/10/2006, 09h37

Envoyé par antony59370

J'avais pas bien vu desolé

!
Dans ton html tu met : style="border-left 1px solid;" dans la balise de ton <li class="speedbar_content_right">

!

Merci pour cette indication. En fait, je l'ai même mis dans le CSS, c'est mieux non ?

Merci encore, ça fonctionne super bien !!!

Marco85

**Joe-La-Boule** · 30/10/2006, 09h41

Je suis heureux d'avoir pu t'aider et nous sommes la pour ca

!

**trotters213** · 30/10/2006, 09h52

Juste à titre d'info, plutôt que de faire ceci qui est lourd :

Code HTML :

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

1
2
3
4
5
6
7
8
<ul id="navlist">
  <li class="speedbar_content_left"><a href="#" id="current"><span id="active">Item one</span></a></li>
  <li class="speedbar_content_left"><a href="#">Accueil</a></li>
  <li class="speedbar_content_left"><a href="#">Présentation</a></li>
  <li class="speedbar_content_left"><a href="#">Expositions</a></li>
  <li class="speedbar_content_left"><a href="#">Modèles</a></li>
  <li class="speedbar_content_right"><a href="#">Contact</a></li>
</ul>

Tu peux faire ceci :

Code HTML :

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

1
2
3
4
5
6
7
8
<ul id="navlist">
  <li><a href="#" id="current">Item one</a></li>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Présentation</a></li>
  <li><a href="#">Expositions</a></li>
  <li><a href="#">Modèles</a></li>
  <li class="dernier"><a href="#">Contact</a></li>
</ul>

(j'ai viré ton span car il ne sert à rien étant donné que tu as déjà un id sur la balise a) et dans ton CSS tu fais

Code CSS :

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

1
2
#navlist li {...}
#navlist .dernier {...}

**Marco85** · 30/10/2006, 09h57

Salut trotters213,

Merci beaucoup pour ces simplifications et cette aide. Pour le span, je l'ai laissé dans le code par oubli ...

Merci encore,

Marco85

**trotters213** · 30/10/2006, 09h58

pense à cliquer sur

(si c'est résolu bien sur)

Menu horizontal

CSS

Vue hybride

Discussions similaires

Partager

Partager