Menu déroulant CSS perso
Black_Winged_Angel
Messages postés
301
Date d'inscription
Statut
Membre
Dernière intervention
-
xavierh Messages postés 72 Date d'inscription Statut Membre Dernière intervention -
xavierh Messages postés 72 Date d'inscription Statut Membre Dernière intervention -
Bonsoir, voila je vais faire simple, j'ai ceci:
Index.html
__________________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BlackWingedAngel.ifrance</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
<ul id="Menu">
<li><a href="Index.html">Menu 1</a></li>
<li><a href="Index.html">Menu 2</a></li>
<li><a href="Index.html">Menu 3</a></li>
<li><a href="Index.html">Menu 4</a></li>
</ul>
<p><br />
</div></body>
</html>
_______________________________________________________________
Mon Style.css
_______________________________________________________________
Body {
background-image: url(Images/Background.jpg);
background-repeat: repeat;
margin: 0 px 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#Header {
margin: 0 px 0 0 0;
padding: 0 px 0 0 0;
height: auto;
width: auto;
position: static;
left: 0px;
top: 0px;
}
#Header #Menu {
background: #000;
margin: 0;
padding: 0;
list-style-type: none;
}
#Header #Menu li {
margin: 0 0 0 0;
padding: 0;
float: left;
border: 0;
}
#Header #Menu li a {
text-decoration: none;
border: 1 px solid # bdb;
display: block;
border: 0;
width: 100px;
height: 25px;
color: #FFF;
background-image: url(Images/Back_bt_a.jpg);
cursor: crosshair;
text-align: center;
}
#Header #Menu a:hover {
color: #FF0000;
cursor: crosshair;
background-image: url(Images/Back_bt_ahover.jpg);
}
_____________________________________________________________________
Ce que je veux faire:
- Transformer mon menu rollhover en rollhover déroulant en catégories et sous-catégories
- Positionner mon menu en haut à gauche de la page ( 0;0 ) et ce, même lors du déroulement de la page, sans javascript
- Que mon menu ait un effet de transparence, c'est à dire que l'on voit le texte et les images, lors du déroulement de la page ainsi que dans la navigation du menu.
Je cherche aussi:
- Toutes les personnes motivées prêtes à travailler ( volontairement ) sur un projet de site ( celui que je prépare ) qui rapporte tout ce qui est possible et imaginable sur les rapports PSP-PSX ( POPS )
- Un hébergeur gratuit, avec un nom de domaine gratuit, ayant un espace de stockage initial de 10Go minimum.
Merci
Index.html
__________________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BlackWingedAngel.ifrance</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
<ul id="Menu">
<li><a href="Index.html">Menu 1</a></li>
<li><a href="Index.html">Menu 2</a></li>
<li><a href="Index.html">Menu 3</a></li>
<li><a href="Index.html">Menu 4</a></li>
</ul>
<p><br />
</div></body>
</html>
_______________________________________________________________
Mon Style.css
_______________________________________________________________
Body {
background-image: url(Images/Background.jpg);
background-repeat: repeat;
margin: 0 px 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#Header {
margin: 0 px 0 0 0;
padding: 0 px 0 0 0;
height: auto;
width: auto;
position: static;
left: 0px;
top: 0px;
}
#Header #Menu {
background: #000;
margin: 0;
padding: 0;
list-style-type: none;
}
#Header #Menu li {
margin: 0 0 0 0;
padding: 0;
float: left;
border: 0;
}
#Header #Menu li a {
text-decoration: none;
border: 1 px solid # bdb;
display: block;
border: 0;
width: 100px;
height: 25px;
color: #FFF;
background-image: url(Images/Back_bt_a.jpg);
cursor: crosshair;
text-align: center;
}
#Header #Menu a:hover {
color: #FF0000;
cursor: crosshair;
background-image: url(Images/Back_bt_ahover.jpg);
}
_____________________________________________________________________
Ce que je veux faire:
- Transformer mon menu rollhover en rollhover déroulant en catégories et sous-catégories
- Positionner mon menu en haut à gauche de la page ( 0;0 ) et ce, même lors du déroulement de la page, sans javascript
- Que mon menu ait un effet de transparence, c'est à dire que l'on voit le texte et les images, lors du déroulement de la page ainsi que dans la navigation du menu.
Je cherche aussi:
- Toutes les personnes motivées prêtes à travailler ( volontairement ) sur un projet de site ( celui que je prépare ) qui rapporte tout ce qui est possible et imaginable sur les rapports PSP-PSX ( POPS )
- Un hébergeur gratuit, avec un nom de domaine gratuit, ayant un espace de stockage initial de 10Go minimum.
Merci
A voir également:
- Menu déroulant CSS perso
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
6 réponses
-Pour les menus déroulants, tu peux t'inspirer ici : http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
-Position en haut à gauche {left:0px;top:0px;position:absolute;}
-Effet de transparence avec opacity
-Position en haut à gauche {left:0px;top:0px;position:absolute;}
-Effet de transparence avec opacity
Je sais je l'ai supprimée, par contre j'ai essayé left et top, résultat mon menu est à fond à gauche ( nickel ), par contre le top n'a pas fonctionné ( j'ai une ligne de background qui s'affiche )
Réponse:
#Header #Menu
margin 0px 0px
Par contre maintenant, lors du déroulement de la page, le menu lui aussi remonte :-/
Y'a pas une technique?
Et opacity n'est pas une propriété css valide ( d'après dreamweaver )
#Header #Menu
margin 0px 0px
Par contre maintenant, lors du déroulement de la page, le menu lui aussi remonte :-/
Y'a pas une technique?
Et opacity n'est pas une propriété css valide ( d'après dreamweaver )
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Parce que je l'ai déjà mis à
#Header
margin 0px ( top ) 0px (left)
Par ailleurs, tu as une balise <p> en trop dans ton code.