Bonjour!
J'ai besoin d'une liste cliquable pour mon site: je souhaite que lorsque l'on clique dessus, la ligne se déroule pour afficher de nouvelles informations.
Pas de panique, je l'ai fait ! (en m'inspirant très largement du tutoriel des menus déroulants) mais j'ai des problèmes...
Voici le code de ma page (j'ai tout mis dans la même page pour le moment):
PROBLEMES:
- Il y a des bugs de marges sous IE. (Item 02 mal positionné: marge en haut...).
- Pas de hover des <dt> sous IE.
- On ne peut pas ouvrir deux "Item" à la fois.
- Je ne m'y connais pas en JS.
QUESTION:
Pouvez-vous m'aider à résoudres ces problèmes?
Merci d'avance !
J'ai besoin d'une liste cliquable pour mon site: je souhaite que lorsque l'on clique dessus, la ligne se déroule pour afficher de nouvelles informations.
Pas de panique, je l'ai fait ! (en m'inspirant très largement du tutoriel des menus déroulants) mais j'ai des problèmes...
Voici le code de ma page (j'ai tout mis dans la même page pour le moment):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body
{
margin: 0;
padding: 0;
background: white;
font-size: 14px;
font-family: tahoma;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
width: 700px;
margin: 100px auto 0 auto;
}
#menu dt
{
cursor: pointer;
margin: 2px 0;
padding: 10px;
height: 20px;
background: #191919;
color: #ffffff;
}
#menu dt:hover
{
background: #e22e07;
font-weight: bold;
}
#menu dd
{
position: relative;
margin-top: -42px;
padding: 10px;
background: #e22e07;
color: #ffffff;
text-align: justify;
}
#menu dd a
{
color: #ffffff;
}
#menu dd a:hover
{
color: #191919;
}
#menu dd.finish
{
background: #ffffff;
padding: 0;
margin: 0;
}
</style>
<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('sitem'+i)) {document.getElementById('sitem'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre('sitem1');">Item 01</dt>
<dd id="sitem1">
<strong>Item 01</strong><br/>
<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a turpis. Cras odio. Proin eleifend fermentum sem. Duis at felis. Praesent dolor nisl, molestie vitae, suscipit id, elementum a, metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at lacus. Duis a turpis vitae metus mattis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta iaculis dui. Aenean tempor consequat magna. Sed venenatis ante sed erat. Donec elementum, eros sit amet rhoncus pharetra, massa nisl ullamcorper nibh, ac tincidunt dui purus in lorem. Maecenas accumsan justo in velit.<br/>
<br/>
<a href="#" onclick="javascript:montre('sitem0');">Fermer.</a>
</dd>
<dt onclick="javascript:montre('sitem2');">Item 02</dt>
<dd id="sitem2">
<strong>Item 02</strong><br/>
<br/>
Nulla imperdiet. Donec tincidunt ante eget sem. Phasellus accumsan, justo id adipiscing interdum, sapien turpis pharetra massa, sed iaculis magna urna in lectus. Mauris adipiscing orci eu metus. Morbi tristique, felis at tempor sodales, magna dolor tempus augue, et consectetuer eros dolor id neque. Pellentesque ac nulla. Cras sit amet lectus id ligula dignissim fringilla. Sed nunc erat, tempor eget, tincidunt sed, tincidunt eu, ipsum. Ut vel lorem id augue fringilla placerat. Vestibulum quis nibh. Proin enim lectus, mattis condimentum, iaculis ut, cursus quis, dolor. Mauris eu est quis elit cursus malesuada. Duis a dolor. Pellentesque lacus eros, imperdiet eget, dignissim condimentum, suscipit non, neque. Aliquam in arcu sit amet tortor elementum vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis et leo. Nulla elementum tortor gravida mauris. Morbi fermentum elementum eros.<br/>
<br/>
<a href="#" onclick="javascript:montre('sitem0');">Fermer.</a>
</dd>
<dt onclick="javascript:montre('sitem3');">Item 03</dt>
<dd id="sitem3">
<strong>Item 03</strong><br/>
<br/>
Integer in ipsum. Cras ac neque et augue vestibulum sagittis. Etiam aliquet elit ac nunc. Aliquam erat volutpat. Vivamus elit tellus, semper non, malesuada at, dictum sit amet, quam. Praesent lorem magna, congue commodo, facilisis vel, adipiscing id, dolor. Pellentesque consectetuer egestas ipsum. Aliquam erat volutpat. Nunc ultricies molestie eros. Donec lacus. Integer venenatis odio ut justo. Praesent tincidunt. Pellentesque odio orci, tristique id, consequat ac, laoreet vitae, lectus. Curabitur erat tortor, imperdiet id, pellentesque nec, suscipit ut, orci.<br/>
<br/>
<a href="#" onclick="javascript:montre('sitem0');">Fermer.</a>
</dd>
<dt onclick="javascript:montre('sitem4');">Item 04</dt>
<dd id="sitem4">
<strong>Item 04</strong><br/>
<br/>
Curabitur porta. Nam vel dolor. Curabitur rutrum neque vitae diam. Nulla magna. Sed in velit non turpis aliquam bibendum. Duis urna. In hac habitasse platea dictumst. Vestibulum dictum augue et elit. Donec nec nulla vitae nulla ornare interdum. Donec magna est, posuere ut, blandit blandit, hendrerit ut, est. Mauris id nulla eget pede iaculis ultricies. In dictum ligula laoreet tortor. Pellentesque vitae ipsum. Etiam facilisis ornare tellus. Praesent vel felis. Sed in nibh. Phasellus augue urna, volutpat in, dignissim faucibus, lobortis vel, augue. Nunc fringilla. Morbi et ligula in enim aliquet viverra.<br/>
<br/>
<a href="#" onclick="javascript:montre('sitem0');">Fermer.</a>
</dd>
<dd id="sitem0" class="finish"></dd>
</dl>
</body>
</html>PROBLEMES:
- Il y a des bugs de marges sous IE. (Item 02 mal positionné: marge en haut...).
- Pas de hover des <dt> sous IE.
- On ne peut pas ouvrir deux "Item" à la fois.
- Je ne m'y connais pas en JS.
QUESTION:
Pouvez-vous m'aider à résoudres ces problèmes?
Merci d'avance !
