Page 1 sur 1
Menus déroulants : peaufinage
Publié : 15 mars 2007, 10:36
par Bigbubu
Bonjour,
Je me suis inspiré (en fait j'ai même totalement pompé^^) des exemples de menu déroulant dans ce post :
http://www.geckozone.org/forum/viewtopi ... %E9roulant
et j'aimerais si possible avoir quelques conseils :
- est-il possible d'avoir un menu et un sous-menu alignés verticalement avec un texte centré ? Si je mets le texte au centre, le sous-menu est décalé vers la gauche, si je veux l'aligner, il faut que je mette le texte à gauche
- est-il possible d'aligner la barre de menu sur la page (elle se retrouve à gauche) ?
Enfin, y a t-il un tutoriel qui expliquerait de manière simple, voire simpliste, les paramètres à modifier (car là, j'essaye de changer les lignes une par une et je vois ce que çà entraine...)
Merci
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
Publié : 15 mars 2007, 19:58
par Bigbubu
En fait, je pense qu'un petit html vaut mieux qu'un long discours :
- avec "text-align: left":
http://perso.orange.fr/spese/html/testcd.html
- avec "text-align: center":
http://perso.orange.fr/spese/html/testcd1.html
Pour ma 2e question, je me suis mal exprimé, je voulais
centrer la barre de menu sur la page html
Pour ma 3e question, apparemment, il y a une discussion sur un autre post un peu plus haut à ce sujet :
http://www.geckozone.org/forum/viewtopi ... c54f013fab
Merci
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; (R1 1.5); .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Publié : 16 mars 2007, 14:25
par Bigbubu
Remarquez, je me dis qu'il suffirait de mettre plusieurs "espace" avant le texte, mais çà me paraît ... inélégant
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; (R1 1.5); .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Publié : 16 mars 2007, 14:38
par myahoo
Bigbubu a écrit :Remarquez, je me dis qu'il suffirait de mettre plusieurs "espace" avant le texte, mais çà me paraît ... inélégant
Surtout que les espaces (à moins d'avoir été mis en "%20") ne sont pas toujours estimés comme en étant...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
Publié : 16 mars 2007, 14:54
par Bigbubu
Ben non, çà marche pas
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; (R1 1.5); .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Publié : 16 mars 2007, 19:00
par chinon37
Si tu peux attendre demain, je pense qu'on aura plus de temps pour te répondre...
Publié : 16 mars 2007, 19:11
par Bigbubu
Il n'y a rien d'urgent
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; (R1 1.5); .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Publié : 17 mars 2007, 09:27
par chinon37
petite remarque en préambule: la feuille de style est incomplète par rapport à la page. En effet, des classes ont été attribuées dans la page sans qu'il y ait de classes dans la feuille de style (.conteneur et .menu)
cela vient, amha, du fait que cette page doit être issue d'un document microsoft nettoyé par Nvu? c'est tout à ton honneur!
Je me penche sur ces feuilles de style et je reviens.
Publié : 17 mars 2007, 15:11
par chinon37
J'ai refait une partie de la page afin que le menu horizontal soit centré.
Ci-dessous le code que tu devras réamenager. Je n'ai pas touché au reste de la page (pô eu le courage, ni le temps)
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
name="generator"
content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"><meta
content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>ss1</title><style
title="styletuto" media="all" type="text/css">
#navcontainer {
border-top: 2px solid #330099;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
z-index: 1;
}
#navcontainer ul {
padding: 0;
list-style-type: none;
text-align: center;
margin-top: -8px;
position: relative;
z-index: 2;
}
#navcontainer li {
border-style: solid;
border-color: #cccccc;
margin: 0 5px;
display: inline;
text-align: center;
width: 150px;
background-color: #eeeeee;
}
#navcontainer li a {
border: none;
padding: 1px 7px;
background-color: #eeeeee;
color: #330099;
font-weight: bold;
text-decoration: none;
}
#navcontainer li a:hover {
border-style: solid;
border-color: #666666;
border-width: 2px 1px;
color: #000000;
}
#navcontainer li a#current {
border-style: solid;
border-color: #666666;
border-width: 2px 1px;
color: #000000;
}
</style><!--[if lt IE 7]>
<script type="text/javascript">
// this emulates the "LI:hover" CSS selector for IE
// requires a "li.hover" duplicate selector in the stylesheet
function iePatchLiHover(name) {
var ulList = document.getElementsByTagName("UL");
for (var j = 0; j < ulList.length; j++) {
if (ulList[j].className.indexOf(name) >= 0) {
var liList = ulList[j].getElementsByTagName("LI");
for (var i = 0; i < liList.length; i++) {
// normal code
//~ liList[i].setAttribute("onmouseover", "this.className='hover'");
//~ liList[i].setAttribute("onmouseout", "this.className=''");
// IE code
liList[i].onmouseover = function() { this.className='hover' };
liList[i].onmouseout = function() { this.className='' };
}
}
}
}
// apply the patch to every UL.menu
window.onload = function() { iePatchLiHover("menu") };
</script>
<![endif]--> </head>
<body linkifytime="0" linkified="0" linkifying="false"> <div
id="conteneur"> <table
style="text-align: left; width: 100%; height: 150px;" border="1"
cellpadding="2" cellspacing="0"> <tbody> <tr> <td
style="width: 20%; height: 150px; text-align: center;"> <a
href="http://perso.orange.fr/spese/html/img/Logo.jpg"><img
style="border: 0px solid ; width: 200px; height: 83px;"
alt="Synergie Santé" src="testcd_fichiers/Logo.jpg"></a><br> </td> <td
style="text-align: center;"> <p
style="font-family: Times New Roman,Times,serif;"> <b><span
style="font-size: 36pt; color: rgb(0, 0, 238);"><span
style="color: rgb(0, 0, 153);">SYNERGIE SANTE</span><br></span></b> </p>
<p> <b style=""><span style="color: blue;"><span
style="color: rgb(0, 0, 153); font-family: Times New Roman,Times,serif;">Espace
d'information, d'éducation, de prévention et de formation</span> <span
style="color: rgb(0, 0, 153); font-family: Times New Roman,Times,serif;">des
acteurs de santé du bassin thionvillois</span></span></b> </p> </td> </tr>
</tbody> </table> <br><div id="navcontainer"> <ul> <li> <a href="#"
name="current">Menu un</a> </li> <li> <a href="testcd.html#"
name="current">Menu deux</a> </li> <li> <a href="testcd.html#"
name="current">Menu trois</a> </li> <li> <a href="testcd.html#"
name="current">Menu quatre</a> </li> <li> <a href="testcd.html#"
name="current">Menu cinq</a> </li> </ul> </div> <br> <table
style="text-align: left; width: 100%; height: 640px;" border="1"
cellpadding="2" cellspacing="0"> <tbody> <tr> <td
style="text-align: left; vertical-align: middle;"> <div
style="margin-left: 10px; margin-right: 10px; text-align: justify;"> <big><br>
<span style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">GENERALISTES
:</span> 7 membres</span><br></big> <big><br> <span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">SPECIALISTES
:</span> 7 membres</span><br> <br></big> <big><span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">INFIRMIERS
:</span> 3 membres</span><br></big> <big><br> <span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">PHARMACIENS
:</span> 3 membres</span><br></big> <big><br> <span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">MASSEURS-KINESITHERAPEUTES
:</span> 3 membres</span><br></big> <big><br> <span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">CHIRURGIENS-DENTISTES
:</span> 2 membres</span><br></big><br> <big><span
style="font-weight: bold;"><span style="color: rgb(0, 0, 153);">AUTRES
PROFESSIONNELS DE SANTE :</span> 3 membres sur 5 possibles</span><br></big><br>
<big><span style="font-weight: bold; color: rgb(0, 0, 153);">MEMBRES DE
DROIT :</span></big><br> </div> </td> </tr> </tbody> </table><br> </div>
</body></html>
Il te suffit de coller ce code dans une nouvelle page de Kpz/Nvu à la place du code existant de l'onglet source pour voir le résultat
Publié : 17 mars 2007, 15:58
par Bigbubu
Merci infiniment pour le temps que tu y as consacré, mais euh...
chinon37 a écrit :En effet, des classes ont été attribuées dans la page sans qu'il y ait de classes dans la feuille de style (.conteneur et .menu)
c'que çà veut dire ?
Ma formation est très basique, d'où ma remarque sur les tuto "simplistes", en fait je n'ai jamais tenté de faire des feuilles de style, je tatonne pour trouver une forme de départ, puis je modifie (je sais, je dois perdre du temps)
Je teste tout çà et je mets en ligne
Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; (R1 1.5); .NET CLR 1.1.4322; .NET CLR 2.0.50727)