Discussion :

[paolo129]

Bonjour et bon debut de semaine à tous,

J'ai un problème avec le positionnement de ma page web quant je lui affecte le code css de mon menu vertical.

la page étant centré par défaut, quant je met le code css, il se positionne à gauche. Mais quand j'enlève le code du lien css il revient au centre de la page.

Voilà le code css du menu

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
*{
	margin:0;
	padding:0;
}
#menu{
	margin:20px 0 0 50px;
	background:#0f0;
	color:#fff;
	float:none;
	display:inline;
}
#menu div{
	width:120px;
	text-align:center;
}
.menu{
	position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
	padding-top:3px;
	height:22px;
	display:block;
}
#menu div a:link, #menu div a:visited{
	background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
	background:#ca0003;
}
.sousmenu{
	position:absolute;
	left:120px;
	top:0;
}

et le code html

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
<div id="menu">
        <div class="menu" id="menu1" onmouseover="affiche(this)">
          <a href="#">Menu 1</a>
          <div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
            <div><a href="#">SousMenu 1.1</a></div>
		    <div><a href="#">SousMenu 1.2</a></div>
		    <div><a href="#">SousMenu 1.3</a></div>
		  </div>
    </div>
	  <div class="menu" id="menu2" onmouseover="affiche(this)">
	    <div align="right"><a href="#">Menu 2</a>		  </div>
		  <div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
		    <div><a href="#">SousMenu 2.1</a></div>
		    <div><a href="#">SousMenu 2.2</a></div>
		    <div><a href="#">SousMenu 2.3</a></div>
		  </div>
	  </div>
	  <div class="menu" id="menu3" onmouseover="affiche(this)"><a href="#">Menu 3</a></div>
	  <div class="menu" id="menu4" onmouseover="affiche(this)"><a href="#">Menu 4</a></div>
        </div>

[devyan]

la page étant centré par défaut, quant je met le code css, il se positionne à gauche. Mais quand j'enlève le code du lien css il revient au centre de la page.

Je ne comprends pas bien le symptôme...

Sinon, ton cadre #menu est à priori dans le flux donc sans contexte "externe" je ne sais pas comment nous pourrions t'aider...
afin d'être plus clair : #menu est dans quoi ?

[paolo129]

merci pour la vive réponse

Mais étant débutant et ayant pris le code sur la galerie css de ce meme site (ici), j'ai juste supprimé l'élément #content du code css que j'ai jugé unitil et supprimé également dans le code html les balise div qui vont avec.

je ne serai pas capable de vous dire exactement dans quoi est #menu.

[paolo129]

je pense avoir trouvé la solution car j'ai réussi à mieux le positionner au centre.
En fait cest en supprimant ceci

Code css :

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

1
2
3
4
*{
	margin:0;
	padding:0;
}

que la situation c'est décanté.

Maintenant je voudrai supprimer la couleur noir qui parait en an arrière plan du menu comment je peux le faire pour lui attribuer une autre couleur autre que du noir ou encore rende ça transparent ?

[car0line]

salut,
en modifiant la valeur de ton background dans #menu, c'est la couleur du fond.

[paolo129]

Bonjour,
Quand je change la couleur du background de #menu c'est plutôt l'arrière plan du texte qui change alors que la couleur de #menu div reste inchangé.
vous pouvez observer ce comportement ici.
c'est un tuto de la galerie css que l'on peut également retrouver ici

[desert]

Bonjour,
C'est sur la couleur de fond des liens qu'il faut agir. Par exemple, pour un fond rouge :

Code :

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

1
2
3
#menu div a:link, #menu div a:visited {
    background: #F00;
}

[paolo129]

c'est super,
ça marche très grand merci à tous.