Suche CSS Selektor

Jump to last post
drfuture

drfuture

Zeitreisender
Teammitglied
Registriert
14 Juli 2013
Beiträge
7.710
Ort
in der Zukunft
Hallo zusammen,
irgendwie komme ich auf keinen grünen Zweig :(

Ich möchte in diesem Codeabschnitt:

[src=html4strict]
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle">
</span>
<span class="rpText">
FAQ
</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink rpExpandable rpExpanded" href="#">
<span class="rpOut">
<span class="rpExpandHandle">
</span>
<span class="rpText">
Dienstleitungen
</span>
</span>
</a>
<div class="rpSlide" style="display:block;">
<ul class="rpGroup rpLevel1 " width: 100%;">
<li class="rpItem rpFirst">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>

<li class="rpItem">
<li class="rpItem">
<li class="rpItem">
<li class="rpItem rpLast">
</ul>
</div>
</li>
[/src]

das rpItem grün färben - allerdings nur das das kein rpSlide div hat!
Bzw. ginge auch rpOut der kein rpSlite auf selber höhe hat...

Bisher habe ich mit
[src=css]
a.rpExpandable {
background-color: #3b9e58 !important;
}[/src]
alle Elemente grün welche ein untermenü (das durch rpSlide anfänge) grün gefärbt
Nun sollen noch alle Elemente grün werden welche kein Untermenü haben...
Aber nicht die Untermenü-Elemente selber wie oben z.B. IT
Daher kann ich nicht einfach rpItem, rpOut oder rpText nehmen...

Den Code kann ich leider nicht verändern - der ist so wie er ist :(

--- [2013-10-29 10:49 CET] Automatisch zusammengeführter Beitrag ---

Edit:
Habe eben noch ein Problem festgestellt...
[src=css]span.rpText:hover{
margin-left: 4px !important;
}[/src]

Das funktioniert im FF fehlerfrei -im IE leider nicht :(
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #3
Hm, Ja eventuell könnte ich ein js einbinden -wäre jedenfalls einen Versuch wert. Könnte man damit die passenden Elemente identifiieren und z.B. eine eigene class verpassen? - von .js hab ich nicht wirklich eine Ahnung...
 
Wenn du ein Script einbinden kannst, dann würde ich dir das fix schreiben. Ist jQuery dort eingebunden?
 
  • Thread Starter Thread Starter
  • #5
Ich hatte an dem Template schon div. Änderungen gemacht - bei größeren änderungen wird das Template vom System dahinter - warum auch immer - nicht mehr korrekt geparsed, daher bin ich mir nicht sicher ob er das frisst... aber probieren würde ich es gerne ;)
Ist eine größere Software aus einer Mischung von c#/asp.net und Java die unter anderem auch eine Weboberfläche bietet, daher kann ich am ausgegebenen Code nichts ändern und auch nur geringe teile eines groben Templates ändern, den rest muss ich über den umständlichen Weg von außen überschreiben damit es so aussieht wie ich mir das vorstelle :D
 
Man kann das Script ggf. auch in schon existierende *.js Files packen, falls das hilft.
 
  • Thread Starter Thread Starter
  • #7
Also ich habe heute mal einiges an js-code-beispielen eingefügt und die Seite läd immer noch problemlos...
 
[src=html5]<!doctype html>
<html>
<head>
<style type="text/css">
a.rpExpandable, a.rpLink {
background-color: #3b9e58 !important;
}

ul.rpGroup > li > a {
background-color: #FFF !important;
}
</style>

</head>
<body>
<ul>

<!-- deine Vorgabe Anfang -->
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle">
</span>
<span class="rpText">
FAQ
</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink rpExpandable rpExpanded" href="#">
<span class="rpOut">
<span class="rpExpandHandle">
</span>
<span class="rpText">
Dienstleitungen
</span>
</span>
</a>
<div class="rpSlide" style="display:block;">
<ul class="rpGroup rpLevel1" style="width: 100%;">
<li class="rpItem rpFirst">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>
<li class="rpItem">
<a class="rpLink" href="#">
<span class="rpOut">
<span class="rpExpandHandle"></span>
<span class="rpText">IT</span>
</span>
</a>
</li>

<li class="rpItem">asd</li>
<li class="rpItem">asd</li>
<li class="rpItem">asd</li>
<li class="rpItem rpLast">asd</li>
</ul>
</div>
</li>
<!-- deine Vorgabe Ende -->

</ul>
</body>
</html>[/src]

Damit sollte das auch funktionieren.
Das erste färbt markiert dir alle Elemente grün, das zweite sollte dafür sorgen, dass Unterelemente (die erkennst du ja an dem ul.rpGroup) einen weißen Hintergrund bekommen. Natürlich heißt das, dass sie tatsächlich einen weißen hintergrund bekommen und nicht etwa gar keinen.

Ich hoffe ich habe damit dein Problem verstanden, wenn nicht machs ggf. durch eine Grafik deutlich..
Wenn JS aus der Seite verschwindet, leiste ich gerne Support :D
 
  • Thread Starter Thread Starter
  • #9
Thx, accC das ist ne klasse Idee...
Ging zwar erst nur im FF und nicht im IE9, aber nach einer adaption über einen 2. Selektor den das System schon benutzt - ging es nun.
Muss man erst mal drauf kommen :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben