✔ Ebenenausrichtung, sowohl 50% als auch + 20px von links?

Status
Nicht offen für weitere Antworten.
F

fileshareking

Mitglied
Hi, ich glaube meine überschrift ist nicht eindeutig genug, was ich damit meine ist,
dass ich z.B. 2 ebenen (layer1 + layer 2) habe

#Layer1 {
position:relative;
left:50%;
top:50%;
width:300px;
height:300px;
z-index:1;
}


nun soll layer zwei auch mittig ausgerichtet sein, aber z.b. 20px weiter rechts als layer 1... mir ist bewusst, dass man folgenden code nicht anwenden kann, aber gibt es eine möglichkeit, dies zu verwirklichen?

#Layer 2 {
position:relative;
left:50% + 20px;
top:50%;
width:300px;
height:300px;
z-index:1;
}

Bin ein fortgeschrittener ;-) und habe nur ein "gefährliches Halbwissen" also bin ich auf hilfe angewiesen...

THX im voraus....
 
Zuletzt bearbeitet:
Ich habe es jetzt mal folgendermaßen probiert, sodass theoretisch "Layer1" 100px kleiner ist als "Layer2"

"Layer1" "steckt" im "Layer2", enthält den inhalt und ist links und oben mit 0 px absolute positioniert..

da im "Layer2" jetzt rechts 100 px frei bleiben, möchte ich an dieser Stelle meine Navigation einfügen.

Ich möchte "Layer2" sowohl vertikal als auch horizontal zentriert haben.... aber wie?

folgender Schnipsel ist meine Grundlage, wobei ich denke, dass diese von Grund auf falsch ist:

HTML: 
#Layer1 {
	position:absolute;
	left:0px;
	top:0px;
	width:300px;
	height:300px;
	z-index:1;
	text-align: left;
}

#Layer2 {
	position:relative;
	left:50%;
	top: 50%;
	z-index: 2;
	width:400px;
	height:300px;
	z-index:1;
	text-align: right;
	
}
-->
</style>
</head>

<body>

<div id="Layer2">
    <p>TEST1</p>
    <p>TEST2</p>
    <p>TEST3</p>
    <p>TEST4</p>
	
<div id="Layer1">
LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM LOREM IPSUM UND SO WEITERUM  

</div>

</div>


please help me!
 
Hi.

Code: 
#Layer1 {
position:relative;
left:50%;
width:300px;
height:300px;
z-index:1;
margin-left:-150px; /* negative Hälfte von width:300px = horizontal zentriert */
}

#Layer2 {
position:relative;
left:50%;
width:300px;
height:300px;
z-index:1;
margin-left:-130px; /* gegenüber Layer1 um 20px nach rechts verschoben */
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück