Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Css class

glompie
10 antwoorden
  • Hi,

    Heeft iemand een idee hoe je classes gebruikt die uit meerdere losse woorden bestaan? Ik snap er geen hout meer van. Heb het volgende:
    <li class="item-131 deeper parent">

    En als ik die woorden met een punt ga verbinden kom ik op :

    [code:1:2365837912]
    .menu:hover ul li.item-131.deeper.parent a{
    background-image: url('../images
    ight.png') no-repeat right center;
    }[/code:1:2365837912]

    Ziet er mooi uit alleen het werkt niet. :cry:
    Het item nummer kan natuurlijk ook veranderen en moet er denk ik niet bij staan.
  • Met
    [code:1:7911f99165]<li class="item-131 deeper parent"> [/code:1:7911f99165]
    Geef je drie classes aan het element <li> namelijk item-131, deeper en parent

    met
    [code:1:7911f99165].menu:hover ul li.item-131.deeper.parent a[/code:1:7911f99165]
    Selecteer je een <a> element dat binnen een <li> staat die zowel de classes item-131, deeper en parent heeft, die op zijn beurt in een <ul> staat van een element met class 'menu' waarover op dat moment gehovered wordt.

    Je schrijft niet wat de bedoeling is, dus wat het zou moeten zijn kan ik ook niet zeggen.
    Overigens om bij je oorspronkelijke vraag te blijven, bij classes die uit meerdere woorden bestaan moet je de woorden verbinden met streepjes (dashes of underscores). Als je er spaties tussen gaat zetten worden ze als aparte classes beschouwd.
  • Bedankt voor je antwoord. Dan zal ik toch maar even de link geven van m'n site en menu.
    De bedoeling is om in het horizontale menu een pijltje naar rechts te maken op item 3 Sub4. Zulke wazige classes ben ik niet gewend dus 't zal mij benieuwen of dat ooit goed komt.
  • Volgens mij moet het hiermee lukken
    [code:1:4579beac45].menu li ul li.deeper.parent a
    {
    background-image: url('../images
    ight.png')
    }[/code:1:4579beac45]
    Je hebt trouwens ook een fout in je HTML code
    Op het einde van de regel:
    [code:1:4579beac45]
    <li class="item-130"><a href="/joomla/top-pagina-3/3-sub3">3 Sub3</a></li><li class="item-131 deeper parent"><a href="#">3 Sub4</a><ul>
    [/code:1:4579beac45]
    Die <ul> moet volgens mij een </ul> zijn, en daar moet zowel een </li> voor als achter.
    Het einde is dus:
    [code:1:4579beac45]…3 Sub4</a></li></ul></li>[/code:1:4579beac45]

    Verder heb ik het niet nagekeken, dus misschien heb je nog meer van die foutjes er in zitten.
  • Dankjewel! Het is al bijna goed. Heb nu 2 pijltjes teveel.

    Ik zie de fout niet hoor in de html. Zou ook vreemd zijn als dat fout zou zijn want dat is gewoon joomla core mainmenu. Ik heb er niks aan gedaan en zou trouwens zo snel niet eens weten waar ik dat moet veranderen.
    Met </a><ul><li> opent ie gewoon de nieuwe laag naar 3sub4B.
  • Klopt, ik heb me een beetje in de code brei verkeken :) Het zit toch goed.
    Waar staan die twee pijltjes teveel?
  • Op de 2 laatste menu-items: 3 sub4B en 3 sub4B2
    Dat is einde menu dus die horen geen pijlen te hebben.
  • Klopt ja, ik zie nu ook waarom. Je moet alleen de directe kinderen van li.deeper.parent hebben, niet de kleinkinderen.
    In dat geval zou je een direct child kunnen kiezen m.b.v. '>'
    Dus:

    [code:1:6481441388]
    .menu li ul li.deeper.parent > a
    {
    background-image: url('../images
    ight.png')
    }[/code:1:6481441388]
    Dit werkt overigens niet in IE6 en ouder. Die zullen nog steeds twee pijltjes zien, want die kennen die direct child selector niet.
  • Ik vind het knap. Hij werkt!
    Als ik meer tijd heb ga ik toch eens naar menu's kijken want dit had ik nooit geraden.
    Bedankt. :D


    Edit: zit ik toch nog met 1 ding en dat is de hover kleur in de laatste knoppen.

    Edit2: Nou die kon ik zelf dan nog. Een hele bevalling….:D
    [code:1:64c818fdb9]
    .menu :hover ul :hover ul li a:hover{background-color:#EFB6A1;}
    [/code:1:64c818fdb9]
  • Ik weet het niet zeker, maar in regel 31 van je CSS zie ik dit:
    [code:1:0da56dee87].menu :hover ul :hover ul li a{width:180px;padding:0;text-indent:30px;background-color:#EFB6A1;color:#000;} /*border-left:1px solid #E15A42;*/[/code:1:0da56dee87]
    Volgens mij is dat de boosdoener.
    Als je background-color:#EFB6A1; er uit haalt, of aanpast naar de gewenste kleur heb je kans dat het goed komt.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.