Layer an Layer ausrichten

Tomate23 · 07.08.2003, 20:37

Hallo zusammen,
ich versuche ich an Layern und hab da mal ein Problem... *g*
hier habe ich den Hauptlayer zentriert ausgerichtet. Jetzt soll der Layer mit dem einzelnen roten Eiswürfel immer an der gleichen Stelle des Hauptlayers auftauchen (linker Rand, teilweise überlappend in den Hauptlayer). Dazu müßte ich den Layer mit dem Eiswürfel aber irgendwie am Hauptlayer "festkleben" damit die Position erhalten bleibt auch wenn die Fenstergröße wechselt.
Ich wollte erst den Eiswürfel einfach in die Hintergrundgrafik aufnehmen aber dann verseckt der Layer mit dem Text einen Teil. Wie krieg ich denn das hin? Oder geht das gar nicht was ich hier vorhabe?

prefix · 07.08.2003, 21:09

hi tomate

schau dir mal dieses beispiel (schnell gebastelt) an!

hier der code dafür:

Code:

<!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">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0;
}

#hauptebene {
	position: absolute;
	top: 200px;
	left: 200px;
	width: 70%;
	height: 200px;
	background-color: Yellow;
	z-index: 0;
	text-align: center;
}

#ueberlappend {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 200px;
	background-color: red;
	z-index: 1;
}
</style>
</head>

<body>
<div id="hauptebene">hauptebene</div>
<div id="ueberlappend">dar&uuml;ber</div>
</body>
</html>

wichtig ist, dass beide ebenen mit den gleichen maßeinheiten (hier pixel, es geht auch mit %, em usw.) positioniert werden. weiters achte auf den z-index! der höhere überlagert den niedrigeren

Tomate23 · 07.08.2003, 21:19

Super, genau was ich brauche! Du bist ein Schatz prefix!!!! Danke schön!

prefix · 07.08.2003, 21:21

na, dann schlaf ich gleich gut und träum ein wenig von schönen css-layouts *hehe*

Tomate23 · 08.08.2003, 18:22

Ok, gestern Abend war's anscheinend doch zu heiß hier.
Ich krieg's leider nicht gebacken :-(
Dein Layer war leider auch nicht ganz zentriert deshalb hab ich da meine Variante beibehalten. Hab hier mal meine CSS-Datei, vielleicht kannst du (oder ein anderer Fachmann/-frau) mir erklären wie ich den Layer mit dem roten Eiswürfel verankern kann?!
http://www.redandblue-media.de/tryit/rnb3.css
Der Layer red-ice soll ungefähr an die Stelle wo er hier ist
http://www.redandblue-media.de/tryit...cewuerfel3.gif

prefix · 08.08.2003, 18:26

was meinst du mit "nicht ganz zentriert"??

du kannst ja mein beispiel einfach erweitern, ohne probleme! dann die red-ice-ebene einfach so lange setzen, bis sie passt

sorry, aber versteh nicht ganz...

Tomate23 · 08.08.2003, 18:29

Ich meinte horizontal nicht zentriert.
Wenn ich deinen Code auf meine Layer übertrage flutscht der Hintergrundlayer sogar ganz unten rechts in die Ecke :-(
Irgendwie bin ich zu doof dafür......

prefix · 08.08.2003, 18:30

willst du die inhaltsebene also horizontal zentrieren (links und rechts gleicher abstand zum browserrand??

wie breit soll die inhaltsebene sein?? pixel-definiert oder in prozent??

Tomate23 · 08.08.2003, 18:34

Die Ebene soll horizontal und vertikal zentriert sien. Momentan hab ich das so gelöst:
/*#background {
height: 493px;
width: 650px;
margin-top: -246px;
margin-left: -325px;
left: 50%;
top: 50%;
overflow: hidden;
position: absolute;
visibility: visible;
z-index: 1;
}

prefix · 08.08.2003, 18:36

und das funktioniert bei allen modernen browsern und bei allen gängigen auflösungen???

Tomate23 · 08.08.2003, 18:45

Also Mozilla klappt genauso wie beim ie. Netscape und Opera zentrieren auch schön artig aber bei den beiden geht der Layer mit dem Text leider unten über das Logo hinaus. Das muß ich dann evtl. auch extra machen.
Den alten Netscape hab ich nicht getestet und was die Mac-Browser draus machen weiß ich leider auch noch nicht.

prefix · 08.08.2003, 19:00

hmm, also ich probier grad an diesem beispiel herum.

die gelbe ebene (inhalt) immer zentriert zu bekommen, das geht mit dem code.

das problem besteht jedoch jetzt darin, den roten container ebenfalls richtig positioniert zu bekommen, auch wenn man die browserfenstergröße verändert. da verhält er sich gem. den prozent-werten.... und bleibt nicht ganz unveränderlich!

Tomate23 · 08.08.2003, 19:07

Aber das kommt der Sache doch schon verflixt nah! wie hast du das denn hinbekommen? *bewunderdenprefix*

wintermute · 08.08.2003, 19:34

ich würd sagen man gibt dem gelben quadrat den wert 50% für die Breite und 25% für left position, sofern das geht. Wo genau das rote Quadrat sein soll weiß ich jetzt nicht so. Hat das jemand erwähnt?

Tomate23 · 08.08.2003, 19:38

http://www.redandblue-media.de/tryit...cewuerfel3.gif
geht um den roten eiswürfel (hier ist er im hintergrundbild integriert)