Ebene fest positionieren

Apoplexy · 11. Dez. 2004

Hi,
ich hab 4 Layer mit Bildern übereinander gelegt, und das erste Bild ist fest positioniert.

Wenn ich nun die Fenstergröße im Browser verändere, wandern die Layer weg vom Grundbild, auf denen es jedoch bleiben soll.

Wie kann ich diese Ebenen fest einstellen?

Gruß,
Apoplexy

siehe hier bei: Vielleicht interessieren Sie auch diese Strickanleitungen:

dkdenz · 11. Dez. 2004

Dazu sollte man den entsprechenden Quelltextteil sehen...

Apoplexy · 11. Dez. 2004

Reicht der Ausschnitt:

#hoverbild {
width:150px;
height:113px;
padding:4px;
border:2px solid #0000EE;
}

<th rowspan="4" width="200">
<div id="hoverbild">
<img src="teller.jpg" width="200" height="113">
<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1; left: 76px; top: 303px;"><img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden">
<div id="Layer2" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px;"><img src="bild2.jpg" width="200" height="113" id="bild2" style="visibility:hidden">
<div id="Layer3" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px;"><img src="bild3.jpg" width="200" height="113" id="bild3" style="visibility:hidden">
<div id="Layer4" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px"><img src="bild4.jpg" width="200" height="113" id="bild4" style="visibility:hidden">
</div>
</div>
</div>
</div>

</div>

</th>
</div>

</th>

<td width="458"><ul>
<li><a href="http://www.apoplexy.de/Eierwaermer_Shop/schal_stricken/strickanleitung_schal.htm" onmouseover="document.getElementById('bild1').style.visibility='visible'"; onmouseout="document.getElementById('bild1').style.visibility='hidden'";><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Wie
stricke ich einen Schal/ Schalmuster</font></a><br>
</li>
</ul></td>
</tr>

Irgendwas stimmt auch mit dem CSS nicht. Wollte eigentlich kein Padding, nur ein 2px Rahmen rum. Aber unten ist es immer mehr Abstand.

Gruß,
Apoplexy

dkdenz · 11. Dez. 2004

Versuch macht kluch...
Das Fettgedruckte weg und statt position:absolute relative nehmen...

Code:

 <th rowspan="4" width="200">
<div id="hoverbild">
<img src="teller.jpg" width="200" height="113">

<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1;[B] left: 76px; top: 303px;[/B]">
<img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden">

<div id="Layer2" style="position:absolute; width:200px; height:113px; z-index:1; [B]left: 0px; top: 0px;[/B]">
<img src="bild2.jpg" width="200" height="113" id="bild2" style="visibility:hidden">

<div id="Layer3" style="position:absolute; width:200px; height:113px; z-index:1;[B] left: 0px; top: 0px;[/B]">
<img src="bild3.jpg" width="200" height="113" id="bild3" style="visibility:hidden">

<div id="Layer4" style="position:absolute; width:200px; height:113px; z-index:1; [B]left: 0px; top: 0px[/B]">
<img src="bild4.jpg" width="200" height="113" id="bild4" style="visibility:hidden">

</div>
</div>
</div>
</div>

</div>

</th>

Apoplexy · 11. Dez. 2004

Hi,
das hab ich nicht ganz verstanden. Anstatt die left: 76px; top: 303px;">,etc
soll ich was nehmen?
position:absolute ?
Was bedeutet relative ?

Hab grad bei SelfHtml geschaut. Also geb ich da position:relative ein.
Sollte das nicht lieber in den Style oben?

--------------Edit-------------------------

Geht nicht, danne erscheinen alle Bilder wieder untereinander, und nicht übereinander.

