Opmaak - Accordeon in accordeon

Status
Niet open voor verdere reacties.
V

VOC Brasschaat

Gebruiker
Lid geworden
8 dec 2008
Berichten
28
Zo, ik probeer een overzichtelijk geheel te maken met deze accordeon's. Daarom wou ik in de eerste accordeon de tag een andere kleur geven dan de tag van de 2de accordeon. Nu is het probleem dat die stylesheets met elkaar gelinkt zijn. Dus als ik de kleur bij de "ene" veranderd, veranderd het ook bij de andere.... grrr !?

ook nog een klein vraagje over de hoogte van die dingen, ik krijg nu zo'n scroll-balk omdat de inhoud waarschijnlijk iets te groot is. Is daar iets aan te doen om dat ding passend te krijgen? (ik heb height:auto; staan).

Hoe ik het nu heb maakt het mss iets duidelijker:
http://www.voc-brasschaat.be/PHP/index_dieren.php
 
Om het passend te maken zul je de width aan moeten passen, niet de height :)

Een andere kleur kan wel, dat hij nu beide aanpast komt omdat je voor beide dezelfde class gebruikt.

Als je alles van "MenuBarItemSubmenu" kopieert, plakt en hernoemt naar "MenuBarItemSubmenu2" dan kun je die aanpassen voor je 2e menu :)
HTML: 
 <li><a class="MenuBarItemSubmenu" href="#">Het Centrum</a>
        <ul>
          <li><a class="MenuBarItemSubmenu2" href="#">De kooien</a>
 
Tha Devil zei:
Om het passend te maken zul je de width aan moeten passen, niet de height :)

Een andere kleur kan wel, dat hij nu beide aanpast komt omdat je voor beide dezelfde class gebruikt.

Als je alles van "MenuBarItemSubmenu" kopieert, plakt en hernoemt naar "MenuBarItemSubmenu2" dan kun je die aanpassen voor je 2e menu :)
HTML: 
 <li><a class="MenuBarItemSubmenu" href="#">Het Centrum</a>
        <ul>
          <li><a class="MenuBarItemSubmenu2" href="#">De kooien</a>
Klik om te vergroten...

Owké; alles heeft al een appart kleurtje :thumb:...
maar met die width aan te passen heb ik nog meer balk gekregen... oohjee :confused: help? :o
 
Ah ik merk dat ik het verkeerde item heb zitten bekijken qua code.
Mijn bovenstaande code heeft betrekking op het "gewone" menu, niet helemaal de bedoeling maar ik begrijp dat je de essentie eruit begrepen hebt.

Even gauw gekeken denk ik dat je in accordion1.css moet zijn om de witdth (en eventueel height) aan te passen. Hij staat nu op 200.

Ik zou wel aanraden om achter de getallen een eenheid te zetten, in dit geval het aantal pixels dus dan wordt het 200px
 
Tha Devil zei:
Ah ik merk dat ik het verkeerde item heb zitten bekijken qua code.
Mijn bovenstaande code heeft betrekking op het "gewone" menu, niet helemaal de bedoeling maar ik begrijp dat je de essentie eruit begrepen hebt.

Even gauw gekeken denk ik dat je in accordion1.css moet zijn om de witdth (en eventueel height) aan te passen. Hij staat nu op 200.

Ik zou wel aanraden om achter de getallen een eenheid te zetten, in dit geval het aantal pixels dus dan wordt het 200px
Klik om te vergroten...

oef, nog een stapje verder de goede richting uit.:cool:

width bij spry vertical aangepast (op 195px, de kolom was maar 200px breed)
height van de accordion heb ik 100% gemaakt... en nu zijn die scroll bars al verdwenen.

Het volgende 'probleem': als ik de uilen aanklik, dan komt die kader voor de tab "zoogdieren" te hangen... euh, en nu?!

(alvast bedankt voor je snelle antwoorden :love:)
 
Het over zoogdieren "hangen" krijg ik niet gereproduceerd (Bekijk hier de site in Safari)

Toch zie ik nog steeds scrollbars.
Bekijk dus alle stijl-element die bij de accordions horen en controleer die op de width.
Vaak is het voldoende om het buitenste element aan te passen.
In dit simpele voorbeeld is dat dus de stijl van "buiten"
HTML: 
<div class="buiten">
 <div class="eerste">
  <div class="tweede">
  text
  </div>
 </div>
</div>

Verder een dringende opmerking over je indeling qua code.

Een HTML-document mag niet meer dan eenmaal een <html>, <title>, <head> en <body> bevatten.

Dit is de basis-indeling welke elk document moet bevatten is:
HTML: 
<html>
<head>
 <title>Hier de titel van je pagina</title>
<!-- 
Hier ook al je <script>, <link> en <style> elementen plaatsen
--!>
</head>
<body>
En hier alle ander codes
</body>
</html>
Ik hoop dat de structuur zo wat duidelijk is.
 
mmm... de opmaak zit nu redelijk snor denk ik? Maar ik krijg die verrekte scrolbars maar niet weg.

ik heb bij beide waardes nu al 95% ingevuld... maar dat helpt ook niet. Geen idee wat ik daarvoor nog anders kan gebruiken?

het gekke eraan is... dat het bij de ene wel weg is, en bij de andere niet (hier dan toch).
 
VOC Brasschaat zei:
mmm... de opmaak zit nu redelijk snor denk ik? Maar ik krijg die verrekte scrolbars maar niet weg.

ik heb bij beide waardes nu al 95% ingevuld... maar dat helpt ook niet. Geen idee wat ik daarvoor nog anders kan gebruiken?

het gekke eraan is... dat het bij de ene wel weg is, en bij de andere niet (hier dan toch).
Klik om te vergroten...


blijkbaar hielp dat toch niet, het zou bij iemand anders nog steeds met scrollbars worden weergegeven. Enig idee wat ik dan juist hoe moet instellen?

EDIT: als't goed is, zou het nu wel weg moeten zijn. Kan jij ook nog ff controleren aub?

oplossing; http://web.uvic.ca/akeller/pw401/howto/spry_accordion_kill_scrollbars_HT.html (ik heb de laatste puntjes wel weggelaten, enkel heigt gedelete en "hidden".

weer een stapje verder de goede richting uit !! :)
 
Laatst bewerkt:
Nog een klein vraagje over de opmaak van die accordeon. Als ik nu een link aanklik in die accordeon word deze ook opnieuw geladen. Daardoor komt altijd de eerste tab weer open te staan. Valt dat op te lossen met 1 of andere instelling?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan