css verständniss problem

[Diskordier]

Hallo Leute ich hab da ein kleines css problem.

Es geht um eine auswahl die durch eine funktion und einer sql abfrage als link erstellt wird.

Da hätten wir mal den html teil

[src=php]<div class="anime-index">
<?=make_index("index.php?site=streams&type=$type&list=%l&filter=%f", True, $subfilter)?>
</div>[/src]

dann die funktion

[src=php]

function make_index($link = False, $transform = False, $subfilter = False){
if ($subfilter) {

$return .= "\t<span class=\"border all\">\n";

$c = 'seen';
$s = (@$_GET['filter'] == $c) ? 'selected' : '';
$href = str_replace(['%l', '%f'], [@$_GET['list'], $c], $link);
$return .= "\t\t<a class=\"subfilter $s\" href=\"$href\">Bereits Gesehen</a>\n";
}

}
[/src]

dann noch der css teil

[src=css]#streams-container .anime-index a{
color: #f7446e;
}[/src]

Das sieht dann so aus



so nun würde ich gerne da ein wenig css einfügen mit einem mulibackground

dazu würd eich bei meiner function diese folgendermasse abändern

[src=php]$return .= "\t\t<a class=\"subfilter .finiwatch $s\" href=\"$href\">Bereits Gesehen</a>\n";[/src]

dies wäre dann mein css

[src=css]#streams-container .anime-index a .subfilter {
margin-right: 130px;
margin-left: 130px;
width: 145px;
height: 145px;
display: inline-block;
position: relative;
line-height: 145px;
background-size: auto auto, auto auto;
background-color: #eaeaea;
background-image: url('../img/Eye.png'), -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
background-image: url('../img/Eye.png'), -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url('../img/Eye.png'), -moz-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url('../img/Eye.png'), -ms-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url('../img/Eye.png'), -o-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url('../img/Eye.png'), linear-gradient(top, #f6f6f6, #eaeaea);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}

#streams-container .anime-index a .subfilter .finiwatch:hover{
background-position: -160px -158px, 0 0;
}


[/src]

Leider funktioniert das nicht und ich weiss nicht warum er dieses css nicht übernimmt.

Hat wer von euch eine Idee ?

Vielen Dank für eure Hilfe

 

[Timon3]

Der Klassenname darf im HTML keinen Punkt vor sich haben.

 

[Diskordier]

Danke also meinst du es müssste so sein ?

Weil da wird das css imme rnoch nicht verwendet

[src=php]$return .= "\t\t<a class=\"subfilter finiwatch $s\" href=\"$href\">Bereits Gesehen</a>\n";[/src]

 

[werner]

Schau dir mal im Browser an, was du denn ausgespuckt bekommst. Sprich den geparsten Code.

 

[Diskordier]

Also wenn ich f12 drücke und mir das ganze anschaue ja dann wird das so zurück geben, aber das css wird nicht angewendet. Aber die classe = subfilter finiwatch wird erzeugt mit dem link und dem text.

[src=php]<div id="streams-container">

<div class="anime-index">
<nav class="index">
<span style="transform: rotate(10deg) translateY(0px)" class="border "><a href="index.php?site=streams&type=anime&list=Z&filter=">Z</a></span>
<span class="border all">
<a class="subfilter finiwatch" href="index.php?site=streams&type=anime&list=A&filter=seen">Bereits Gesehen</a>
<a class="subfilter notwatch" href="index.php?site=streams&type=anime&list=A&filter=unseen">Noch nicht Gesehen</a>
<a class="subfilter startwatch" href="index.php?site=streams&type=anime&list=A&filter=watching">Gerade am Schauen</a>
<a class="subfilter breakwatch" href="index.php?site=streams&type=anime&list=A&filter=break">Abgebrochen</a>
<br><a class="all" href="index.php?site=streams&type=anime&list=&filter=">Gesamte Liste</a>
</span>
</nav>

</div>[/src]

 

[Rakorium-M]

Versuchs mal damit (kein Leerzeichen zwischen a, subfilter und finiwatch):
[src=css]#streams-container .anime-index a.subfilter.finiwatch:hover{
background-position: -160px -158px, 0 0;
}[/src]

Durch Leerzeichen getrennte Selektoren bedeuten, dass der Style auf passende Unter-Elementen angewandt wird. Also auf Elemente mit der Klasse "finiwatch", die sich in einem Element der Klasse "subfilter" befinden, das sich in einem Link befindet.
Ohne Leerzeichen beziehen sich die Selektoren auf das selbe Element: alle Links mit den Klassen "subfilter" und "finiwatch".

 

[Diskordier]

Hei super so weit hat das gewirkt vielen Dank auch , nur das bevore pseude element wird nicht übernommen.

Waran kann das liegen?

Der css Code hab ich mir zuerst mit nodepad zusammen gebastelt so das er funktionier hat.





Ich poste am besten mal den ganzen css code der anstellle des Textes dann sein soll.
so das Ihr versteht wie ich das genau nutzen will

[src=css]<!DOCTYPE html>
<html>
<head>
<style>

.subfilter{
margin-top: 160px;
}

