Problème largeur onglet dans un menu ASP

Question

Bonjour à tous,

Voila je rencontre un problème avec les onglets de mon menu ASP (il est généré depuis un Sitemap)
En effet mon menu fait appel à trois class CSS pour les onglets (static, dynamique et hover), ils ont tous une longueur/largeur fixe car il font appel à des images que j'ai réalisé sous photoshop.
Ainsi lorsque le texte inscrit dans mon onglet est d'un certain taille (du moins supérieure à la larguer de mes onglets) il dépasse de l'image.
J'ai essayé de positionner la larguer en auto dans mon CSS mais cela ne corrige pas le problème...

Je pense qu'il doit y avoir une solution simple mais je ne trouve rien sur le net, je fais donc appel à vos connaissances afin de m'aider sur ce problème.

Si besoin je pourrais vous donner le code ASP et CSS lié au souci.

Je vous remercie d'avance de votre aide.

Gmil

ggtry · Answer

Bonsoir,

Quel rendu veux-tu au juste ? Comme tes images ont une hauteur et une largeur définies, je suppose que tu veux que le texte qui dépasse soit coupé (?).
Le truc embêtant est qu'il faudrait le faire avec la propriété css overflow:hidden; mais, le problème est que le menu asp est généré en html avec des td et des span pour le text. Or, overflow ne peut être utilisé ni avec td ni avec span...
Une solution serait de mettre ton texte dans une div. Tu dois dans ce cas mettre ta div avec le texte du MenuItem. Je donne un exemple pour en statique pour la partie "static" du menu :

                
Dans ton cas, si ton menu est lié à une source, tu peux le faire lors du databound, avec un truc du genre (en VB) :
tonItem.text="
" & tonItem.text & "
" 

Mais en fait, je me demande... tu parles d'onglets ? C'est bien un Menu asp ?

GGtry

cs_gmil · Answer

Bonsoir,

Tout d'abord merci pour votre réponse.

En fait j'ai bien un menu asp qui est généré depuis un site map.
De plus j'ai defini des class cs pour les onglets (dynamique, static et hover) qui font appels à une image onglet background dont j'ai effectué le dessin.

Voici le code pour plus de clarté :

asp:



                                                           



Les class CSS correspondantes :

/*ONGLETS*/
.ongletOFF{
height:24px; 
width:68px;
background-image:url(../images/onglet_off3.png); 
background-repeat: no-repeat; 
padding: 4px 0px 0px 0px;
font-weight:bold;
text-align:center; 	
}


.ongletON{
height:24px; 
width:68px;
background-image:url(../images/onglet_on.png); 
background-repeat: no-repeat; 
padding: 4px 0px 0px 0px; 	 		 
font-weight:bold;
text-align:center;
font-size:12px;		
}

.ongletHOV{
height:24px; 
width:68px;
background-image:url(../images/onglet_hov2.png); 
background-repeat: no-repeat; 
padding: 4px 0px 0px 0px; 	 		 
font-weight:bold;
text-align:center;		
}

Le problème est donc que l'un de mes onglets contient un mot qui prend plus de place que les 68px définis sur mes onglets dans le css.
Le mot dépasse donc de l'image de l'onglet.
J'ai essayé de passer le width des onglets en auto avec un min-width de 68px mais cela n'arrange rien.

Merci d'avance !

ggtry · Answer

Bonsoir,

Mais tu veux bien que le texte soit coupé ?
Dans ce cas, sur l'événément MenuItemDataBound, tu peux faire un truc du genre (en VB) :

 Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
        e.Item.Text = "
" & e.Item.Text & "
"
    End Sub

GGtry

cs_gmil · Answer

Bonsoir, 

Non en fait je souhaiterais que la largeur de mon onglet évolue afin de pouvoir contenir le texte. Obtenir une image de ma class CSS se redimensionne en largeur.

En tout cas j'ai bien pris note de votre code afin de couper le text avec l'overflow hidden et je vous en remercie!

Gmil

ggtry · Answer

Rebonsoir,

Je n'ai dans ce cas que d'affreuses bidouilles à proposer... un peu comme la précédente solution d'ailleurs. Il y a peut-être beaucoup plus simple...
En fait, cela dépend aussi de ton image de fond. 
Je ne crois pas que tu puisses redimensionner une background-image avec du css. Mais je peux me tromper.
L'idéal serait que tu puisses utiliser le système dit de la porte coulissante (sinon, ça va être la galère pour faire un positionnement propre). Dans ce cas, tu peux définir trois images, une pour la gauche de l'item, une pour le milieu, qui sera répétée, et une troisième pour la droite de l'item.
Une première solution serait d'utiliser le même principe que ci-dessus :

Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
        e.Item.Text = "
" & e.Item.Text & "
"
       
End Sub

Mais le problème sera (outre le fait qu'ici, tous tes éléments de menus seront traités de la même façon, quel que soit le niveau hiérarchique) que la taille de chaque item suivra la taille du texte...
Pour obtenir la même taille dans le sous-menu, je n'ai pas trouvé mieux que ceci (sur le prerender du menu) :

  Protected Sub Menu1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim nbr As Integer = 0
        For Each it As MenuItem In Menu1.Items
            If it.Text.Length > nbr Then nbr = it.Text.Length
        Next
        nbr = nbr * 15 + 10
        
        For Each it As MenuItem In Menu1.Items
            For Each it2 As MenuItem In it.ChildItems
                it2.Text = "" & it2.Text & "
"
               '''''j'annule le border du fait que l'html génère une balise  ; le display:inline permet de garder l'ensemble sur la même ligne...
            Next
        Next
    End Sub

L'idée est d'estimer la taille de chaque "onglet" à partir du nombre de caractères du texte. Une fois le plus long déterminé, on attribue la taille définie (ici, nbr) à une nouvelle table, générée pour chaque item (ce qui n'est pas non plus terrible en soi, mais bon...). Evidemment, la définition de nbr dépendra de la taille de ta police...
Bon, encore une fois, ce n'est pas une solution sublime. Note d'ailleurs que le code ne s'applique qu'au premier sous-menu. Il faut donc adapter à ton cas...

GGtry

Problème largeur onglet dans un menu ASP

5 réponses

Votre réponse

Discussions similaires