css: relativ ( übereinander)

  • Ersteller PowerBookGrafik
  • Erstellt am
P

PowerBookGrafik

Aktives Mitglied
Thread Starter
Dabei seit
12.03.2005
Beiträge
814
Reaktionspunkte
5
Hallo erstmal:

habe folgendes problem:

habe 2 Layer .... und dann ein externes css.
und die beiden Layer sollen in einer tabelle, also in einer zelle, sich immer an dieser orientieren ...

Aber wenn ich die 2 Layer auf position: relativ habe, liegen sie nicht übereinander sondern untereinander , welches mir natürlich meine ganze Page zerreißt ?!

Hilfer:

css:

HTML: 
#Layer3 {
position:relative;

	width:300px;
	height:400px;
	z-index:1;
	left: 300px;
	top: 0px;
}
#Layer4 {
position:relative;
	width:50px;
	height:400px;
	z-index:2;
	left: 550px;
	top: 0px;
}
 
Wie rufst Du die beiden Layer auf? Mittels DIV-Tag?

Frank
 
Was passiert, wenn du das linke Layer mit float:left; definierst?
 
Ja Beide Mit Einem Normalen Duv Tag
 
und mit dem float:left geht auch nicht denn sie liegen wirklich ÜBEReinander :(
 
DIV ist ein Block Element, d. h. nach einem DIV wird umgebrochen.

Nimm ein "display: inline;" mit in die CSS-Definition der beiden Layer mit rein:

PHP: 
#Layer3 {
position:relative;
    display: inline;
    width:300px;
    height:400px;
    z-index:1;
    left: 300px;
    top: 0px;
}

Ich habe Dir eine HTM-Datei mit angehängt, ist Dein CSS mit dem Inline ergänzt. Zu beachten ist noch, das Inline-Elemente keine Höhenangaben mehr interpretieren, sondern sich nur die Höhe "nehmen", die sie brauchen. Also nicht wundern, dass nur eine Zeile zu sehen ist.

Viel Spass,

Frank
 
kann ich sonst noch irgendwie einen layer einbaum außer mit div tags ?
 
position: relative erlaubt dir das Element relativ zu seiner ursprünglichen Position im Markup zu positionieren.

Was du brauchst ist position: absolute.

Auszug aus Selfhtml:
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
Zum Vergrößern anklicken....

d.h. du musst das übergeordnete Element (in dem die beiden divs enthalten sind) auch entsprechend mit einem position:absolute/relative versehen. Wenn dein Layout das erlaubt sollte es damit gehen.

Gruß

Stephan
 
die div tags sind in einer tabellenzelle eingebettet ? wie sage ich der eine pos: absolut ?
 
meinste sowas:

<html>
<style type="text/css"><!--

#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
border: 1px dotted #000000;
}

#inhalt2 {
position:absolute;
width:150px;
height:64px;
top:50%;
left:50%;
border: 1px dotted #000000;
}
--></style>

</head>
<body>
<div id="inhalt"><span class="Stil2">Nr 1 </span></div>
<div id="inhalt2"><span class="Stil2">Nr 2 </span></div>
</body>
</html>
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten