[CSS/HTML] Tabmenu

[imp4ct]

Goed, aangezien ik na een dikke 6 uur het zelf niet meer weet waar ik moet beginnen ga'k maar direct to the point wezen. Ik ben de afgelopen ... hmm 6 uur jah.. bezig met het maken van een tab menu.
Na veel ploeteren, knip en plak werk heb ik dan toch eindelijk iets bereikt, maar natuurlijk niet helemaal hetgeen wat ik zou willen.

Wat is nu het grote probleem.
'k Ga het uitleggen aan de hand van een tabmenu hier terug te vinden op tweakers.



Wanneer je op een knop gaat staan bij dit tabmenu, verdwijnt het lijntje onderaan die tab, heel mooi, maar bij mij lukt het dus voor geen meter.... In Firefox krijg ik het nog wel gedaan, maar in IE 7.0 wil hij gewoon NIET meewerken, mijn vraag is dus simpel... "hoe maak je in hemelsnaam nu bv zo'n tabmenu zoals hier terug te vinden op tweakers ?"

Alvast bedankt !

[Woudloper]

Wellicht kan je eens kijken bij de diverse oplossingen van Listamatic, daar zijn diverse CSS voorbeelden te vinden van op horizontaal gestylde lijsten.

[imp4ct]

Woudloper schreef op dinsdag 04 december 2007 @ 08:16:
Wellicht kan je eens kijken bij de diverse oplossingen van Listamatic, daar zijn diverse CSS voorbeelden te vinden van op horizontaal gestylde lijsten.

Fel bedankt, hier zal ik er wel mee uitgeraken. De CSS is geen probleem, maar 'k wil eindelijk eens goed begrijpen hoe het in elkaar steekt.

[MoietyMe]

Aan de gekartelde letters en de kleine foutjes in je plaatje neem ik aan dat je IE6 gebruikt?

iig, IE(6) kan geen :hover verwerken als deze op een ander element is geplaatst dan A. Aardig stom aangezien MS het zelf heeft bedacht.

Er zijn hier wel oplossingen voor (workarounds). Kijk daar ook eens naar.

[imp4ct]

Good Fella schreef op dinsdag 04 december 2007 @ 09:39:
Aan de gekartelde letters en de kleine foutjes in je plaatje neem ik aan dat je IE6 gebruikt?

Neen 'k gebruik IE 7 (enkel voor te testen) de images is gewoon een .gif foto, geen HTML ofoziets.

[MuisM4t]

heb je geen voorbeeldje van je code, hoe pak je het nu aan?

Je kunt ook eens zoeken op JS tabmenu of JS tabs en die dingen eens bekijken.

[ Voor 55% gewijzigd door MuisM4t op 04-12-2007 17:14 ]

[imp4ct]

't Is niet zo zeer "events" waar ik moeite mee heb. 't Is gewoon het "designen" in HTML dat maar niet wou lukken. 't Heeft vooral te maken met background-image(s) en position en van die toestanden in CSS waar ik waarschijnlijk fouten maak.

Met de url die'k bij de eerste reactie heb gekregen gaat het zeker lukken, t'is niet dat ik een leek ben in CSS of HTML, maar dit wou me gewoon maar niet lukken.

[Woudloper]

Voor wat betreft de techniek met afbeeldingen en horizontale tabs kan je ook nog even het artikel over 'sliding doors' lezen bij alistapart.

[imp4ct]

Woudloper schreef op woensdag 05 december 2007 @ 07:03:
Voor wat betreft de techniek met afbeeldingen en horizontale tabs kan je ook nog even het artikel over 'sliding doors' lezen bij alistapart.

Meer dan bekend, maar thx :-)

[Dima_2005]

Mogen we je code zien? Dan kan ik er correctie aan brengen, ik denk dat ik het probleem ken.

BTW:
bij de search van tweakers is het ook een combinatie van CSS en JS

Oftewel wat je ook kunt probere:

Bij de gewone:

code:

border-bottom: 1px solid #000000;

Bij hover en active.
Die active doe je vermoedelijk met javascript

code:

border-bottom: none;

[ Voor 69% gewijzigd door Dima_2005 op 06-12-2007 19:01 ]