[CSS] Met CSS naar CSS / ID / CLASS verwijzingen - Softwareontwikkeling

zondag 9 oktober 2005 14:35

Acties:

Es gibt keine kleinen Punkte!

Topicstarter

Goedenmiddag allemaal,

Ik ben nog steeds trotse gebruiker van css (en momenteel zijn er andere zaken bijgekomen zodat ik behalve een functionele ook "mooie" sites kan maken

). Dus graag wil ik iedereen die mij met mijn vraagstukken heeft geholpen nogmaals bedanken.

Maar nu naar mijn vraag. De titel zegt niet precies wat ik bedoel, dus voor het gemak het volgende voorbeeld:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Oefening</title>
    <style type="text/css">
    a:hover
    {
    #subitem
      {
      visibility: hidden
      }
    }
    </style>
  </head>
  <body>
    <ul>
      <li>item 1</li>
      <li><a href="#" title="item 2">item 2</a>
        <ul id="subitem">
          <li>sub-item 1</li>
          <li>sub-item 2</li>
          <li>sub-item 3</li>
          <li>sub-item 4</li>
          <li>sub-item 5</li>
       </ul>
    </ul>
  </body>
</html>

Mijn idee moge duidelijk zijn (zie style gedeelte). Ik zou binnen css delen graag verwijzen naar een ander id / of class of zelfs andere css delen (indien mogelijk). Want dit is in de huidige vorm niet mogelijk (tenzij ik het a element en ul samenvoeg). Even voor de duidelijk het code voorbeeld is hier niet van belang (css menu's zijn namelijk een veel gestelde vraag, maar hier heb ik al meerdere werkende oplossingen van).

Ik ben zoals gewoonlijk druk aan het googlen, got-en en de w3 site aan het doorzoeken, maar heb nog niets gevonden. Dus graag jullie mening / ervaring hierover (is wat ik wil überhaupt mogelijk?).

Ein kleiner Punkt in einer grossen Welt

zondag 9 oktober 2005 14:40

Acties:

Scott

Ik ben, dus ik tweak

Zoeken met de zoekwoorden 'CSS' en 'selector' zouden wat resultaten moeten opleveren, maar als je niet weet dat zoiets een selector heet, heb je daar niets aan

Op deze pagina kom je een heel eind (ff naar beneden scrollen, dan staat er een tabelletje met de info die je zoekt)

edit:
Gaat het er om dat je met het hoveren van de a-tag, de ul niet meer ziet ? Want dat is AFAIK niet mogelijk met CSS

[ Voor 20% gewijzigd door Scott op 09-10-2005 14:42 ]

zondag 9 oktober 2005 14:52

Acties:

drm

f0pc0dert

Gaat het er om dat je met het hoveren van de a-tag, de ul niet meer ziet ? Want dat is AFAIK niet mogelijk met CSS

Dat is wel mogelijk met CSS, de ondersteuning ervan is alleen nog niet zo geweldig

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

zondag 9 oktober 2005 14:57

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Topicstarter

ScottB schreef op zondag 09 oktober 2005 @ 14:40:

edit:
Gaat het er om dat je met het hoveren van de a-tag, de ul niet meer ziet ? Want dat is AFAIK niet mogelijk met CSS

Neen, zoals ik zou die code was zomaar iets wat me zomaar te binnen schoot (weet trouwens wel een beetje wat selectors zijn

). Mijn vraag zit hem hier (wederom een voorbeeld van mijn idee)

code:

a:hover
{
 #subitem
 {
 deze code
 }
}

Een directe verwijzing naar een ID / CLASS. Want zoals je in dit voorbeeld kunt zien is inheritance niet mogelijk. Of mijn verwijzing of code fout is, is bij mijn vraag niet relevant, maar het idee wat ik had is dat mogelijk.

Dus ipv

code:

ul li li
{
 code
}
wordt
ul li li
{
 alleen id vermelden
}

drm schreef op zondag 09 oktober 2005 @ 14:52:
[...]
Dat is wel mogelijk met CSS, de ondersteuning ervan is alleen nog niet zo geweldig

*proest* veelal IE *proest* (gebruik het veelvuldig dus mag flamen

)

[ Voor 15% gewijzigd door DerKleinePunkt op 09-10-2005 15:12 ]

Ein kleiner Punkt in einer grossen Welt

maandag 10 oktober 2005 22:25

Acties:

DerKleinePunkt

Es gibt keine kleinen Punkte!

Topicstarter

Niemand een idee of suggestie?

Ein kleiner Punkt in einer grossen Welt

maandag 10 oktober 2005 22:35

Acties:

sjolmers

het leven is té kort, geniet!

Je kunt toch het volgende doen, heb dit even uit mijn site gecopypaste
in je CSS bestand:

code:

#sidebar {
    border-top: 5px solid #e9e9e9;
    color: #e4e4e4;
    float: right;
    width: 200px;
    margin-left: 20px;
    background: #676767;
}

