[css] .class als basis voor nieuwe class ? - Softwareontwikkeling

donderdag 9 september 2004 22:02

Acties:

huh ?

Topicstarter

Ik heb het volgende probleem: ik wil een knop maken van een <a> tag met border, plaatje en hover effecten enzo. Dat werkt goed. Als plaatje gebruik in een achtergrond die in niet repeteer. Dat scheelt een hoop <img> zooi in de html.

Nu wil ik dus a.menuButton als basis hebben en een .verwijder die daar van af stamt maar ik weet niet of dat kan. In mijn probeersels niet.

Als ik de style bij a.menuButton.verwijderen verplaats naar a.menuButton dan gebeurt er precies wat ik wil maar dan moet ik dat dus ook doen voor uploaden, bekijken, nieuwe etc maken terwijl alleen de achtergrond (icoontje) verandert

De verwijderen.gif en uploaden.gif zijn gewoon 16x16 transparente toolbar gifjes die je ook boven iedere posting van het forum vind (edit, quote etc)

Weet iemand of dit kan ?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>cssbutton</title>
        <style>
            a.menuButton, a.menuButton:visited
            {
                border:1px solid gray;
                margin-bottom:1px;
                color:black;
                font-weight:normal;
                font-family:verdana;
                font-size:12px;
                padding:2px 6px 4px 5px;
                text-align:center;
                width:125px;
                text-decoration:none;
                background-position:2px;
                background-color:lightgrey;
            }

            a.menuButton:hover
            {
                color:white;
            }

            a.menuButton:active
            {
                background-color:navy;
            }

            a.menuButton.verwijderen
            {
                background: url("verwijderen.gif") no-repeat center left;
                background-color:lightgrey;
            }

            a.menuButton.uploaden
            {
                background: url("uploaden.gif") no-repeat center left;
                background-color:lightgrey;
            }

        </style>

    </HEAD>
    <body>
        <a class="verwijderen" href="cssButton.html">test knop</a><br />
        <a class="uploaden" href="cssButton.html">test knop</a><br />
        <a class="menuButton.verwijderen" href="cssButton.html">test knop</a><br />
        <a class="menuButton.uploaden" href="cssButton.html">test knop</a><br />
        <a class="menuButton" href="cssButton.html">test knop</a><br />
        <a class="menuButton" href="cssButton.html">test knop</a><br />
    </body>
</HTML>

[ Voor 27% gewijzigd door shades op 09-09-2004 22:04 ]

https://k1600gt.nl

donderdag 9 september 2004 22:11

Acties:

BtM909

Watch out Guys...

Het mooie van een class is dat je meerdere values (spatie gescheiden) mag toevoegen

code:

1	<a class="menuButton verwijderen" href="cssButton.html">test knop</a>

edit:

En vervolgens aparte classes van je CSS items maken

Da's nl. de gehele gedachte achter overerving. Er is ergens ook een artikel beschikbaar over welk items / properties voorrang hebben. Moet die even opzoeken!

[ Voor 62% gewijzigd door BtM909 op 09-09-2004 22:13 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 9 september 2004 22:20

Acties:

shades

huh ?

Topicstarter

BtM909 schreef op 09 september 2004 @ 22:11:
Het mooie van een class is dat je meerdere values (spatie gescheiden) mag toevoegen
code:
1
<a class="menuButton verwijderen" href="cssButton.html">test knop</a>
edit:

En vervolgens aparte classes van je CSS items maken

Da's nl. de gehele gedachte achter overerving. Er is ergens ook een artikel beschikbaar over welk items / properties voorrang hebben. Moet die even opzoeken!

AH !
Helemaal te gek. Dit werkt gewoon
Heb dus ipv a.menuButton.verwijderen nu gewoon verwijderen en het werkt
$_/-\o_$ Zo simpel maar ja als je het niet weet zoek je je rot

Dat artikel in kwestie zou ik wel willen lezen...

https://k1600gt.nl

vrijdag 10 september 2004 09:54

Acties:

BtM909

Watch out Guys...

Was ff zoeken: wist niet meer hoe te omschrijven (specificity was het woord

)

http://www.w3.org/TR/REC-CSS2/cascade.html

En dan in 't bijzonder:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

[ Voor 7% gewijzigd door BtM909 op 10-09-2004 09:57 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 10 september 2004 10:27

Acties:

Verwijderd

BtM909 schreef op 09 september 2004 @ 22:11:
Het mooie van een class is dat je meerdere values (spatie gescheiden) mag toevoegen
code:
1
<a class="menuButton verwijderen" href="cssButton.html">test knop</a>
edit:

En vervolgens aparte classes van je CSS items maken

Da's nl. de gehele gedachte achter overerving. Er is ergens ook een artikel beschikbaar over welk items / properties voorrang hebben. Moet die even opzoeken!

Met als sidenote dat dus af en toe niet helemaal 100% werkt onder MSIE.

[ Voor 6% gewijzigd door Verwijderd op 10-09-2004 10:27 ]

vrijdag 10 september 2004 23:05

Acties:

shades

huh ?

Topicstarter

Verwijderd schreef op 10 september 2004 @ 10:27:
[...]

Met als sidenote dat dus af en toe niet helemaal 100% werkt onder MSIE.

Ja maar dat kan je testen enzo... maar wel ff handig dat het inderdaad soms niet werkt

BtM909 schreef op 10 september 2004 @ 09:54:
Was ff zoeken: wist niet meer hoe te omschrijven (specificity was het woord )

http://www.w3.org/TR/REC-CSS2/cascade.html

En dan in 't bijzonder:
http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

Handig die pagina, gelijk even geb'marked

https://k1600gt.nl