[CSS] Tabs met submenu vormgeven vanuit ordered list?

[Reveller]

Ik wil de gebruiker van mijn cms de mogelijkheid geven zelf de vorm van de administratie-links te kunnen bepalen door middel van css. Stel dat een ingelogde gebruiker beschikt over het volgende admin menu, en doorgeklikt heeft naar user > permissions:

HTML:

<ul>
<li class="expanded"><a href="users">Users</a>
  <ul>
  <li class="leaf"><a href="users/permissions" class="active">permissions</a></li>
  <li class="leaf"><a href="users/roles">roles</a></li>
  </ul>
</li>
<li class="leaf"><a href="logs">Logs</a></li>
<li class="leaf"><a href="about">About</a></li>
</ul>

Standaard laat ik dit menu zien in een ordered list:

code:

Users
  permissions
  roles
Logs
About

Ik wil echter ook de mogelijkheid bieden om de links in een horizontale tabvorm weer te geven:

code:

+-------+ +------+ +-------+
| Users | | Logs | | About |
+       +------------------+
| permissions | roles      |
+--------------------------+

Dit is me na lang proberen gelukt op de volgende manier:

HTML:

<style>
ul.primary {
  border-collapse: collapse;
  padding: 0em 0em 0em 1em;
  white-space: nowrap;
  list-style: none;
  margin: 5px;
  height: auto;
  line-height: normal;
  border-bottom: 1px solid #bbb;
}
ul.primary li {
  display: inline;
}
ul.primary li a {
  background-color: #ddd;
  border-color: #bbb;
  border-width: 1px;
  border-style: solid solid none solid;
  height: auto;
  margin-right: 0.5em;
  padding: 0em 1em;
  text-decoration: none;
}
ul.primary li.active a {
  background-color: #fff;
  border: 1px solid #bbb;
  border-bottom: #fff 1px solid;
}
ul.primary li a:hover {
  background-color: #eee;
  border-color: #ccc;
  border-bottom-color: #eee;
}
ul.secondary {
  border-bottom: 1px solid #bbb;
  padding: 0.5em 1em 0.5em 1em;
  margin: 5px;
}
ul.secondary li {
  display: inline;
  padding: 0 1em;
  border-right: 1px solid #ccc;
}
ul.secondary a {
  padding: 0;
  text-decoration: none;
}
ul.secondary a.active {
  border-bottom: 4px solid #999;
}

</style>

<div class="tabs">
<ul class="tabs primary">
  <li class="active"><a href="users" class="active">Users</a></li>
  <li><a href="logs">Logs</a></li>
  <li><a href="about">About</a></li>
</ul>
<ul class="tabs secondary">
  <li class="active"><a href="users/permissions" class="active">permissions</a></li>
  <li><a href="users/roles">roles</a></li>
</ul>
</div>

Het probleem is alleen dat bovenstaande list een andere opbouw heeft dan die bovenaan deze post. Belangrijkste verschil: semantisch gezien is deze list niet correct - hoewel permissions en roles kinderen zijn van users, staan ze in een aparte list. Mijn vraag is nu eigenlijk - is er een manier om de list die bovenaan deze post genoemd staat, met css hetzelfde eruit te laten zien als het uitgewerkte voorbeeld hierboven? Mijn css-kennis is blijkbaar te gebrekkig om dit zelf op te kunnen lossen - het uitwerken van de tabs hierboven kostte me zowat de hele dag Ik hoop dat iemand mij kan helpen / zeggen of het mogelijk is en of het css-correct is. Anders moet ik mijn PHP aanpassen zodat de functie die de administatie-list bouwt twee verschillende outputs geeft, afhankelijk van de vorm die men wil hebben (lijst onder elkaar of tabs) en dat vermijd ik echt heel graag!

[ Voor 17% gewijzigd door Reveller op 23-01-2005 20:17 ]

[Spruit_elf]

is het zo neit te doen?

HTML:

<ul class="tabs primary">
  <li class="active"><a href="users" class="active">Users</a>
    <ul class="tabs secondary">
      <li class="active"><a href="users/permissions" class="active">permissions</a></li>
      <li><a href="users/roles">roles</a></li>
    </ul>
  </li>
  <li><a href="logs">Logs</a></li>
  <li><a href="about">About</a></li>
</ul>

met relatieve en of absolute positioning

EDIT:
dit lijkt mij te werken,met wat tweaken

Cascading Stylesheet:

<style>
ul.primary {
  border-collapse: collapse;
  padding: 0em 0em 0em 1em;
  white-space: nowrap;
  list-style: none;
  margin: 5px;
  height: auto;
  line-height: normal;
  border-bottom: 1px solid #bbb;
  position:relative /*<<<- die erbij*/
}
ul.primary li {
  
  display: inline;
}
ul.primary li a {
  background-color: #ddd;
  border-color: #bbb;
  border-width: 1px;
  border-style: solid solid none solid;
  height: auto;
  margin-right: 0.5em;
  padding: 0em 1em;
  text-decoration: none;
}
ul.primary li.active a {
  background-color: #fff;
  border: 1px solid #bbb;
  border-bottom: #fff 1px solid;
}
ul.primary li a:hover {
  background-color: #eee;
  border-color: #ccc;
  border-bottom-color: #eee;
}
ul.secondary {
  border-bottom: 1px solid #bbb;
  padding: 0.5em 1em 0.5em 1em;
  margin: 5px;
  position: absolute; /* <<<- die erbij*/
}
ul.secondary li {
  display: inline;
  padding: 0 1em;
  border-right: 1px solid #ccc;
}
ul.secondary a {
  padding: 0;
  text-decoration: none;
}
ul.secondary a.active {
  border-bottom: 4px solid #999;
}

</style>
<div class="tabs">
<ul class="tabs primary">
  <li class="active"><a href="users" class="active">Users</a>
    <ul class="tabs secondary">
        <li class="active"><a href="users/permissions" class="active">permissions</a></li>
        <li><a href="users/roles">roles</a></li>
    </ul>
  </li>
  <li><a href="logs">Logs</a></li>
  <li><a href="about">About</a></li>
</ul>

</div>

en probeerd die classes eruit te gooien, de enige die je volgens mij nodig hebt zijn die active classen, die tabs primary en secondairy kan je allemaal regelen met

code:

ul ul li

enz

[ Voor 213% gewijzigd door Spruit_elf op 23-01-2005 20:50 ]

[Clay]

* Clay heeft ook ff wat gepookt: tabs
^{getest in IE6, FF & Opera}

Het enige "probleem" is eigenlijk om de bottom border van het actieve tabje weg te halen, en daarvoor moet die boven de geneste ul liggen (omdat die ook een border-top heeft), maar da's dus prima te doen met met wat z-index gerommel.

[Verwijderd]

Clay schreef op zondag 23 januari 2005 @ 20:59:
* Clay heeft ook ff wat gepookt: tabs
^{getest in IE6, FF & Opera}

Het enige "probleem" is eigenlijk om de bottom border van het actieve tabje weg te halen, en daarvoor moet die boven de geneste ul liggen (omdat die ook een border-top heeft), maar da's dus prima te doen met met wat z-index gerommel.

WOOW : ) respect, ik wou dat ik dat kon LOL

kun je me aanbevelen waar ik leuke tips en truks op het gebied van css kan vindu?

[Woudloper]

Je kan ook eens kijken naar dit voorbeeld, via: Listamatic 2: nested list options.

[Reveller]

Woudloper schreef op zondag 23 januari 2005 @ 22:45:
Je kan ook eens kijken naar dit voorbeeld, via: Listamatic 2: nested list options.

Heb ik gedaan - en ik ben nu een stuk verder, zie hier.
Ik heb nu nog twee problemen waar ik hulp bij nodig heb:

• de (grijze) achtergrond van de subnavigatie loopt bij IE niet tot het einde van het scherm, bij FF loopt hij juist verder. Hoe zorg ik ervoor dat deze achtergrond, net als de blauwe achtergrond, gewoon de schermbreedte vult?
  
  
  
  
• als ik de div die het menu in zich heeft, in een tabel cel plaats, passen de tabjes zich perfect aan. De subnavigatie valt echter compleet buiten de tabel. Ik weet dat dat komt door de position: absolute van #header ul ul, maar elke andere mogelijkheid (position: relative of position aanpassen) zorgen voor een volledig verstoorde lay-out. Wie weet hoe ik die subnav "normaal" mee kan nemen met de tabjes? Hieronder een IE screenshot ter illustratie, het originele bestand staat hier.
  
  

