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?

  • mike.stijlloos
  • Registratie: september 2010
  • Laatst online: 15-10-2018
Probeer is een float op de .tabcontainer.

  • 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).

  • MueR
  • Registratie: januari 2004
  • Laatst online: 00:51

MueR

Moderator Devschuur®

is niet lief

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

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • Flowmo
  • Registratie: november 2002
  • Laatst online: 10-09 12:02

Flowmo

iframe is my middle name

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
  • Registratie: april 2000
  • Laatst online: 23:57
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:
1
2
3
4
5
6
7
.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.

omniscale.nl


  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 16-09 20:33

MoietyMe

zij/haar

Cascading Stylesheet:
1
2
3
4
5
6
7
.tabcontainer:after {
    content:"\0000a0";
    display:block;
    height:0;
    clear:both; 
    visibility:hidden;
}


Lost je probleem op zonder nutteloze html elementen.

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

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


  • posttoast
  • Registratie: april 2000
  • Laatst online: 23:57
Good Fella schreef op woensdag 29 september 2010 @ 15:51:
Cascading Stylesheet:
1
2
3
4
5
6
7
.tabcontainer:after {
    content:"\0000a0";
    display:block;
    height:0;
    clear:both; 
    visibility:hidden;
}


Lost je probleem op zonder nutteloze html elementen.

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

omniscale.nl


  • 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.

  • mike.stijlloos
  • Registratie: september 2010
  • Laatst online: 15-10-2018
Een vaste breedte meegeven aan de li.

  • MueR
  • Registratie: januari 2004
  • Laatst online: 00:51

MueR

Moderator Devschuur®

is niet lief

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:
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

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • 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 ;-)

  • MoietyMe
  • Registratie: juli 2003
  • Laatst online: 16-09 20:33

MoietyMe

zij/haar

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

  • MueR
  • Registratie: januari 2004
  • Laatst online: 00:51

MueR

Moderator Devschuur®

is niet lief

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

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • 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