2009-01-09 6 views
1

Je n'arrive pas à trouver un moyen de faire des onglets à plusieurs lignes avec le contrôle d'onglet ajax ASP.net. Je ne peux pas non plus trouver un tutoriel ou un exemple sur l'utilisation de CSS pour faire plusieurs rangées d'onglets.Onglets à plusieurs lignes utilisant CSS

Si vous ne comprenez pas ce que je cherche ici est une image de ce que je cherche http://bp1.blogger.com/_WCGCQYWEaxs/Rq1c2bLNMDI/AAAAAAAAABU/0sKw_CrKLL4/s1600-h/dsd.jpg

Quelqu'un peut-il me donner un lien sur la façon d'atteindre plusieurs rangée d'onglets?

Répondre

2

Bien chaque onglet est un objet li. Définissez chacun à float:left et à moins que vous ayez défini une hauteur absolue sur votre conteneur ul, lorsque vous manquez d'espace sur la première ligne, les li doivent passer à la ligne suivante.

Quelque chose d'aussi simple que cela devrait fonctionner, mais il pourrait avoir besoin coups de pied:

<ul id="nav"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
</ul> 

CSS:

#nav {width:200px;} 
#nav li {float:left;background:#eee;} 

En ce qui concerne les milieux, comme le dit Eran, vous aurez envie d'utiliser la méthode des portes coulissantes. Il est assez simple et il devrait être possible sans ajouter de HTML supplémentaire, simplement modifier le CSS à quelque chose comme ceci:

#nav {width:200px;} 
#nav li {float:left;background:url(tab-bg.png) top right no-repeat;padding-right:5px} 
#nav a {float:left;background:url(tab-bg.png) 0 -5px no-repeat;padding-left:5px} 

S'il vous plaît nu à l'esprit, je l'ai fait tout ce code sur place. Le vôtre devrait ressembler, mais rappelez-vous que le mien n'a pas été testé. Lisez le didacticiel sur les portes coulissantes pour savoir de quoi je parle et comment cela fonctionne.

Modifier: Je viens de relire le titre et les balises. Vous voulez cela pour un contrôle ASPNET préfabriqué. Je verrais si vous pouvez faire une méthode CSS pure. Essayez d'appliquer la méthode de la porte coulissante à ce que vous avez. Si vous ne pouvez pas comprendre comment travailler avec le HTML actuel, éditez votre question et publiez-la dessous et je suis sûr que quelqu'un peut vous aider à faire fonctionner vos onglets.

1

J'utilise généralement une liste non triée (UL) avec ses éléments de liste flottants afin qu'ils s'empilent les uns à côté des autres. Il y a plein de bons tutoriels sur le web, juste des "onglets CSS" google. Voici un nice one de A List Apart.

0

Si vous injectez une fermeture Span et Div puis une nouvelle dans le modèle d'en-tête du dernier panneau de l'onglet sur une ligne, l'onglet panles sera divisé en plusieurs lignes (Semble travailler pour moi en tout cas) . Vous pouvez utiliser CSS plutôt que les trucs de style qui suit, mais j'ai seulement regardé cela pendant quelques minutes.

l'exemple de la dernière languette sur une rangée:

<cc1:TabPanel ID="tbpnAttLists" runat="server" HeaderText="Attribute Lists"> 
<HeaderTemplate> 
Attribute Lists 
</span> 
</div> 
<div class="ajax__tab_xp" style="width:100%; border-bottom:solid 1px silver; border-right: solid 1px silver; border-left: solid 1px silver;font-family:verdana,tahoma,helvetica;font-size:11px; "> 
</HeaderTemplate> 
Questions connexes