Als iemand andere opmerkingen over de css heeft - graag! Uiteindelijk heb ik deze tabjes met subnav zo cross-browser mogelijk

[Reveller]

* kick * ik zit nog steeds met dezelfde problemen. Ideeen, iemand?

[Spruit_elf]

width: 100% op die ul?

margin-bottom van de ul vergroten
of padding-bottom van cel oid

[ Voor 52% gewijzigd door Spruit_elf op 01-02-2005 09:34 ]

[Reveller]

mrcactus schreef op dinsdag 01 februari 2005 @ 09:32:width: 100% op die ul?

Ik heb nu dit toegevoegd:

Cascading Stylesheet:

#header #expanded ul {
  width: 100%;
}

maar dat haalt niets uit. En volgens mij heeft de margin-en padding-bottom toch niets te maken met de breedte van de div?

[ Voor 44% gewijzigd door Reveller op 01-02-2005 20:40 ]

[RwD]

Cascading Stylesheet:

#header ul ul {
  position: absolute;
  width: 100%;
  top: 33px;
  left: 0;
  padding: 0;
  background: url("bg-sub.gif") left top;
}

Dat fixed het probleem in FF.

Ik heb even verder geen tijd, misschien dat ik straks eens choogel

Opvallend is dat de marge aan de rechterkant gelijk is aan de linkerafstand tussen paginarand en de grijze (geselecteerde) tab. Als ik in #header ul de regel padding:10px 10px 0; verander in padding:10px 70px 0; dat dan de marge aan de rechterkant precies evenveel groter wordt.

[ Voor 41% gewijzigd door RwD op 02-02-2005 10:20 ]

[RwD]

Als je het trouwens alleen maar goed uit wil laten zien, en later de oplossing wilt gaan zoeken kun je ook het volgende doen:

Cascading Stylesheet:

#stupidSolution {
  z-index:-1;
  position: absolute;
  width: 100%;
  height: 23px;
  top: 33px;
  left: 0;
  padding: 0;
  background: url("bg-sub.gif") left top;
}

HTML:

<div id="header">
<ul>
  <li><a href="#">Home</a></li>
  <li id="expanded"><a href="#">Producten</a>
    <ul>
      <li><a href="#">Duur</a></li>
      <li><a href="#" class="active">Heel duur</a></li>
      <li><a href="#">Ontzettend duur</a></li>
      <li><a href="#">Astronomisch duur</a></li>
    </ul>
  </li>
  <li><a href="#">Diensten</a></li>
  <li><a href="#">Over ons</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div id="stupidSolution">&nbsp;</div>
</div>

Deze manier lijkt ook te bevestigen wat ik al eerder zei over de rechtermarge; deze stupidSolution div heeft met dezelfde css toch een andere breedte!

[ Voor 91% gewijzigd door RwD op 02-02-2005 10:20 ]

[Reveller]

RwD - dank je; dat helpt weer iets verder, al is het een tijdelijke oplossing. Mijn laatste probleem zit hem erin wanneer ik de tabjes in een tabel wil zetten:

HTML:

<table align="center" width="600" border="1"><tr><td>
<div id="header">
<ul>
  <li><a href="#">Home</a></li>
  <li id="expanded"><a href="#">Producten</a>
    <ul>
      <li><a href="#">Duur</a></li>
      <li><a href="#" class="active">Heel duur</a></li>
      <li><a href="#">Ontzettend duur</a></li>
      <li><a href="#">Astronomisch duur</a></li>
    </ul>
  </li>
  <li><a href="#">Diensten</a></li>
  <li><a href="#">Over ons</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div id="stupidSolution">&nbsp;</div>
</div>
</td></tr></table>

Dat geeft als resultaat het volgende:



Hoe zorg ik ervoor dat ook de subnavigatie netjes binnen de tabelcel valt? Het probleem zit hem waarschijnlijk in de #header ul ul, position : relative of float : left geeft een heel bizar resulaat. De subnav wordt dan wel in de tabelcel geplaatst, maar dwars door de tabjes heen...

By the way - hier de huidige css (ook voor latere referentie via de search)

Cascading Stylesheet:

body {
  background:#fff;
  margin:0;
  padding:0;
  color:#000;
  font:x-small Verdana, sans-serif;
  font-size:small;
}

#header {
  float:left;
  width:100%;
  background:#369 url("bg.gif") repeat-x bottom;
  font-size:85%;
  line-height:normal;
}