<img src="teller.jpg" width="200" height="113">
<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1; position:relative"><img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden">
<div id="Layer2" style="position:absolute; width:200px; height:113px; z-index:1; position:relative"><img src="bild2.jpg" width="200" height="113" id="bild2" style="visibility:hidden">
<div id="Layer3" style="position:absolute; width:200px; height:113px; z-index:1; position:relative"><img src="bild3.jpg" width="200" height="113" id="bild3" style="visibility:hidden">
<div id="Layer4" style="position:absolute; width:200px; height:113px; z-index:1; position:relative"><img src="bild4.jpg" width="200" height="113" id="bild4" style="visibility:hidden">
</div>
</div>
</div>
</div>

Bessere Idee?

Danke,
Apoplexy

dkdenz · 11. Dez. 2004

Kommando zurück... :whacky:

Wenn Du bei der absoluten Positionierung absolute Angaben benutzt (px),
ist es klar, dass sich die Pics verschieben,
da sie sich nach dem "Browserrand" richten.
Du solltest das so ausexperimentieren, dass es mit Prozentangaben funktioniert.
Bsp.:

Code:

left:7%; top:30%;

Apoplexy · 11. Dez. 2004

Jeppp...das klingt gut. Danke!

Apoplexy

dkdenz · 11. Dez. 2004

Probier's erstmal aus...

Ohne Gewähr...

Albu · 11. Dez. 2004

öhm.... nur mal so ein kleiner Einwurf:

Du solltest erstmal Deine Verschachtelungen auseinander dividieren, Deine DIVs sollten einem Vater Element untergeordnet sein, auf dessen Position sich dann das position:absolute oder relative bezieht. Sobald DIVs verschachtelt sind wirkt die Positionierung nämlich ausgehend vom Vaterelement (Auch wenn Du ein Top Level DIV hast, welches direkt im Body steht, wirkt sich die Position auf das Vaterelement aus, in diesem Fall eben BODY!!).
Desweiteren ist von der Vermischung von Tabellen und DIVs extremst abzuraten. Entweder Tabellen oder DIVs, Tabellen in DIVs geht noch, DIVs in Tabellen großes NO-NO!

Apoplexy · 16. Dez. 2004

@dkdenz:
Leider wandert es immer noch mit, oder hab ich was falsch verstenden?

<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1; left:6%; top:69%;"><img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden">

Ciao
APoplexy

@ albu:
leider hab ich nun nicht verstanden, wie es besser wäre.
Kannst du mir ein beispiel zur Veranschaulichung geben.

Danke,
Apoplexy

dkdenz · 17. Dez. 2004

Albu hat natürlich recht.
Ist mir gar nicht aufgefallen *schäm*...
Du solltest erstmal Ordnung schaffen.

Code:

<th rowspan="4" width="200">
<div id="hoverbild">
<img src="teller.jpg" width="200" height="113">
</div>
</th>

<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1; left: 76px; top: 303px;"><img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden"></div>

<div id="Layer2" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px;"><img src="bild2.jpg" width="200" height="113" id="bild2" style="visibility:hidden"></div>

<div id="Layer3" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px;"><img src="bild3.jpg" width="200" height="113" id="bild3" style="visibility:hidden"></div>

<div id="Layer4" style="position:absolute; width:200px; height:113px; z-index:1; left: 0px; top: 0px"><img src="bild4.jpg" width="200" height="113" id="bild4" style="visibility:hidden"></div>

Da Du ja schon mal angefangen hast divs in tables zu packen,
wird es wohl zu umfangreich, alles nochmal neu zu strukturieren.
Aber die divs in denen Du einen z-index angegeben hast,
kannst Du frei "schweben" lassen.
Jetzt musst Du mit den Werten top und left rumexperimentieren.
Und das in ALLEN divs und nicht nur im Ersten so wie in Deinem Beispiel.

Apoplexy · 17. Dez. 2004

Hi dkdenz,
danke schon mal dafür.

Hatte nur mit der ersten gestestet, aber da sich das erste Bilf nicht festgesteszt hatte, hatte ich auch aufgegeben. Vielleicht liegt es ja daran, das es mit left und top ein Problem ist, weil ich Frames benutze. Oder leigt ich da falsch?

Ciao
Apoplexy

Apoplexy · 20. Dez. 2004

Hi,
hätte jetzt gern mal erstmal Ordnung geschafft, aber es klappt nicht. Es scheitert hier ran, wenn ich dies übernehme:

<th rowspan="4" width="200">
<div id="hoverbild">
<img src="teller.jpg" width="200" height="113">
</div>
</th>

Das End-tag </th> muß am Ende bleiben.

So klappt es aber:

<th rowspan="4" width="200">
<div id="hoverbild">
<img src="teller.jpg" width="200" height="113"> </div>
<div id="Layer1" style="position:absolute; width:200px; height:113px; z-index:1; left:6%; top:69%;"><img src="bild1.jpg" width="200" height="113" id="bild1" style="visibility:hidden"> </div>
<div id="Layer2" style="position:absolute; width:200px; height:113px; z-index:1; left:6%; top:69%;"><img src="bild2.jpg" width="200" height="113" id="bild2" style="visibility:hidden"> </div>
<div id="Layer3" style="position:absolute; width:200px; height:113px; z-index:1; left:6%; top:69%;"><img src="bild3.jpg" width="200" height="113" id="bild3" style="visibility:hidden"> </div>
<div id="Layer4" style="position:absolute; width:200px; height:113px; z-index:1; left:6%; top:69%;"><img src="bild4.jpg" width="200" height="113" id="bild4" style="visibility:hidden"> </div>

</th>

Ich vemute, ich hab mir falsch ausgedrückt, mit dem Schweben .
Wenn ich die browsergröße des Fensters/Seite minimiere, wandert das bild, bzw. alle die, die denb Rollover Effekt haben an eine andere Stelle. Und genau diese sollen fest positioniert bleiben. Auch wenn ich alle 4 bilder mit % von left & top eingebe, bleiben sie nicht an der Stelle verwachsen Gibt es da keinen Trick?
Bin zwar am experimentieren, aber was nutzen mich die Abänderungen der Ziffern. Sobald ich die Seite minimiere, ist das Bild woanders.

Danke schonmal,
Apoplexy

Apoplexy · 20. Dez. 2004

Geschafft

leixe · 22. Feb. 2005

Wie hast du es geschaft was hast du gemacht.
Ich hab son ähnliches problem und zwar mit ebenen. Das mit dem Prozent hat mir nur zum teil funktioniert.
Ich habe eine Seite mit zwei Texten und einem Bild, also drei ebenen. Sobald ich die auflösung ändere verschieben sich auch die bilder und die texte. Kann mir vieleicht auch jemand helfen.

dkdenz · 22. Feb. 2005

Quelltext oder Link, bitte...

leixe · 23. Feb. 2005

Hat sich erledigt ich habs mit prozentangeben geschafft. Nur das komische ist im layout fenster sieht es ganz anders als wie in der vorschau. Bei Layout sind die Ebenen ganz verschoben dargestellt. Naja vieleicht liegts am GoLive von Adobe. Ich danke euch trotzdem.

dkdenz · 23. Feb. 2005

Nix gegen GoLive, denn das habe ich auch,
aber wenn Du wirklich webtaugliche Sites bauen willst,
kommst Du um einen reinen QT-Editor nicht drumrum!

Und vor Allem solltest Du darauf achten,
das Du immer genaue Angaben machst.

Bsp.

Code:

<img src="teller.jpg" width="200" height="113">
<img src="teller.jpg" width="200" height="113" border="0" alt="irgendwas">

Und visuelle Tests solltest Du immer auf dem Server machen, auf dem das dann später auch läuft...

leixe · 24. Feb. 2005

danke für den tipp werde ich mir merken

Apoplexy · 24. Feb. 2005

Hi leixe,
freut mich das es vonselbst geklappt hat.
Leider hab ich es gerde erst gelesen...
Ciao
Apoplexy

Ebene fest positionieren

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member