#sidebar #submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sidebar #submenu #subsub {
    list-style: none;
    margin: 0;
    padding:0;
    font-size: 12px;
    padding-left: 25px;
}

#sidebar #submenu #subcurrent {
    background: #fff;
    color: #333;
    letter-spacing: 1px;
}

#sidebar #submenu #subsub #subcurrent {
    background: #fff;
    color: #333;
    letter-spacing: 1px;
}

#sidebar #submenu a {
    color: #e6e6e6;
    display: block;
    height: 25px;
    padding-left: 10px;
    text-decoration: none;
}

#sidebar #submenu #subsub a {
    color: #e6e6e6;
    display: block;
    height: 25px;
    padding-left: 10px;
    text-decoration: none;
}

#sidebar #submenu a:hover {
    background: #e0e0e0;
    color: #666;
}

#sidebar #submenu #subsub a:hover {
    background: #3B77B9;
    color: #fff;
}

#sidebar h2 {
    color: #fff;
    font-size: 23px;
    margin: 0 4px 5px;
    padding-top: 3px;
    text-align: center;
}

#sidebar p {
    margin: 0;
    margin-left: 9px;
}

#sidebar p a, #sidebar li a {
    color: #fff;
}

#sidebar ul {
    list-style: square;
    margin-left: 30px;
    margin-top: 0;
    padding: 0;
}

#testimonial {
    background: #eee;
    padding: 1px 10px;
}

en in je site dan zoiets:

code:

<div id="sidebar">
<h2>titel</h2>
<ul id="submenu">
    <li><a id="subcurrent" href="" title="">naam</a></li>
    <ul id="subsub">
    <li><a href="#basis" title="ADR gevaarlijke stoffen">Basis opleiding</a></li>
    <li><a id="subcurrent" href="#tank" title="ADR gevaarlijke stoffen">Specialisatie Tank</a></li>
    <li><a href="#kl1" title="ADR gevaarlijke stoffen">Specialisatie Klasse 1</a></li>
    <li><a href="#kl7" title="ADR gevaarlijke stoffen">Specialisatie Klasse 7</a></li>
    <li><a href="#verlening" title="ADR gevaarlijke stoffen">Verlenings Cursus</a></li>
    <li><a href="#route" title="ADR gevaarlijke stoffen">Route Beschrijving</a></li>
    <li><a href="/adr/docs/planning_2005.doc" title="ADR gevaarlijke stoffen" target="_blank">Jaarplanning ADR </a></li>
    </ul>
    <li><a href="" title="Vakopleiding Beroepsgoederenvervoer">Vakopleiding </a></li>
    <li><a href="/opleidingen/vca" title="VCA opleidingen">VCA</a></li>
    <li><a href="/opleidingen/bhv" title="Bedrijfshulpverlener">BHV</a></li>
    <li><a href="/opleidingen/heftruck" title="Heftruck">Heftruck</a></li>
    <li><a href="/opleidingen/preventie" title="preventie medewerker">Preventie medewerker</a></li>
</ul>
</div>

[ Voor 78% gewijzigd door sjolmers op 10-10-2005 22:41 ]

adr opleidingen en meer adr opleidingen

maandag 10 oktober 2005 22:43

Acties:

b19a

sjolmers schreef op maandag 10 oktober 2005 @ 22:35:
Je kunt toch het volgende doen, heb dit even uit mijn site gecopypaste
in je CSS bestand:

Wat dus hierboven meerdere keren staat vermeld.

Wat de TS wil is momenteel niet mogelijk binnen CSS -> Binnen een style-list een verwijzing naar een bepaald ID/Class geven.

De TS wil vanuit de ene style-list een verwijzing aanmaken naar de style-list van een ander element, waarbij hij niet weet wat de relatie (parent-child) is, sterker nog dat er totaal geen relatie is behalve een gedeeld root-element.