#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
}

#header li {
  float:left;
  background:url("right.gif") no-repeat right top;
  margin:0;
  padding:0 5px 0 0;
}

#header a {
  float:left;
  display:block;
  background:url("left.gif") no-repeat left top;
  padding:5px 7px 4px 20px;
  text-decoration:none;
  font-weight:bold;
  color:#9cf;
}

#header a:hover {
  color:#fff;
}

#header #expanded {
  background-image:url("right_on.gif");
}

#header #expanded a {
  background-image:url("left_on.gif");
  color:#333;
  padding-bottom:5px;
}

#header ul ul {
  position: absolute;
  width: 100%;
  top: 33px;
  left: 0;
  padding: 0;
  background: url("bg-sub.gif") left top;
}

#header #expanded ul li {
  background: none;
}

#header #expanded ul li a {
  background: none;
}

#header #expanded ul li a.active {
  color: red;
}

#stupidSolution {
  z-index:-1;
  position: absolute;
  width: 100%;
  height: 23px;
  top: 33px;
  left: 0;
  padding: 0;
  background: url("bg-sub.gif") left top;
}

[ Voor 53% gewijzigd door Reveller op 02-02-2005 15:39 ]

[RwD]

Je gaat eerst de navigatie netjes in een unordered list stoppen (niet ordered list zoals je ul zelf noemt) en daarna ga je deze gehele-menu-omvattende-ul in een containerdiv stoppen welke je daarna weer in een tabelcell stopt? Dan is het een soort matroesjka-poppetje geworden als je er geen hele goede reden voor hebt

Ik denk dat de oplossing voor je probleem is om die tabel snel te vergeten en niet te gebruiken. Tabellen zijn bedoeld voor tabel-gegevens; bijvoorbeeld een kalender ofzo (om even een voorbeeld bij de lurven te grijpen...).

Kun je uitleggen waarom je graag je navigatie in een tabel stopt? Anders kan ik je niet verder helpen hoor.

Ik vindt het design wel mooi trouwens, zit er copyright op en mag ik het stelen als ik het ooit wil gebruiken??

[ Voor 11% gewijzigd door RwD op 02-02-2005 15:52 ]

[Reveller]

RwD schreef op woensdag 02 februari 2005 @ 15:47:
Kun je uitleggen waarom je graag je navigatie in een tabel stopt? Anders kan ik je niet verder helpen hoor.

Binnen mijn cms'je kan de gebruiker in een textarea de template van de site aanpassen. Op de plaats waar de gebruiker de {top_navigatie} token zet, verschijnt de unordered list uit deze topic. Vervolgens kan de gebruiker zelf de css aanpassen om de tabjes (en subnavigatie) een ander uiterlijk te geven. Echter, niet elke gebruiker zal even behendig zijn met css en ik kan me goed voorstellen dat er mensen zijn die de top navigatie in een tabel cel definieren, zodat je qua uiterlijk zoiets krijgt als op deze pagina. Ik wil het cms met een aantal standaard templates leveren, waaronder de template uit deze topic. Maar om de mogelijkheden te tonen, wil ik ook graag een template maken met de tabjes in een tabelcel. Kortweg is het antwoord dus flexibiliteit.

Ik vindt het design wel mooi trouwens, zit er copyright op en mag ik het stelen als ik het ooit wil gebruiken??

De plaatjes van de tabjes komen van A List Apart en zijn rechtenvrij. Als ik ze mag gebruiken, maar jij dat natuurlijk ook. De achtergrond van de subnav heb ik zelf gemaakt, maar weet je wat - dat 27 bij 1 px plaatje met 7 grijstinten gooi ik er dan ook rechtenvrij bij

--- edit ---

Nu ik toch op ez.no was, heb ik meteen hun source maar even bekeken. Zij gebruiken voor hun tabjes 2 verschillende divs...misschien is dat in het kader van gemakt en flixibiliteit maar zo makkelijk ook...nadeel vind ik dat het sematisch misschien niet helemaal correct is. "Mijn" manier laat ook zonder css een correcte navigatie list zien - met 2 aparte divs is het een stuk moeilijker logica te ontdekken...maar of dat nu het belangrijkste argument is...? Jullie mening graag!

[ Voor 15% gewijzigd door Reveller op 02-02-2005 17:26 ]