10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)
  • Q:
    Bijdrager
    rnbprod

    CSS knoppen vraag

    Hallo allemaal,

    Ik zit met een probleem. Ik heb de CSS voor de volgende website gemaakt die binnenkort gelanceerd wordt, maar de knoppen werken niet.

    Als basis is de code van http://www.alistapart.com/articles/slidingdoors gebruikt. Nu wil ik dat er lampjes gaan branden als de pagina onder de knop actief is. Dat moet gebeuren doordat hij een ander achtergrondje krijgt.

    Maar zoals je in de source-code kunt zien (http://karkas.nl/drupal/themes/jamroom/buttons.css) werkt dit niet, je kunt niet EN het ID ‘current’ EN het ID ‘first’ of ‘last’ meegeven wat ervoor zorgt dat de juiste afgeronde hoek wordt weergegeven.

    Ik heb van current en first en last ipv ID’s CLASSES gemaakt, maar dit werkt voor geen meter. Ik snap er nu even niks meer van. Wie oh wie met verstand van CSS zou er ff naar willen kijken?

    Bijdrager
    Doodle

    heb nog niet naar de source gekeken, maar kun je niet gewoon de id current uitbreiden zodat ie ook ronde hoeken weergeeft?

    Bijdrager
    kaydie

    Waarschijnlijk heb je er geen rekening mee gehouden dat een id zwaarder telt dan een class selector

    Wat je dus zal moeten doen is iets als:
    [code:1:41cabfd06e]#button #first.current, #button #last.current{
    background-color:#F00;
    }[/code:1:41cabfd06e]Wat je ook kan doen is gebruik maken van de: !important rule, om deze zwaarder te laten gelden.

    Bijdrager
    rvanheukelum

    Zoiets als hier? Dat zijn ook CSS rollovers.

    Bijdrager
    rnbprod

    Vast bedankt voor jullie reacties. Ik had een spatie tussen #button en .current gezet, misschien dat dat het probleem is. Maar ik ga vandaag nog even verder proberen.

    Vergeten de website te posten waar het om gaat: http://www.thejamroom.nl

    Bijdrager
    rnbprod
    ”R_van_Heukelum”

    Zoiets als hier? Dat zijn ook CSS rollovers.

    Klopt, maar deze zien er allemaal hetzelfde uit, geen eerste en laatste button.

    Bijdrager
    kaydie

    Probeer het zo eens…

    [code:1:29036449fe]#buttons li {
    float:left;
    margin:0;
    padding:0;
    background:url("dbuttonbg.jpg") no-repeat left top;
    }

    #buttons li#first {
    background-image: url("dbuttonbg-l.jpg");
    }

    #buttons li#last {
    background-image: url("dbuttonbg-r.jpg");
    }

    #buttons li:hover,
    #buttons li.current {
    background-position: 0% -59px;
    }
    [/code:1:29036449fe]

    Bijdrager
    Jakko Westerbeke
    ”rnbprod”

    Vast bedankt voor jullie reacties. Ik had een spatie tussen #button en .current gezet, misschien dat dat het probleem is.

    Zo bedoel je?
    [code:1:02875e9e5a]#button .current {stijl-spul hier}[/code:1:02875e9e5a]
    ?

    Dat maakt inderdaad nogal verschil. Dat betekent: deze regels gelden voor alle elementen met id=”button” en voor alle elementen met class=”current”. Zonder die spatie betekent het echter: deze regels gelden voor de elementen die zowel id=”button” als class=”current” hebben.

    Waarbij ik moet zeggen dat die laatste methode eigenlijk overbodig is: je mag op een HTML-pagina namelijk niet meer dan eens dezelfde id gebruiken, en dus zal een CSS-definitie voor een item met # toch maar voor één element gelden. Er nog eens extra een class bij zetten is dus overbodig, want die classes zijn er nou net om elementen die anders hetzelfde zijn, andere stijlen te kunnen geven — <div class=”foo”> en <div class=”bar”> zorgen ervoor dat beide div’s anders eruit kunnen zien, maar van <div id=”foo”> mag er toch maar eentje zijn.

    Bijdrager
    kaydie
    ”Jakko

    Dat betekent: deze regels gelden voor alle elementen met id=”button” en voor alle elementen met class=”current”. Zonder die spatie betekent het echter: deze regels gelden voor de elementen die zowel id=”button” als class=”current” hebben.

    Niet helemaal…

    [code:1:084e78036f]#button, .current {stijl-spul hier}[/code:1:084e78036f]Zo hebben we het over alle elementen met id button als ook alle elementen met class current (let op de komma separator),

    [code:1:084e78036f]#button .current {stijl-spul hier}[/code:1:084e78036f]zo hebben we het over elementen met class .current die vallen binnen het element met het id button

    [code:1:084e78036f]#button.current {stijl-spul hier}[/code:1:084e78036f]en zo hebben we het over één element met zowel id button als class current.

    Bijdrager
    Jakko Westerbeke

    Je hebt gelijk, ik was even in de war:)

10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.