Lu seb,
Merci de te pencher sur mes interrogations. J'arrive à peu près à faire ce que je veux avec le SOTPARTMENU, le souci c'est que je n'arrive pas à tirer profit des nouvelles fonctionnalités de la dll webcontrols 2.0 en utilisant les CustomAttribules (effet de slide à l'ouverture et fermeture des sous menus)... Il doit me manquer une étape (un register peut être) car comme je disais dans mon post précédent je n'ai rien quand entre les balises <CustomAttibutes></CustomAttributes>.
Voilà pour info mon fichier html, css et xml :
<html>
<head>
<link id="skin" rel="stylesheet" type="text/css" href="skin.css" />
</head>
<body>
<!-- Tableau Haut de page - Date - Bandeau 1 - Bandeau 2 -->
<!-- Trouver une autre solution pour align="center" qui n'est plus valable en xhtml -->
<table align="center" width="760px" cellpadding="0" cellspacing="0" class="skinmaster">
<!-- Ligne vide fond tableau (heinght 20 px) -->
<tr style="height: 20px; background-color: #D9DADB;">
<td colspan="2">
</td>
</tr>
<!-- Ligne Date - Liens site et navigation (image height 21 px) -->
<tr style="background-color: #013E7D; height: 21px; color: White;">
<td colspan="2">
<table width="100%">
<tr>
<td>
[CURRENTDATE]
</td>
<td align="right">
<label style="color: white; font-family: Arial; font-size: 8pt; margin-right: 10px;">
| Nous contacter | Plan d'accès | Mentions légales | Ajouter aux favoris |</label>
</td>
</tr>
</table>
</td>
</tr>
<!-- Ligne Logo - Bandeau 1 (image height 69 px) -->
<tr style="height: 69px;">
<td colspan="2">
<img src="images/LogoBandeau1.jpg" alt="" width="100%" />
</td>
</tr>
<!-- Ligne du menu (height 21 px) -->
<tr>
<td colspan="2" style="height: 23px;">
[SOLPARTMENU]
</td>
</tr>
<!-- Liseret de séparation (heignt 12 px) -->
<tr style="height: 14px;">
<td colspan="2">
<img src="images/Liseret.jpg" alt="" width="100%" />
</td>
</tr>
<!-- Bandeau 2 (height 115 px) -->
<tr style="height: 115px;">
<td colspan="2">
<img src="images/Bandeau1.jpg" alt="" width="100%" />
</td>
</tr>
<!-- Ligne sélection langue - fil d'ariane (height 23 px) -->
<tr style="height: 23px;">
<td style="width: 129px;">
[LANGUAGE]
</td>
<td style="background-color: White;">
<table width="100%" style="background-color: White;">
<tr>
<td>
<b style="font-size: 9pt;">Vous êtes ici :</b> [BREADCRUMB]
</td>
<td align="right">
[USER] [LOGIN]
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Colonne LeftPane (width 128 px) -->
<td rowspan="2" id="PanneauGauche" runat="server" style="width: 129px; padding: 3px 3px 3px 3px;"
valign="top">
</td>
<!-- Colonne ContentPane (width 632 px) -->
<td id="ContentPane" runat="server" style="background-color: #D9DADC; width: 632px;
padding: 3px 3px 3px 3px;" colspan="2" valign="top">
</td>
</tr>
<tr>
<!-- Colonne BottomPane -->
<td id="PiedPage" runat="server" style="width: 632px; padding: 3px 3px 3px 3px;"
colspan="2" valign="top">
</td>
</tr>
</table>
</body>
</html>
Body
{
width: 100%;
background-color: #F2FFF5;
}
/* Tableau du skin (gestion arrondis contour skin) */
.skinmaster
{
height: 100%;
background-color: #ECECEE;
border-right: #7994cb 1px solid;
border-top: #7994cb 1px solid;
border-left: #7994cb 1px solid;
border-bottom: #7994cb 1px solid;
/* arrondi des coins des bordures pour mozilla */
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}
/DNNDNNDNNDNNDNNDNNDNNDNN/
/DNN* Barre de menus DNN*/
/DNNDNNDNNDNNDNNDNNDNNDNN/
/* CSSBreadCrumbRoot */
.BreadCrumbRoot /* Premier element du menu root */
{
font-size: 9pt;
font-family: Arial;
font-weight: bold;
}
/* CSSBreadCrumbSub */
.BreadCrumbSub /* Style des elements intermediaires selectionnes via leur enfant des sous menus */
{
font-size: 8pt;
font-family: Arial;
font-style: italic;
font-weight: bold;
}
/* CSSBreak */
.Break
{
}
/* CSSContainerSub */
.ContainerSub /* Conteneur des sous menus */
{
background-color: White;
filter: Alpha(Opacity=75, FinishOpacity=75, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=0); /* Transparence pour IE */
-moz-opacity: 0.75; /* Transparence pour Mozilla */
color: Black; /* Couleur du texte des sous menus */
margin-top: 5px;
margin-left: 10px;
/* Bordures conteneurs (bonus mozilla) */
border-right: Black 1px solid;
border-top: Black 1px solid;
border-left: Black 1px solid;
border-bottom: Black 1px solid;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
padding: 5px 5px 5px 5px;
}
/* CSSControl */
.Control /* Config generale de la barre des menus */
{
padding: 3px 5px 3px 0px;
background-color: #9C9D9F;
}
/* CSSIcon */
.Icon
{
}
/* CSSIndicateChildRoot */
.IndicateChildRoot
{
}
/* CSSIndicateChildSub */
.IndicateChildSub
{
}
/* CSSNode */
.Node /* Style des noeuds enfants */
{
font-size: 8pt;
font-family: Arial;
font-weight: bold;
}
.Node:hover /* survol d'un noeud d'un sous menu */
{
background-color: #003F7D;
color: #D9DADB;
}
/* CSSNodeHover */
.NodeHover /* Pas vu d'utilite pour le moment, la classe .Node:hover se chargeant du travail */
{
}
/* CSSNodeHoverRoot */
.NodeHoverRoot /* Survol des racines (plus haut niveau) */
{
color: White;
}
/* CSSNodeRoot */
.NodeRoot /* Base du style des racines du menu sauf la premiere */
{
margin-left: 10px; /* Marge du menu principal NON SELECTIONNE */
font-size: 9pt;
font-family: Arial;
font-weight: bold;
}
/* CSSNodeSelectedRoot */
.NodeSelectedRoot /* Style du noeud du menu root selectionne */
{
margin-left: 10px; /* Marge du menu principal SELECTIONNE */
font-style: italic;
font-weight: bold;
color: #D9DADB; /*background-image:url(MainItemSelect.jpg);*/
}
/* CSSNodeSelectedSub */
.NodeSelectedSub /* Noeud d'un sous menu selectionne */
{
color: #003F7D;
background-color: #D9DADB;
font-size: 8pt;
font-family: Arial;
font-style: italic;
font-weight: bold;
}
/DNNDNNDNNDNNDNNDNNDNNDNNDNN*/
/DNN* Fin barre de menus DNN*/
/DNNDNNDNNDNNDNNDNNDNNDNNDNN*/
/* Fil d'ariane */
.Breadcrumb
{
font-family: Arial;
font-size: 8pt;
color: Black;
font-weight: bold;
}
.Breadcrumb:hover
{
font-family: Arial;
font-size: 8pt;
color: #9C9D9F;
font-weight: bold;
text-decoration: none;
}
/* Date */
.CurrentDate
{
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
color: white;
margin-left: 20px;
}
<Objects>
<Object>
<Token>[SOLPARTMENU]</Token>
<Settings>
<Setting>
<Name>ProviderName</Name>
<Value>DNNMenuNavigationProvider</Value>
</Setting>
<Setting>
<Name>ControlOrientation</Name>
<Value>Horizontal</Value>
</Setting>
<Setting>
<Name>CSSBreadCrumbRoot</Name>
<Value>BreadCrumbRoot</Value>
</Setting>
<Setting>
<Name>CSSBreadCrumbSub</Name>
<Value>BreadCrumbSub</Value>
</Setting>
<Setting>
<Name>CSSBreak</Name>
<Value>Break</Value>
</Setting>
<Setting>
<Name>CSSContainerSub</Name>
<Value>ContainerSub</Value>
</Setting>
<Setting>
<Name>CSSControl</Name>
<Value>Control</Value>
</Setting>
<Setting>
<Name>CSSIcon</Name>
<Value>Icon</Value>
</Setting>
<Setting>
<Name>CSSIndicateChildRoot</Name>
<Value>IndicateChildRoot</Value>
</Setting>
<Setting>
<Name>CSSIndicateChildSub</Name>
<Value>IndicateChildSub</Value>
</Setting>
<!-- Enables Populate On Demand - Will only work on versions AFTER 3.2.4
<Setting>
<Name>PopulateNodesFromClient</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>ExpandDepth</Name>
<Value>1</Value>
</Setting> -->
<Setting>
<Name>CSSNode</Name>
<Value>Node</Value>
</Setting>
<Setting>
<Name>CSSNodeHover</Name>
<Value>NodeHover</Value>
</Setting>
<Setting>
<Name>CSSNodeHoverRoot</Name>
<Value>NodeHoverRoot</Value>
</Setting>
<Setting>
<Name>CSSNodeHoverSub</Name>
<Value>NodeHoverSub</Value>
</Setting>
<Setting>
<Name>CSSNodeRoot</Name>
<Value>NodeRoot</Value>
</Setting>
<Setting>
<Name>CSSNodeSelectedRoot</Name>
<Value>NodeSelectedRoot</Value>
</Setting>
<Setting>
<Name>CSSNodeSelectedSub</Name>
<Value>NodeSelectedSub</Value>
</Setting>
<Setting>
<Name>leftseparator</Name>
<Value><img border="0" src="images/Onglet.gif" /></Value>
</Setting>
<Setting>
<Name>UseArrows</Name>
<Value>false</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[BREADCRUMB]</Token>
<Settings>
<Setting>
<Name>Separator</Name>
<Value>></Value>
</Setting>
<Setting>
<Name>RootLevel</Name>
<Value>0</Value>
</Setting>
<Setting>
<Name>CssClass</Name>
<Value>Breadcrumb</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[CURRENTDATE]</Token>
<Settings>
<Setting>
<Name>CssClass</Name>
<Value>CurrentDate</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[LANGUAGE]</Token>
<Settings>
<Setting>
<Name>showMenu</Name>
<Value>False</Value>
</Setting>
<Setting>
<Name>showLinks</Name>
<Value>True</Value>
</Setting>
</Settings>
</Object>
</Objects>
Le fichier html est assez fouillis car je n'ai pas encore séparé les styles des différents éléments dans le fichier css. C'est encore au stade expérimental, mais au final, tous les styles présents dans le fichier html migrerons vers des classes css...
Encore merci à tous pour vos précieuses indications... Ah oui j'y pense, au risque de paraître pénible, je n'ai touours pas compris à quoi servait la classe CSSBreak et ses dérivées... Si quelqu'un avait l'amabilité de m'illuminer sur ce point là aussi, je ne lui en serais que plus reconnaissant encore...
Sinon voilà à quoi ressemble le SolpartMenu, mais sans slide pour l'ouverture/fermeture des sous menus :'(
Enfin, un grand merci pour ton lien, il y a entre autres un schéma explicatif bien sympathique...
++