.subfilter a {
margin-right: 130px;
margin-left: 130px;
width: 145px;
height: 145px;
display: inline-block;
position: relative;
line-height: 145px;
background-size: auto auto, auto auto;
background-color: #eaeaea;
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -o-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), linear-gradient(top, #f6f6f6, #eaeaea);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}

.subfilter a.finiwatch{
background-position: 0px -172px, 0 0;
}

.subfilter a.notwatch{
background-position: 0px -330px, 0 0;
}

.subfilter a.startwatch{
background-position: 0px -14px, 0 0;
}

.subfilter a.breakwatch{
background-position: 0px 145px, 0 0;
}



.subfilter a:active {
top: 1px;
}


.subfilter a::before{
content: '';
position: absolute;
z-index: -1;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}

.subfilter a:active::before {
top: -9px;
}


.subfilter a:hover::before {
opacity: 1;
}

.subfilter a.startwatch:hover::before {
background-color: #c6f0f8;
}

.subfilter a.finiwatch:hover::before {
background-color: #B3F390;
}

.subfilter a.notwatch:hover::before {
background-color: #E8ACF1;
}

.subfilter a.breakwatch:hover::before {
background-color: #EC1313;
}


.subfilter a:hover{
top: 0px, 1px;
}

.subfilter a.finiwatch:hover{
background-position: -160px -158px, 0 0;
}

.subfilter a.notwatch:hover{
background-position: -160px -316px, 0 0;
}

.subfilter a.startwatch:hover{
background-position: -160px 0, 0 0;
}

.subfilter a.breakwatch:hover{
background-position: -160px -474px, 0 0;
}

.subfilter a:active{
background: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -o-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), linear-gradient(top, #eaeaea, #f6f6f6);
}

.subfilter a.finiwatch:active{
background-position: -318px -158px, 0 0;

}

.subfilter a.notwatch:active{
background-position: -318px -316px, 0 0;

}

.subfilter a.startwatch:active{
background-position: -318px 0, 0 0;

}
.subfilter a.breakwatch:selected{
background-position: -318px -474px, 0 0;

}

.subfilter a.finiwatch:selected{
background-position: -318px -158px, 0 0;

}

.subfilter a.notwatch:selected{
background-position: -318px -316px, 0 0;

}

.subfilter a.startwatch:selected{
background-position: -318px 0, 0 0;

}
.subfilter a.breakwatch:selected{
background-position: -318px -474px, 0 0;

}

</style>

<div class="subfilter">
<a class="finiwatch" href=""></a>
<a class="notwatch" href=""></a>
<a class="startwatch" href=""></a>
<a class="breakwatch" href=""></a>
</div>[/src]

 

[theSplit]

Moin,

du hast zwei Doppelpunkte statt nur einem hier (und den anderen CSS-Rules auch die darauf folgen):
[src=css].subfilter a.startwatch:hover::before {[/src]
sollte korrekter Weise lauten:
[src=css].subfilter a.startwatch:hover:before {[/src]

Dann sollte es auch funktionieren.

 

[Larius]

Ich war übrigens mal so frei und habs verschoben

 

[Diskordier]

du hast zwei Doppelpunkte statt nur einem hier (und den anderen CSS-Rules auch die darauf folgen):

Nein @Thesplit die beiden doppelpunkte sind schon richtig. die werden sogar bei der psudeclasse verlangt.

http://www.w3schools.com/cssref/sel_before.asp

und der gesammte css code den ich ja gepostet habe wenn man den in eine .html datei einfügt funktioniert er auch richtig.

--- [2016-05-18 21:29 CEST] Automatisch zusammengeführter Beitrag ---

Wer will kann sich das ja mal runter laden.

https://mega.nz/#!iAtXRRgZ!qG3niXDMhLWWiPxTHAYZEr9ECqvFsvX-Bd9tWdyGSb4

 

[KingJamez]

ich kann deiner ausführung kaum noch folgen soweit ich es verstehe wird ".subfilter a::before" nicht übernommen,
wenn ich den "z-index" ändere und "content:" einfüge sehe ich das element
[src=css]

.subfilter a::before{
// geht
content: 'qweqweqwex';
z-index: 1;

position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}

[/src]


Zum double colon:

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

quelle: https://www.w3.org/community/webed/...ctors#CSS3_pseudo-element_double_colon_syntax

 

[Diskordier]

Ja wenn ich 1 mache dann wird das bevore elemnt angezeigt aber im Vordergrund und nicht hinter dem ersten bg


ich mach dir mal ein BIld wie es aussieht mit funktionierendem bevore

 

[KingJamez]

Also schlauer werde ich daraus jetzt auch nicht, es wird doch angezeigt, so wie auf dem Screenshot, oder sei bitte etwas präziser, was du erwartest.
http://codepen.io/anon/pen/Wwqzpe?editors=0110

 

[Diskordier]

So hab das problem raus gefunden aber ich weiss nicht wie man es lösen kann.

Das problem ist das ein anderer BG über dem bevore liegt.

wenn ich bei dem z-index: -1 mache passiert leider nichts.

[src=css]#streams-container,
#acp-container{
border-radius: 10px;
background-color: #f8f8f8;
min-height: 500px;
}[/src]

[src=html5]<div id="streams-container">[/src]

Wenn man das in den obringen code mit eibaut kann man das Problem gut erkennen.

 

[Diskordier]

Dazu noch ein Bild sollte erkenntlich machen wo der Hase begraben ist.

 

[theSplit]

Ich hab mir gerade mal deine Datei aus deinem/diesem Post heruntergeladen. Ich kann aber auch nicht ganz nachvollziehen wo genau dein Problem damit liegt. In Firefox wird mir bei Hover ein Auge eingeblendet mit dem korrekten Symbol für das jeweilige Element, "Haken", "Fragezeichen", "leer" und "Gekreuzt".
Und das Rahmenelement mit der gewählten Farbe wird auch bei Hover korrekt/vollständig umrahmend angezeigt.

Getestet in Firefox.

Wenn bei dir, die genannte Version im Browser nicht funktioniert, solltest du mal einen anderen Browser verwenden oder mal nennen welchen Browser du verwendest.

Rein von der Logik her und mit dem CSS sollte das Problem eigentlich in dieser Form nicht auftreten.
In deinem letzten Post sieht es zum Beispiel so aus, also würde der Background des Divs das Before Element, was aber in den Div eingebunden ist, überlagern, daher nur oberhalb der Rand.. sehr merkwürdig allerdings.

 

[Diskordier]

Hallo theSplit
Ja genau das hast du richtig erkannt.
Ja wenn du den code snippet Teil verwendest passiert das.
Wie gesagt ich musste auch zuerst raus finden was genau den auf der Page stört da dort ja noch mehr css code ist als in meinem Test bsp.

[src=css]<!DOCTYPE html>
<html>
<head>
<style>

#streams-container,
#acp-container{
border-radius: 10px;
background-color: #f8f8f8;
min-height: 500px;
}


.subfilter{
margin-top: 160px;
}

.subfilter a {
margin-right: 130px;
margin-left: 130px;
width: 145px;
height: 145px;
display: inline-block;
position: relative;
line-height: 145px;
background-size: auto auto, auto auto;
background-color: #eaeaea;
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -o-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), linear-gradient(top, #f6f6f6, #eaeaea);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}

.subfilter a.finiwatch{
background-position: 0px -172px, 0 0;
}

.subfilter a:active {
top: 1px;
}

.subfilter a::before{
content: '';
position: absolute;
z-index: -1;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}

.subfilter a:active::before {
top: -9px;
}


.subfilter a:hover::before {
opacity: 1;
}


.subfilter a.finiwatch:hover::before {
background-color: #B3F390;
}


.subfilter a:hover{
top: 0px, 1px;
}

.subfilter a.finiwatch:hover{
background-position: -160px -158px, 0 0;
}


.subfilter a:active{
background: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -o-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), linear-gradient(top, #eaeaea, #f6f6f6);
}

.subfilter a.finiwatch:active{
background-position: -318px -158px, 0 0;

}

.subfilter a.finiwatch:selected{
background-position: -318px -158px, 0 0;

}


</style>
<div id="streams-container"</div>
<div class="subfilter">
<a class="finiwatch" href=""></a>
</div>[/src]

Es gibt in der Page einen weiteren BG der das problem verursacht.
da passiert eben das, dass before Element hinter den #apc-container bg verschwindet.
Und ich weiss nicht wie ich mein before vor den apc-container BG bringe aber hinter den subfilter BG. Wenn ich beim before Elemet einen z-index: 0 mache wird er über den subfilter BG angezeigt und wenn ich -1 mache ist der before bg hinter dem apc-container bg. Ich hab auch versucht den anderen BG einen z-index gebe aber das hat leider nichts bewirkt.

 

[dexter]

Vielleicht versteh ich das Problem nicht, Du willst den Rahmen um a einfärben? Ist zwar nicht die schönste Lösung, aber ein span innerhalb a würde das massiv vereinfachen, statt mit before etc. rumzufuchteln.

 

[theSplit]

Ohne mich jetzt in das HTML eingefuchst zu haben, warum braucht dein "#apc-container" Element - falls es innerhalb des "#streams-container" liegt? Der Streamcontainer hat doch schon einen Background und eine Höhenangabe und weiteres. Für ein Element innerhalb sollte doch die "min-height" Angabe ausreichend, wobei vielleicht auch nicht zwingend, sein oder du mußt den Background mit einer extra CSS dekleration, wenn du alle anderen Attribute benötigst, mit "background: none" entfernen.

 

[Diskordier]

Hallo Leute, Einfahc nur mal Danke das Ihr mir zu helfen versucht, nun ja wie erkläre ich das am einfachsten ??

Uh nun ja zu mal weil der noch an anderen stellen genutzt wird.

Dazwischen noch sehr viel anderer code ist.

Wie und warum mein before sich auf den apc auswirkt hab ich selber aber auch nicht verstanden.

ich hab mal den apc eingefärbt so das man den gut sehen kann.

mit apc



ohne apc


andere Seite




Wie gesagt das before soll einfach über dem apc erscheinen.

eak D1SK