positionnement dans la page web avec css

Version imprimable

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:

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:

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>

20/04/2009, 15h21
devyan

Citation:

Envoyé par paolo129

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 ?
20/04/2009, 15h58
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.
20/04/2009, 18h35
paolo129
je pense avoir trouvé la solution car j'ai réussi à mieux le positionner au centre.
En fait cest en supprimant ceci
Code:

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 ?
20/04/2009, 18h46
car0line

salut,
en modifiant la valeur de ton background dans #menu, c'est la couleur du fond.
21/04/2009, 09h59
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
21/04/2009, 11h59
desert
Bonjour,
C'est sur la couleur de fond des liens qu'il faut agir. Par exemple, pour un fond rouge :
Code:

1 2 3 #menu div a:link, #menu div a:visited { background: #F00; }
21/04/2009, 15h11
paolo129

:yaisse2:

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