Frage von adalice, 62

Weiß jemand wie man Bilder in einer css Datei übereinander legen kann? z-index funktioniert nicht.. kann mir bitte jemand helfen :)?

so sieht meine CSS-Datei aus:

.Hintergrund{ background-color:rgb(0,0,0); position:absolute; top:0px; left:0px; width:100%; height:100%;

  1. }

.Hintergrund h1{ position:absolute; top:246px; left:100px; font-family:Comfortaa,cursive; font-size:24pt; color:white; }

.AD{ position:absolut; top:0px; left:0px; }

.nurIch{ position:absolute; left:0px; top:0px; }

.linkes Auge-grau{ position:absolute; left:0px; top:0px; }

.rechtes Auge-grau{ position:absolute; left:0px; top:0; }

.Lippen-grau{ position:absolute; left:0px; top:0px; }

.ask fuer auge{ position:absolute; left:0px; top:0px; }

.Facebook fuer Auge{ position:absolute; left:0px; top:0px; }

.Insta fuer Lippen{ position:absolute; left:0px; top:0px; }

.linkes Auge-zu{ position:absolute; left:0px; top:0px; }

.rechtesAuge-zu{ position:absolute; left:0px; top:0px; }

.Zunge{ position:absolute; left:0px; top:0px; }

.InstaZunge{ postition:absolute; left:0px; top:0px; }

.Ask-Augenlied-links{ position:absolute; left:0px; top:0px; }

.Facebook-Augenlied-rechts{ position:absolute; left:0px; top:0px; }

Antwort
von ostfriesenjung, 44

füge jeder Klasse einfach einen Z-Index hinzu.
Je HÖHER die Zahl um so weiter OBEN liegt das Bild.
Wird dir aber nichts bringen, da die sich ja überlagern, d.h. das OBERSTE verdeckt alle Anderen.
Du musst hier die Transparenz mit ins Spiel bringen.
WICHTIG: In den Klassen-Namen dürfen KEINE LEERZEICHEN vorhanden sein!

Kommentar von adalice ,

also meinst du, dass z-index bei mir nicht funktioniert hat, weil meine Klassen-Namen Leerzeichen enthalten?  

Kommentar von adalice ,

Also ich hab die Klassen namen in der CSS und der HTML jetzt so umgeändert, dass sie keine Leerzeichen mehr haben und in der CSS-Datei jeweils den z-index hinzugefügt, aber es funktioniert immer noch nicht.. :/

CSS:

.Hintergrund{
background-color:rgb(0,0,0);
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:auto;
z-index:1;
}

.Hintergrund h1{
position:absolute;
top:246px;
left:100px;
font-family:Comfortaa,cursive;
font-size:24pt;
color:white;
z-index:2;
}

.AD{
position:absolut;
top:0px;
left:0px;
z-index:3;
}

.nurIch{
position:absolute;
left:0px;
top:0px;
z-index:4;
}

.linkesAuge-grau{
position:absolute;
left:0px;
top:0px;
z-index:5;
}

.rechtesAuge-grau{
position:absolute;
left:0px;
top:0;
z-index:6;
}

.Lippen-grau{
position:absolute;
left:0px;
top:0px;
z-index:7;
}

.askfuerauge{
position:absolute;
left:0px;
top:0px;
z-index:8;
}

.FacebookfuerAuge{
position:absolute;
left:0px;
top:0px;
z-index:9;
}

.InstafuerLippen{
position:absolute;
left:0px;
top:0px;
z-index:10;
}

.linkesAuge-zu{
position:absolute;
left:0px;
top:0px;
z-index:11;
}

.rechtesAuge-zu{
position:absolute;
left:0px;
top:0px;
z-index:12;
}

.Zunge{
position:absolute;
left:0px;
top:0px;
z-index:13;
}

.InstaZunge{
postition:absolute;
left:0px;
top:0px;
z-index:14;
}

.Ask-Augenlied-links{
position:absolute;
left:0px;
top:0px;
z-index:15;
}

.Facebook-Augenlied-rechts{
position:absolute;
left:0px;
top:0px;
z-index:16;
}

Kommentar von Sarkophator ,

Klassen sind nicht das gleiche wie IDs! Deine img-Elemente haben IDs gesetzt, keine Klassen.

Kommentar von aurata ,

<img src="Bilder/nurIch.png" class="nurIch" .... 

du hast geschrieben id="nurIch", aber in der CSS hast du Klassen dafür erstellt ;-)

Zudem hast du in der CSS fuer geschrieben und im HTML für. Umlaute sind im CSS nicht erlaubt, also wäre fuer besser. :-)

Haben die Bilder verschiedene Größen, oder was soll das bringen das, dass sie ALLE übereinander liegen? Oder möchtest du ein Slideshow erstellen?

Der Zeichensatz fehlt im head-Bereich (deshalb das Gekraxel in der Ansicht) und die Attributen width und height fehlen im img-Tag.

Kommentar von adalice ,

Hammer!! Danke Danke Danke 

das war der Fehler, den ich übersehen habe! Du hast mir wirklich sehr weitergeholfen DANKE DANKE DANKE :)

Kommentar von webflexer ,

z-index funktioniert nur wenn die bilder im css eine position aufweisen und von static abweichen!

Kommentar von adalice ,

"fuer" hab ich auch in der html-Datei umgeändert, nur nicht hier rein gepostet..

das ganze soll ein Gesicht werden, alle Bilder haben die gleiche Größe. Die Bilder sind ausgeschnitten z.B. "Lippen-grau" sollen im Gesicht auf den farbigen Lippen liegen. Die Größe und Positionierung müsste eigentlich stimmen.

Das Problem an der ganzen Sache ist, dass die Webseite nicht so angezeigt wird, dass alle Elemente übereinander liegen, stattdessen werden die einzelnen Bilder untereinander angezeigt. Die Reihenfolge in der die Bilder "gestapelt" werden sollen ist die gleiche, wie sie in der HTML und CSS-Datei ist. Sprich, die Datei die als erstes vermerkt wurde, soll im Stapel ganz unten liegen und die als letztes vermerkte ganz oben.

z-index funktioniert irgendwie nicht und ich kann mir einfach nicht erklären wieso.. die position ist ja absolute, top, left ist auch angegeben..

was meinst du genau mit den Klassen und IDs? Das check ich jetzt nicht.. 

Kommentar von adalice ,

Leider kann ich die HTML-Datei hier nicht reinposten :/


Kommentar von adalice ,

Das Problem wurde gelöst, der Fehler war, dass ich erst div class und dann später id gemacht habe :D 

jetzt funktionierts :D

Kommentar von aurata ,

HTML hier einzufügen geht schon, dafür gibt es im Editor der Knopf Codebeispiel einfügen (der 5. von links). Also, du fügst den Code ein, markierst alles und dann drauf klicken.

Beispiel:

<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8" />
<title>Beispiel</title>
<meta name="description" content="tja" />
<link href="style.css" rel="stylesheet" />
 
</head>
 
<body>
 
</body>
</html>
Antwort
von perhp, 25

