nicht angemeldet
ZPosition, überlagerung klappt nicht! :(
0 0 
Matthias Apsel
0 
Performer
0
ZPosition, überlagerung klappt nicht! :(
Gunnar BittersmannHallo Leute,
Ich arbeite seid kurzem an einer Homepage.
nun stehe ich vor dem folgenden Problem:
Ich möchte sog. Inhaltsboxen im Hauptteil einfügen.
Diese sollen so aussehen:
https://onedrive.live.com/redir?resid=6FEED54A5AE42BBA!816&authkey=!ABOOcK3rJC9QehA&v=3&ithint=photo%2Cpng
____________________________________________________________________________________________
Hier mein Code-Versuch:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="Test.css"/>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>
<body>
<!-- START INHALT -->
<div id="inhalt">
<!-- START 1. Inhaltsbox -->
<div id="inhaltsbox1">
<!-- START Rand / Titel -->
<div id="inhaltsboxrand">
<div id="inhaltsboxrandspacea">
</div>
<div id="titelinhalt">
Hallo Welt!
</div>
<div id="inhaltsboxrandspaceb">
</div>
</div>
<!-- START 1. Inhaltsbox -->
<div id="boxinhalt">
<div id="inhaltsboxspacea">
</div>
<div id="inhaltsboxautor">
geschrieben von Hans Wurst
</div>
<div id="inhaltsboxtext">
blahblah
</div>
</div>
<!-- ENDE Inhalt -->
</div>
<!-- ENDE 1. Inhaltsbox -->
</div>
</body>
</html>
____________________________________________________________________________________________
CSS:
body {
background-color:olive;
}
/* START Inhalt */
#inhalt {
height:600px;
position:absolute;
top:220px;
left:560px;
}
/* START erste Inhaltsbox */
#inhaltbox1 {
height:400px;
width:600px;
background-color:gray;
position:absolute;
top:220px;
left:560px;
}
/* Der Titel Überlappt den Boxinhalt*/
#inhaltsboxrand{
width:20px;
height:400px;
float:left;
}
#inhaltsboxrandspacea{
width:20px;
height:40px;
}
#titelinhalt {
height:60px;
width:800px;
background-color:maroon;
z-index:2;
}
#inhaltsboxrandspaceb {
height:300px;
}
/* Dieser Teil soll im Hintergrund zum Rand stehen! Soll BG-Farbe von der Box haben (Grau) */
#boxinhalt {
height:400px;
z-index:1;
float:left;
}
/* Sorgt dafür, dass der Boxinhalt erst nach dem Titel anfängt! Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxspacea {
height:110px;
}
/* Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxautor {
height:30px;
}
/* Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxtext {
height:260px;
}
____________________________________________________________________________________________
Leider ein totaler Reinfall... Trotz div. verschiedenen Versuchen mit anderen Eigenschaften, Größen, etc. bekomme ich es einfach nicht hin. Nach langem belesen im Internet kann ich kurz zusammenfassen: Ich verstehe es nicht. :( Die Z-Position bleibt mir ein Rätsel.
Was ich brauche ist eine verständliche Lösung, warum es nicht funktioniert und wie ich es besser machen kann.
Ich hoffe einer von euch kann mir helfen.
LG Lio
-
Hi,
Nach langem belesen im Internet kann ich kurz zusammenfassen: Ich verstehe es nicht. :( Die Z-Position bleibt mir ein Rätsel.
Eine ganz wesentliche Information hast du wohl überlesen oder ignoriert – dass z-index nur auf positionierte Elemente wirkt.
Und die beste Erklärung bzgl. aller Zusammenhänge und Besonderheiten ist m.e. What No One Told You About Z-Index
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
Hallo Chris,
> Eine ganz wesentliche Information hast du wohl überlesen oder ignoriert
Naja ich habe gelesen, dass ich eine position: absolut nutzen muss und das habe ich dann auch getan. Die hat es in den meisten "Probierfällen" nur noch schlimmer gemacht ... :O
Vielen Dank für den tollen Link. Nur leider kann ich kein Englisch, bzw nur sehr brockenhaft.. :( Die Übersetzung durch Google ist grausig und dadurch versteh ich warscheinlich nicht mal die Hälfte wirklich richtig.
Geht das ganze nicht auch "einfacher"? :( Zur Not gestalte ich die Boxen halt nicht überlappend.
LG Lio
-
@@Liona:
nuqneH
Naja ich habe gelesen, dass ich eine position: absolut nutzen muss
Entweder du hast falsch gelesen oder die Quelle hat das falsch angegeben.
Damit z-index wirkt, muss dass Element positioniert sein, was so viel heißt wie: seine position-Eigenschaft muss einen anderen Wert haben als "static" (was der Defaultwert ist, wenn nichts anderes angegeben ist).
Was anderes heißt nicht zwingend "absolute". Siehe Beispiel.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
Om nah hoo pez nyeetz, Liona!
wie ich es besser machen kann.
Chris hat ja schon zum z-index das entscheidende geschrieben.
Unabhängig von deinem Problem denke ich, dass du mit sehr sehr alten Büchern oder Internetseiten arbeitest. Es ist heute nicht mehr notwendig, eine div-Suppe zu kochen. Es gibt heute sematisch passende Elemente, etwa header, footer. Lies etwa diese Serie. Überschriften und Textabsätze gab es schon immer.
div-Elemente für Ränder und Abstände waren noch nie™ nötig.
Es ist nicht klug, feste Breiten zu vergeben, zu vielfältig sind die Möglichkeiten, eine Seite zu betrachten (Handy, Tablet, PC im Vollbildmodus).
Matthias
-
Hi Matthias,
Lies etwa diese Serie.
könntest du bei Gelegenheit die festen Leerzeichen in der Überschrift „Programming JavaScript Applications“ bzw. den zugehörigen Kommentaren entfernen? Durch den fehlenden Umbruch ragen sie rechts über den Rand der Sidebar hinaus.
Ciao, Performer
-
Om nah hoo pez nyeetz, Performer!
könntest du bei Gelegenheit die festen Leerzeichen in der Überschrift „Programming JavaScript Applications“ bzw. den zugehörigen Kommentaren entfernen?
Nein, ich habe keine Ahnung wie die da hinein kommen. Im Quelltext sind es ganz normale Leerzeichen.
Matthias
-
Hi,
Nein, ich habe keine Ahnung wie die da hinein kommen. Im Quelltext sind es ganz normale Leerzeichen.
wie auch immer, jetzt ist es gut. Danke. Bei mir waren im Quelltext feste Leerzeichen. Oder das, was ich unter Mac OS als feste Leerzeichen einfüge: alt + Leertaste.
Ciao, Performer
-
-
-
Hallo Matthias,
Vielen Dank für die Info.
Die Seite ist nur für mich und auch schon fast fertig (bis auf diese blöden Inhaltboxen -.-), foglich werde ich die "div Suppe" zu Ende kochen. :)
Es ist trotzdem recht interessant zu wissen, was es alles tolles gibt. Bei der nächsten Site werde ich das dann auch anwenden. :)div-Elemente für Ränder und Abstände waren noch nie™ nötig.
Was kann ich denn nutzen um einen Abstand zu schaffen?
LG Lio
-
Om nah hoo pez nyeetz, Liona!
div-Elemente für Ränder und Abstände waren noch nie™ nötig.
Was kann ich denn nutzen um einen Abstand zu schaffen?http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Diele und Dielektrizitätskonstante.
-
-