Probleme avec menu deroulant
Résolu
nano1986
Messages postés
21
Date d'inscription
Statut
Membre
Dernière intervention
-
nano1986 Messages postés 21 Date d'inscription Statut Membre Dernière intervention -
nano1986 Messages postés 21 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
j'ai un gros probléme avec mon site internet ,je viens d'essayer de poser un menu deroulant mais lorsqu'il se deroule mes éléments de la page se decale .je pense que c'est un probleme de postion absolut mais je ne sais vraiment pas comment faire et ou agire sur la css ...
quelqu'un pourrait il m'aider???
je travaille avec dreamweaver... et la cssattache est pour l'instant uniquement compatible avec firefox .
code htlm:
<!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=utf-8" />
<title>Index Riom ville en jazz</title>
<link href="jazzMENU2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//--></script>
<head>
</head>
<body>
<div class="all">
<div class="header">
<div class="banniere"></div>
<div class="logo"></div></div>
<div class="contener">
<div class="menu">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd style="display: none;" id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd style="display: block;" id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="agenda">
<div class="agendarouge"><a href="#">Le Programme</a></div>
<div class="agenblanc">
<ul class="agenblanc ul">
<li><a href="#">Lundi 25 juillet</a></li>
<li><a href="#">mardi 26 juillet</a></li>
<li><a href="#">mercredi 27 juillet</a></li>
<li><a href="#">jeudi 28 juillet</a></li>
<li><a href="#">vendredi 29 juillet</a></li>
<li><a href="#">samedi 30 juillet</a></li>
<li><a href="#">dimache 31 juillet</a></li>
</ul>
</div>
<div class="artistesgris"><a href="#">Les Artistes</a></div>
</div>
<div class="agendablanc">
<h1 align="center">Bienvenue sur riom ville en jazz </h1>
<p>$xc</p>
<p>vcx</p>
<p>vcx</p>
<p>v</p>
<p>xcv</p>
<p>cxv</p>
<p>xc</p>
<p>v</p>
<p>cxv</p>
<p>xc</p>
<p>v</p>
<p>cx</p>
<p>vxc</p>
<p>v</p>
<p>xc</p>
<p>vcx </p>
</div>
<div class="recherche"><a href="#">Recherche</a></div>
<div class="newsletter">
<div id="newlettersearch"><a href="#">Newletter</a>
</div>
<div class="newslettersaisi2">
</div>
<div></div>
</div>
<div id="boutique">
<div id="boutiquegristete"><a href="#">Boutique en ligne</a></div>
<div id="tshirt"></div>
<div id="boutiquebas"></div>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/fondu-8.jpg);
background-repeat: repeat-x;
}
#all {
height: 570px;
width: 1024px;
}
.header {
height: 148px;
width: 1024px;
float: left;
background-repeat: repeat-x;
}
.banniere {
float: left;
height: 148px;
width: 779px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/accueilgrisfini_02.png);
background-repeat: no-repeat;
}
.logo {
float: left;
height: 148px;
width: 244px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/accueilgrisfini_03.png);
}
.menu {
height: 43px;
width: 560px;
margin-top: 13px;
margin-left: 209px;
margin-right: 368px;
}
.agendarouge {
float: left;
height: 22px;
width: 93px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_24.jpg);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
.artistesgris {
float: left;
height: 22px;
width: 125px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_37.jpg);
background-repeat: no-repeat;
padding-top: 5px;
}
.artistesgris a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
margin-left: 36px;
}
.agendablanc hl{
text-align:center
}
.agendablanc {
float: left;
min-height:380px;
width: 581px;
margin-left: 13px;
background-color: #FFFFFF;
overflow: 380 px
}
.recherche {
float: left;
height: 48px;
width: 97px;
margin-top: 2px;
margin-left: 13px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_27.jpg);
padding-top: 10px;
padding-left: 55px;
}
.newslettersaisi {
height: 10px;
width: 140px;
margin-top: 5px;
margin-left: 10px;
}
#saisi {
width: 130px;
}
.recherche a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.agenblanc {
float: left;
height: 283px;
width: 123px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
margin: 0px;
line-height: 20px;
list-style-type: none;
list-style-image: none;
}
.agenblanc a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}.agenblanc ul{
margin: 0px;
padding: 0px;
text-align: center;
line-height: 40px;
}
.agenda {
float: left;
height: 338px;
width: 124px;
margin-left: 71px;
list-style-image: none;
list-style-type: none;
}
.contener {
float: left;
height: 427px;
width: 1024px;
}
.newsletter {
float: left;
width: 152px;
margin-top: 5px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_32.jpg);
margin-left: 13px;
height: 70px;
background-repeat: no-repeat;
}
.newsletter a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.newslettersaisi2 {
height: 15px;
width: 135px;
padding-top: 3px;
padding-left: 10px;
}
.newslettersaisi2 input type {height: 15px;
width: 135px;
padding-top: 3px;
padding-left: 10px;
}
.newsletter input {
height: 15px;
width: 130px;
padding: 50px;
}
#newlettersearch {
width: 96px;
height: 30px;
padding-left: 56px;
padding-top: 14px;
}
.newsletter a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#boutiquegristete {
height: 21px;
width: 107px;
float: left;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_01.jpg);
background-repeat: no-repeat;
padding-top: 8px;
padding-left: 45px;
}
#boutiquegristete a{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-style: normal;
font-weight: bold;
}
#tshirt {
float: left;
height: 149px;
width: 152px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_02.jpg);
background-repeat: repeat-x;
}
#boutiquebas {
height: 27px;
width: 152px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_03.jpg);
float: left;
}
#boutique {
float: left;
height: 205px;
width: 152px;
margin-top: 5px;
margin-left: 13px;
}
.agendarouge a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
<style type="text/css">
/* CSS issu des tutoriels https://www.alsacreations.com/ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu {
top: 41px;
z-index:100;
width: 781px;
height: 43px;
}
#menu dl {
float: left;
margin: 0 1px;
width: 60px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a {text-decoration: none;
color: black;
color: #222;
}
j'ai un gros probléme avec mon site internet ,je viens d'essayer de poser un menu deroulant mais lorsqu'il se deroule mes éléments de la page se decale .je pense que c'est un probleme de postion absolut mais je ne sais vraiment pas comment faire et ou agire sur la css ...
quelqu'un pourrait il m'aider???
je travaille avec dreamweaver... et la cssattache est pour l'instant uniquement compatible avec firefox .
code htlm:
<!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=utf-8" />
<title>Index Riom ville en jazz</title>
<link href="jazzMENU2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//--></script>
<head>
</head>
<body>
<div class="all">
<div class="header">
<div class="banniere"></div>
<div class="logo"></div></div>
<div class="contener">
<div class="menu">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd style="display: none;" id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd style="display: block;" id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="agenda">
<div class="agendarouge"><a href="#">Le Programme</a></div>
<div class="agenblanc">
<ul class="agenblanc ul">
<li><a href="#">Lundi 25 juillet</a></li>
<li><a href="#">mardi 26 juillet</a></li>
<li><a href="#">mercredi 27 juillet</a></li>
<li><a href="#">jeudi 28 juillet</a></li>
<li><a href="#">vendredi 29 juillet</a></li>
<li><a href="#">samedi 30 juillet</a></li>
<li><a href="#">dimache 31 juillet</a></li>
</ul>
</div>
<div class="artistesgris"><a href="#">Les Artistes</a></div>
</div>
<div class="agendablanc">
<h1 align="center">Bienvenue sur riom ville en jazz </h1>
<p>$xc</p>
<p>vcx</p>
<p>vcx</p>
<p>v</p>
<p>xcv</p>
<p>cxv</p>
<p>xc</p>
<p>v</p>
<p>cxv</p>
<p>xc</p>
<p>v</p>
<p>cx</p>
<p>vxc</p>
<p>v</p>
<p>xc</p>
<p>vcx </p>
</div>
<div class="recherche"><a href="#">Recherche</a></div>
<div class="newsletter">
<div id="newlettersearch"><a href="#">Newletter</a>
</div>
<div class="newslettersaisi2">
</div>
<div></div>
</div>
<div id="boutique">
<div id="boutiquegristete"><a href="#">Boutique en ligne</a></div>
<div id="tshirt"></div>
<div id="boutiquebas"></div>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/fondu-8.jpg);
background-repeat: repeat-x;
}
#all {
height: 570px;
width: 1024px;
}
.header {
height: 148px;
width: 1024px;
float: left;
background-repeat: repeat-x;
}
.banniere {
float: left;
height: 148px;
width: 779px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/accueilgrisfini_02.png);
background-repeat: no-repeat;
}
.logo {
float: left;
height: 148px;
width: 244px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/images/images/images/accueilgrisfini_03.png);
}
.menu {
height: 43px;
width: 560px;
margin-top: 13px;
margin-left: 209px;
margin-right: 368px;
}
.agendarouge {
float: left;
height: 22px;
width: 93px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_24.jpg);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}
.artistesgris {
float: left;
height: 22px;
width: 125px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_37.jpg);
background-repeat: no-repeat;
padding-top: 5px;
}
.artistesgris a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
margin-left: 36px;
}
.agendablanc hl{
text-align:center
}
.agendablanc {
float: left;
min-height:380px;
width: 581px;
margin-left: 13px;
background-color: #FFFFFF;
overflow: 380 px
}
.recherche {
float: left;
height: 48px;
width: 97px;
margin-top: 2px;
margin-left: 13px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_27.jpg);
padding-top: 10px;
padding-left: 55px;
}
.newslettersaisi {
height: 10px;
width: 140px;
margin-top: 5px;
margin-left: 10px;
}
#saisi {
width: 130px;
}
.recherche a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.agenblanc {
float: left;
height: 283px;
width: 123px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF0000;
text-decoration: none;
margin: 0px;
line-height: 20px;
list-style-type: none;
list-style-image: none;
}
.agenblanc a
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}.agenblanc ul{
margin: 0px;
padding: 0px;
text-align: center;
line-height: 40px;
}
.agenda {
float: left;
height: 338px;
width: 124px;
margin-left: 71px;
list-style-image: none;
list-style-type: none;
}
.contener {
float: left;
height: 427px;
width: 1024px;
}
.newsletter {
float: left;
width: 152px;
margin-top: 5px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/accueilgrisfini_32.jpg);
margin-left: 13px;
height: 70px;
background-repeat: no-repeat;
}
.newsletter a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.newslettersaisi2 {
height: 15px;
width: 135px;
padding-top: 3px;
padding-left: 10px;
}
.newslettersaisi2 input type {height: 15px;
width: 135px;
padding-top: 3px;
padding-left: 10px;
}
.newsletter input {
height: 15px;
width: 130px;
padding: 50px;
}
#newlettersearch {
width: 96px;
height: 30px;
padding-left: 56px;
padding-top: 14px;
}
.newsletter a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#boutiquegristete {
height: 21px;
width: 107px;
float: left;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_01.jpg);
background-repeat: no-repeat;
padding-top: 8px;
padding-left: 45px;
}
#boutiquegristete a{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-style: normal;
font-weight: bold;
}
#tshirt {
float: left;
height: 149px;
width: 152px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_02.jpg);
background-repeat: repeat-x;
}
#boutiquebas {
height: 27px;
width: 152px;
background-image: url(../site%20sources/d%C3%A9coupage/images/2/images/images/Sans-titre-2_03.jpg);
float: left;
}
#boutique {
float: left;
height: 205px;
width: 152px;
margin-top: 5px;
margin-left: 13px;
}
.agendarouge a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
<style type="text/css">
/* CSS issu des tutoriels https://www.alsacreations.com/ */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu {
top: 41px;
z-index:100;
width: 781px;
height: 43px;
}
#menu dl {
float: left;
margin: 0 1px;
width: 60px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a {text-decoration: none;
color: black;
color: #222;
}
A voir également:
- Probleme avec menu deroulant
- 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