Mal so einen Tipp nebenbei, verwende für CSS Klassen englische Namen, die deutschen Bezeichnungen sehen ja schrecklich aus. Wenn du .linkes Auge-zu machst (in der mitte befindet sich ein leerzeichen, dann benutzt du ein ungültiges Format, da der Selektor nicht richtig ist. Du müsstest wenn schon das ganze zusammen schreiben oder eben .linkes.Auge-zu machen, wenn du mehrere Klassen auf einem Element hast.

Kommentar von tWeuster ,

Mal so ein Tipp nebenbei, verwende für CSS Klassen deutsche Namen, die englische Bezeichnung sehen ja schrecklich aus.

Deutsch ist eine der größten Sprachen der Welt. Du lebst in Deutschland und deutsch ist wahrscheinlich deine Muttersprache. Wieso also auf eine fremde Sprache gehen?

Kommentar von perhp ,

Ähm nein ich wohne nicht in Deutschland...

Dokumentationen, Anleitungen fürs Programmieren usw. findest du aber vorwiegend nur in Englisch im Internet und daher sollte man sich schon den Standard anpassen.

Stell dir mal vor du schreibst ein gutes Programm, machst aber dafür die Dokumentation auf Deutsch. 80% der Programmierer werden dann bloß aus diesem Grund deine Software nicht verwenden, auch wenn dein Programm noch so gut sein mag.

Kommentar von aurata ,

Was hat das mit der Programmierung und Software zu tun?
CSS Klassen-Namen sind selbst erdachten Namen, da gibt es keine Standards, jedenfalls nicht in der Handarbeit. Wichtig ist, dass es für den Ersteller und für die mögliche Nachwelt sinnvoll klingt. Eine Klasse .lippen-grau ist nicht sinnvoll, wenn die Lippen rot sind (z.B.) 

Kommentar von perhp ,

Das ist mir schon bewusst, dass CSS-Klassen ja eigentlich nur für den eigenen Programmierer da sind, der dann auch die Seite macht. Aber ich kann mir gut vorstellen, dass du auch für das restliche Programmieren deutsche Bezeichnung verwendest oder irre ich mich da etwa?

Kein vernünftiger Programmierer tauscht bei seinem Programmen dreimal die Sprache für die Erstellung seines Codes.

Kommentar von tWeuster ,

Der Kommentar war zwar eine Antwort auf deinen Kommentar aber doch nicht an dich gerichtet. Wo du wohnst ist mir schnuppe.

So findet man das alles vorwiegend in Englisch? Das heißt du weißt, dass Chinesen und Japaner auch alles auf Englisch abliefern? Oder was ist mit der spanischen Welt? Spanien, Brasilien, Argentinien, Chile ... dort auch alles auf Englisch, ja? Oder beziehst du deine Erfahrung nur auf den Europäischen Raum? Oder vielleicht sogar nur auf die USA und das 52. Bundesland -> Deutschland. Das die Deutschen denn US-Affen alles nachmachen ist mir bewusst und mein Kommentar soll genau dort den Finger in die Wunde legen.

Standard? Soso? Im W3C verankert oder? Bisschen Ironie ;).

Also wenn du eine Software für die ganze Welt schreibst, dann sollte man tatsächlich die Weltsprache (Die leider leider englisch ist) nehmen, da hast du recht! Von einem Standard würde ich da aber nicht sprechen. Und ob ein Deutscher mein Programm nicht benutzt, weil es auf Deutsch geschrieben ist bezweifel ich auch mal ganz stark!

Ich bin jetzt seit 15 Jahren beim Programmieren, habe anfangs tatsächlich alles englisch gehalten und musste feststellen, dass in 15 Jahren nicht ein "Ausländer" (sprich jemand der kein Deutsch konnte) meine Gehirnfürze gelesen hat. Da fragt man sich natürlich ob es unbedingt englisch sein muss.

Also alles was ich anmerken möchte ist, dass man mit ein wenig Menschenverstand an die Sache gehen sollte. In einem deutschen Mittelständigem Unternehmen, in dem es nur Deutsche Mitarbeiter gibt -> Deutsche Doku. Kenne auch Programmierer die arbeiten in einem Multikulti Konzern. Die schreiben ihre Kommentare auch mal auf japanisch, chinesisch etc... ist auch okay. Aber einfach nur etwas zu machen weil man meint es wäre Standard ... da fehlt mir das Verständnis.

Kommentar von adalice ,

Die leerzeichen etc. hab ich bereits alle umgeändert. Die Sprache ist mir momentan echt egal. 

Das Problem das ich momentan habe, ist dass sich die Fotos nicht übereinander stapeln lassen.. z-index funktioniert nicht und ich kann nicht verstehen wieso.. 

Anstatt das die Fotos auf der Internetseite übereinander gestapelt werden, werden sie untereinander angezeigt.. 

Kommentar von perhp ,

Ist doch klar wieso, weil bei dir die Bilder position relative sind, was so viel bedeutet, dass die Bilder zum Seiteninhalt dazu gezählt werden. Mach um die ganzen Bilder ein div (wenn du es nicht bereits haben solltest). Zu dem div sagst du dann position:relative und auf die Bilder innerhalb vom Div dann jeweils positon absolute mit folgenden Werten: top: 0px; left: 0px; right: 0px; bottom: 0px;

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten