Toon posts:

HTML tabjes m.b.v. lists

Pagina: 1
Acties:

Onderwerpen


  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
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?

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
Ja, had ik ook al geprobeerd.

Dan wordt hij zo (zie link naar voorbeeldpagina).

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
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
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
posttoast schreef op woensdag 29 september 2010 @ 15:48:
[...]
Cascading Stylesheet:
1
2
3
4
5
6
7
.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.

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
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 :P )

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

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

Tja, divs binnen een a ook niet.
HTML:
1
2
3
4
5
6
7
8
<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 :P
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 ;-)

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

Topicstarter
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?

  • gvanh
  • Registratie: april 2003
  • Laatst online: 10-07 12:31

gvanh

Webdeveloper

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

Ik gebruik nu:

JavaScript:
1
  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]

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee