• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Ebene fest positionieren

Apoplexy

New member
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:
 
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. :confused:

Gruß,
Apoplexy
 
Zuletzt bearbeitet:
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>
 
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? :confused:
Danke,
Apoplexy
 
Zuletzt bearbeitet:
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%;
 
ö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!
 
@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. :confused:

Danke,
Apoplexy
 
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.
 
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
 
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
 
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.
 
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.
 
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...
 
Zuletzt bearbeitet:
Zurück
Oben