Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Relative position bestimmen--Wie?
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Relative position bestimmen--Wie?
Pages: [1]
| geschrieben von and am 26.01.2002 - 14:12 |
Hallo
Wie kann man mit "<div style="position:relative; left:111px; top:111;">"
html elemente an von mir bestimmten anderen Elementen Ausrichten.
z.B.
will ich test2 an test1 ausrichten
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
| <!-- ###################### test 1 ########################## -->
<div style="position:absolute; left:500px; top:30px;">
<h3 class="rot" align="center">
Überschrift
</h3>
<img src=""
width="70" height="100" border="0" alt="" align="left"
vspace="0" hspace="0" >
<font size="" color="#777777" >
Text <a href="">mehr</a>
</font>
<hr class="tg" >
</div>
<!-- ###################### test 2 ########################## -->
<div style="position:relative; left:500px; top:2px;">
<h3 class="rot" align="center">
Überschrift
</h3>
<img src="Handy Bilder/t_nokia_3310_1.gif"
width="42" height="100" border="0" align="left"
vspace="0" hspace="10" >
<font size="" color="#777777" >
Text <a href="">mehr</a>
</pre>
</font>
<hr class="tg" >
</div> |
So wie es jetzt hier steht wird test2 zwar auch an test1 aurgerichtet aber nur wenn 1 u. 2 in der Programmierung
übereinnander stehen.
Ich will aber das test2 auch dann an test1 Ausgerichtet wird, wenn test1 am anfang der programmierung steht und test 2 am
ende.
So ich hoffe ihr wisst jetztr was ich ansprechen will.
Weis jemand was da noch fehlt?
mfg
and |
| geschrieben von Martin am 27.01.2002 - 09:14 |
Ave,
position:absolute; und :relativ; beziehen sich immer auf die linke obere Kante des Browserfensters und nicht auf die einzelnen Elemente auf dein Seite. Du solltest eher mit margin-top; oder padding-top: arbeiten.
mfg martin |
| geschrieben von and am 28.01.2002 - 11:17 |
bei absolute weis ich das.
Aber ich dachte relative geht immer vom vorher gesetzten objekt aus.
Wenn ich mit absolute vom linken oberen rand es 50 reinsetzen will gebe ich
left:50px; right:50;px ein. Wenn ich jetzt aber mit relative 50 vom objekt wegehen will gebe ich 50 ein.
Also kann es ja nicht von der leinken oberen Ecke aus gehen
oder? |
| geschrieben von Martin am 28.01.2002 - 16:59 |
Ave,
relativ bedeutet
| Zitat | | |
Erläuterung:
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed = absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst.
Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe macht nur Sinn, wenn Sie zugleich die gewünschte Startposition angeben. Dies können Sie beispielsweise mit Angaben zur top oder left tun.
Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines Elternelements beginnt.
Wenn Sie position:relative; top:5px notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.
Beachten Sie:
Die Angabe fixed wird weder von Netscape noch vom MS Internet Explorer interpretiert.
Weder Netscape noch der MS Internet Explorer interpretieren Angaben zur absoluten Positionierung in allen HTML-Elementen. Um eine maximale Abwärtskompatibilität zu erreichen, ist es am besten, Angaben zur Positionierung auf das div-Element zu beschränken. Schließen Sie andere Elemente, etwa Textabsätze, Grafiken, Tabellen, Formulare usw. einfach in entsprechende div-Elemente ein.
Netscape und der MS Internet Explorer reagieren bei absoluter Positionierung unterschiedlich, was die automatische Breite von Elementen betrifft. Dieser Fall tritt ein, wenn Sie eine Angabe für left: notieren und nicht angeben, wie breit der so definierte Bereich sein soll. Netscape erstreckt das Element maximal bis zum rechten Fensterrand/Seitenrand, während der MS Internet Explorer es über den rechten Rand hinausdehnt (der Anwender muss quer scrollen). Bei relativer Positionierung reagieren beide Browser so wie der MS Internet Explorer bei der absoluten Positionierung. Um den Effekt zu vermeiden, können Sie z.B. Angaben zu width (Breite) des positionierten Bereichs machen.
|
Dies ist ein Zitat aus der Dokumentation SelfHTML 8.0 von Stefan Münz, http://selfhtml.teamone.de
Ich denke mal das oben angeführte Zitat beantwortet deine Frage nach absolute und relativ.
mfg martin |
| geschrieben von and am 28.01.2002 - 17:09 |
| Zitat | | | wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements. |
Das wollte ich ja eigendlich umgehen
z.B. Das ich nicht das Elternellement als bezugpunkt nehme, sondern die z.B. zwei Elemente vorher(wenn du weist was ich mein).
naj ich werds schohn irgendwie hinbekommen.
Danke für deine Antwort
mfg |
| geschrieben von Nico am 25.02.2002 - 10:53 |
Hallo,
also mit den lieben DIVs habe ich auch so meine Probleme. Haette deshalb zu der Ausgangs- noch eine Zusatzfrage:
Bei mir iet es so, dass ich DIVs in einer bestimmten Tabellenzeile dynamisch aufrufe und genau positionieren will. Das ist nicht nur eine leidige Herumprobiererei, sondern geht auch ständig in die Hose, sobald mit Frames gearbeitet wird.
Deshalb meine Frage: Gibt es eine andere Methode oder Möglichkeit als top und left, um DIVs an eine bestimmte Position (hier: eine Tabellenzelle) zu binden? |
| geschrieben von and am 25.02.2002 - 11:06 |
also ich klaub man kann das mit margin machen, dann wird das am elternelement ausgerichtet. Icst zwar immer noch nicht was ich will, klappt abre auf jeden fall besser
| HTML-Quelltext | 1:
| <div style="margin-left:12px; margin-top:50px;">....<div> |
|
| geschrieben von Nico am 25.02.2002 - 15:12 |
Und wo ist der Unterschied zwischen top und margin-top bzw. left und margin-left ?
<div style="margin-left:12px; margin-top:50px;">....<div>
-------------------------------------------------------------------------------- |
| geschrieben von and am 25.02.2002 - 15:21 |
der unterschied liegt an der ausrichtung
z.B
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
| <div id="name1" style="position:absolute; left:90px; top:120;">
......
<div id="name2 "style="margin-left:12px; margin-top:50px;">
....
<div>
</div> |
der div-container name1 wird absolut am Browserrand ausgerichtet
der 2. div-container name2 wird am 1. div-container ausgerichtet |
| geschrieben von Nico am 25.02.2002 - 15:25 |
| Ok! Kapiert, danke! |
|