28172 sujets

CSS et mise en forme, CSS3

Salut à tous,

Alors voilà, j'ai quelques petit problème avec mon menu déroulant...
En effet lorsque je passe ma souris sur un des menus, les sous menus se s'affiche pas correctement, ou du moin pas à la bonne place...

Voici un screen pour mieu me faire comprendre Smiley biggrin
upload/18008-site.JPG

Comme vous pouvez le voir les sous menu sont complétement décalé...

Je pense que cela vient vient de la commande "position", mais je n'arrive pas à régler de problème...

Voici mon .css :
/* Le menu déroulant*/



dt, dl, dd, ul, li 
{
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu_dynamique
 {
background-image: url("images/fond_menu_deroulant.gif");
width: 1024px;
height: 35px;
}

#menu_dynamique dl 
{
float: left;
}
#menu_dynamique li {
display: inline;
}

#menu_dynamique a
 {
text-decoration: none;
color: red;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: auto;
}


.mentions 
{
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}

a 
{text-decoration: none;
color: #222;
}




Merci d'avance
Bonsoir psychopathe36,

Une petite recherche sur le forum aurait sans doute pu te venir en aide...
Une révision sur le positionnement n'aurait sans doute pas non plus été inutile Smiley cligne

En l'état la feuille de styles de ton menu n'est pas d'une grande aide, il aurait fallu y adjoindre au minimum le code html (dans son ensemble et c'eut été la fête, une page en ligne et nous sortions le champagne Smiley lol )

Trève de "plaisanterie", plus tu donnes d'informations, meilleures sont tes chances d'obtenir une réponse rapidemment Smiley cligne

Il me semble toutefois que le problème qui t'amène parmi nous se situe au niveau du positionnement de tes sous-menu, comme tu le sais certainement, le positionnement absolu s'effectue par rapport au premier ancêtre positionné, "s'il n'y a pas" d'ancêtre positionné, le positionnement s'effectuera par rapport au limite de la zone d'affichage (viewport)
A lire : Comment positionner les éléments en CSS ?
a écrit :
Lorsqu'il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).

Solution : positionner le conteneur de tes sous-menu (position absolue ou relative) comme cela a été fait dans ce tutoriel dont tu t'es peut-être servi ?
Nous pourrons le vérifier dès que tu nous auras fourni un peu plus d'informations Smiley cligne

(ps: La classe "mentions" te sert réellement dans ta page?)

Bon courage,
Cdt,
Sylvain
Merci beaucoup pour ta réponse!
J'ai réussi à régler mon problème grâce à elle Smiley cligne


Bon t'en que j'y suis, je vais vous poser une petite question...
Alors voilà j'aimerais savoir comment peut on creer un bouton, image...où lorsque l'on passe sa sourie dessus, le texte de l'image (ou du bouton) s'éclaircit.

Pour cela j'avais pensé à utiliser deux images, mais je trouve cette technique un peu longue à réaliser...

Ou alors j'avais pensé à creer un image ou le texte est transparant, et lorsque l'on passe ca sourie dessus, le fond s'éclaircit ce qui logiquement donne l'illusion d'éclaircire le texte...
Mais je n'ai aucune idée de comment creer une image avec une partie transparente donc je n'ai pas put tester cette proposition...



Merci de votre aide.