HTML tabjes m.b.v. lists

[gvanh]

Hallo!

Voor een beheeromgeving ben ik eens opnieuw aan het kijken naar de manier waarop tabjes ingericht kunnen worden. Ik heb in het verleden wel vaker met succes dat soort dingetjes gebouwd; ik was benieuwd of zoiets met behulp van lists kan, eigenlijk analoog aan dropdown menu's.

Nu ben ik een heel eind gekomen. Het enige dat ik niet voor elkaar krijg, is dat de tabcontainer - waarin de <ul> of <ol> wordt geladen - meegroeit met de hoogte van de inhoud van de tab. Ik zou dus de hoogte van de tabcontainer wel hard kunnen instellen, en dan werkt het in de huidige opzet. Maar het is natuurlijk mooier als de boel wel gewoon meegroeit.

Ik heb een test-pagina neergezet op http://beta.thirdwave.nl/tabtest.html. Het is daarin dus de bedoeling dat het rode vlak meegroeit met de tabjes die erin staan.

Op zich is het logisch hoor, dat het nu niet gebeurt, aangezien het "li > div.tabcontent" element absoluut gepositioneerd staat. Maar ik krijg het niet voor elkaar om het meegroeien op de één of andere manier toch voor elkaar te krijgen.

Ideeën iemand?

[Verwijderd]

Probeer is een float op de .tabcontainer.

[gvanh]

Ja, had ik ook al geprobeerd.

Dan wordt hij zo (zie link naar voorbeeldpagina).

[MueR]

Een element onderin de .tabcontainer zetten met clear:both;

[Flowmo]

En position:absolute dan natuurlijk uitzetten.

Overflow:hidden op die rode container wil ook wel helpen. Dan heb je ook geen clearing divs nodig (behalve voor IE6)

[ Voor 56% gewijzigd door Flowmo op 29-09-2010 15:49 ]

[posttoast]

MueR schreef op woensdag 29 september 2010 @ 15:44:
Een element onderin de .tabcontainer zetten met clear:both;

Bah Een extra element puur en alleen om iets te clearen is nou niet bepaald semantisch correct. Dit werkt ook:

Cascading Stylesheet:

.tabcontainer:after{
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

En dan in je IE6 stylesheet .tabcontainer een hoogte van 1% geven, en in je IE7 stylesheet .tabcontainer "display: inline-block" geven.

Dan heb je geen aparte elementen nodig om de boel te clearen.

[MoietyMe]

Cascading Stylesheet:

.tabcontainer:after {
    content:"\0000a0";
    display:block;
    height:0;
    clear:both; 
    visibility:hidden;
}

Lost je probleem op zonder nutteloze html elementen.

Damn you posttoast Die van mij gebruikt een spatie i.p.v. een punt.

[ Voor 17% gewijzigd door MoietyMe op 29-09-2010 15:53 ]

[posttoast]

Good Fella schreef op woensdag 29 september 2010 @ 15:51:

Cascading Stylesheet:

.tabcontainer:after {
    content:"\0000a0";
    display:block;
    height:0;
    clear:both; 
    visibility:hidden;
}

Lost je probleem op zonder nutteloze html elementen.

Damn you posttoast Die van mij gebruikt een spatie i.p.v. een punt.

[gvanh]

Flowmo schreef op woensdag 29 september 2010 @ 15:48:
En position:absolute dan natuurlijk uitzetten.

Overflow:hidden op die rode container wil ook wel helpen. Dan heb je ook geen clearing divs nodig (behalve voor IE6)

Ik heb nu de "position: absolute" weggehaald voor de div.tabcontent.
Maar dan doen de tabs qua weergave niet meer wat ik wil.
De tabcontainer groeit nu wel braaf mee ...

[gvanh]

posttoast schreef op woensdag 29 september 2010 @ 15:48:
[...]

Cascading Stylesheet:

.tabcontainer:after{
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Dan heb je geen aparte elementen nodig om de boel te clearen.

Die is sowieso nuttig om te weten ... dank daarvoor.

Alleen zoek ik nu dan dus nog een manier om de tabcontent wel over de volledige breedte te krijgen, maar dan zonder position: absolute.

[Verwijderd]

Een vaste breedte meegeven aan de li.

[MueR]

posttoast schreef op woensdag 29 september 2010 @ 15:48:
[...]

Bah Een extra element puur en alleen om iets te clearen is nou niet bepaald semantisch correct.

Tja, divs binnen een a ook niet.

HTML:

<div class="tabcontainer">
  <ul class="tablist">
    <li><a href="#tab:tab1">Tab 1</a></li>
    <li><a href="#tab:tab2">Tab 2</a></li>
  </ul>
  <div id="tab1"></div>
  <div id="tab2"></div>
</div>

Veel netter

[gvanh]

Verwijderd schreef op woensdag 29 september 2010 @ 16:24:
Een vaste breedte meegeven aan de li.

Hoezo dat? Ik heb het nu gedaan, maar daar schiet je toch niets mee op?
Dan is de content nog steeds zo smal als de <li> waar hij in genest is.
De content moet uiteraard zo breed als de volledige <ol>

(Maar dat had je zeker wel begrepen )

[gvanh]

MueR schreef op woensdag 29 september 2010 @ 16:26:
[...]

Tja, divs binnen een a ook niet.

HTML:

<div class="tabcontainer">
  <ul class="tablist">
    <li><a href="#tab:tab1">Tab 1</a></li>
    <li><a href="#tab:tab2">Tab 2</a></li>
  </ul>
  <div id="tab1"></div>
  <div id="tab2"></div>
</div>

Veel netter

Ja, ik snap dat dat een mogelijkheid is.
Overigens staat bij mij de <div> binnen de <li>, niet binnen de <a>.
Maar het is qua css en javascript zoveel handiger als de <div> binnen de <li> staat.
Dat was natuurlijk ook juist het experiment ;-)

[MoietyMe]

Ik verveelde me dus heb even een voorbeeld gemaakt (zonder JS): Tabs.

CSS is misschien niet super netjes, maar nog redelijk. Werkt in alle veel gebruikte browsers.*

* Alleen IE6 buged een beetje met de breedte van de <li>'s

Dat van MueR is wel beter en makkelijker te maken. Dat werkt ook gegarandeerd in elke beetje normale browser.

[ Voor 17% gewijzigd door MoietyMe op 29-09-2010 16:54 ]

[gvanh]

Hoe werkt dat dan overigens met die hrefs die verwijzen naar #tab:tab1 etc.
Ik ken die notatie niet.
Het verwijst naar de id's van de tabcontent <div>'s, dat snap ik.
Maar hoe zou je dat met JavaScript kunnen oppakken?
Bijvoorbeeld middels jquery?

[MueR]

Nou ja, bijvoorbeeld met window.location.hash in combinatie met de substring functie.

[gvanh]

Oh ok ... ik dacht dat er misschien iets magisch aan was.

Ik gebruik nu:

JavaScript:

  var activeTabClass = eventSrc.getAttribute('href').split(':')[1] || 'unknown';

Dat werkt prima.

Oh ... ik zie wel dat ik Explorer nog even moet corrigeren.
Die maakt er automatisch http://blablabla van in de href.
Grrr ... waar bemoeit ie zich weer mee.

[ Voor 29% gewijzigd door gvanh op 29-09-2010 17:28 . Reden: update ]