Bild automatisch verschieben

[Martin Domdey]

Hallo!

Ich habe auf einer Seite ein Bild mittels CSS-Klasse auf eine bestimmte Stelle fest definiert:

.imgsys { background-color: #ffffff; border: 2px ridge #ffffff; position: absolute; right: 25px; top: 158px; }

Wenn bei größerem Inhalt jedoch auf der rechten Seite eine Scrollbar auftaucht, überdeckt das Bild halb die Scrollbar. Weiter links möchte ich das Bild aber nicht definieren, denn so würde es wiederum nicht gut aussehen, wenn bei weniger Inhalt keine Scrollbar vorhanden ist.

Meine Frage: Gibt es eine Möglichkeit, dass Bild bei Auftauchen einer Scrollbar rechts etwas weiter nach links zu verschieben? Mit CSS würde das bestimmt nicht gehen, aber mit JavaScript vielleicht?

Die Frage ist mir deshalb entstanden, weil ich diese CSS-Klasse für mehrere Seiten nutze, auf einer aber mehr Inhalt und demnach eine Scrollbar und bei einer anderen weniger Inhalt und keine Scrollbar vorhanden ist. Mit zwei Klassen zu arbeiten, wäre auch möglich - ich möchte aber, dass automatisch erkannt wird, wann eine Scrollbar erscheint und wann nicht, um dann das Bild entweder weiter links oder an jetziger Stelle zu platzieren.

Kann mir da jemand weiterhelfen?

Danke schon mal, Martin...

[wahsaga]

hi,

.imgsys { background-color: #ffffff; border: 2px ridge #ffffff; position: absolute; right: 25px; top: 158px; }

Wenn bei größerem Inhalt jedoch auf der rechten Seite eine Scrollbar auftaucht, überdeckt das Bild halb die Scrollbar.

Wie das?
Das ist normalerweise nicht möglich.

Es sei denn, du meinst nicht die Scrollbar des Elements, in dem du das Bild positioniert hast, sondern die eines anderen Elements, bspw. bei einem position-fixed-Workaround für ältere IE.

gruß,
wahsaga

[Martin Domdey]

Es sei denn, du meinst nicht die Scrollbar des Elements, in dem du das Bild positioniert hast, sondern die eines anderen Elements, bspw. bei einem position-fixed-Workaround für ältere IE.

Richtig, das Bild gehört nicht zum selben Element und kann/darf daher die Scrollbar überdecken. Nur, wie kann ich jetzt mein Problem lösen. Hast Du da eine Idee?

Danke schon mal, Martin...

[wahsaga]

hi,

Richtig, das Bild gehört nicht zum selben Element und kann/darf daher die Scrollbar überdecken. Nur, wie kann ich jetzt mein Problem lösen.

Welches Problem - wenn es doch "kann/darf"?

gruß,
wahsaga

[Martin Domdey]

hi,

Richtig, das Bild gehört nicht zum selben Element und kann/darf daher die Scrollbar überdecken. Nur, wie kann ich jetzt mein Problem lösen.

Welches Problem - wenn es doch "kann/darf"?

Mit "kann/darf" meine ich, dass es möglich ist. Jedoch ist der Effekt nicht erwünscht. Wenn in dem anderen Element eine Scrollbar erscheint, soll einfach nur das Bild ein Stück weiter nach links weichen. Ist das möglich, mit CSS oder JavaScript - und wenn, wie nur?

Danke, Martin...

[wahsaga]

hi,

Wenn in dem anderen Element eine Scrollbar erscheint, soll einfach nur das Bild ein Stück weiter nach links weichen. Ist das möglich, mit CSS oder JavaScript - und wenn, wie nur?

Über Vergleich von scrollHeight mit offsetHeight o.ä. könnte man vielleicht dynamisch ermitteln, ob der Elementinhalt zu Scrollbalken führt.

gruß,
wahsaga

[Martin Domdey]

hi,

Wenn in dem anderen Element eine Scrollbar erscheint, soll einfach nur das Bild ein Stück weiter nach links weichen. Ist das möglich, mit CSS oder JavaScript - und wenn, wie nur?

Über Vergleich von scrollHeight mit offsetHeight o.ä. könnte man vielleicht dynamisch ermitteln, ob der Elementinhalt zu Scrollbalken führt.

gruß,
wahsaga

Nun, danke erstmal!

Aber ich fürchte, ich stelle mich dazu zu blöd an. Also der Inhalt steht im Quelltext in einem div-Tag. Muss ich das JavaScript jetzt in diesen div-Tag mit einfügen, damit ich mit scrollHeight die Höhe des Textes in diesem div-Tag ermitteln kann. Ich komme einfach auf keine vernünftige Syntax. Wie muss ich denn ScrollHeight anwenden?

Grüße, Martin...

[wahsaga]

hi,

Aber ich fürchte, ich stelle mich dazu zu blöd an. Also der Inhalt steht im Quelltext in einem div-Tag. Muss ich das JavaScript jetzt in diesen div-Tag mit einfügen,

Nein, du kannst Javascript an vielen Stellen im Dokument einfügen.
Ggf. musst du aber vor dem Zugriff auf Objekte abwarten, bis diese existieren - Stichwort onload-Handler.

damit ich mit scrollHeight die Höhe des Textes in diesem div-Tag ermitteln kann. Ich komme einfach auf keine vernünftige Syntax. Wie muss ich denn ScrollHeight anwenden?

Grundlagenwissen in Javascript dürfen wir wohl voraussetzen.
Und scrollHeight ist dann lediglich eine Objekteigenschaft.

gruß,
wahsaga

[Martin Domdey]

Ich krieg das aber nicht ganz so hin.

Ich habe jetzt in den Quelltext geschrieben:

<body onLoad="h()">

und in den <div>-Tag:

<script type="text/javascript">
    function h() {
    alert(document.body.scrollHeight);
    alert(document.body.offsetHeight); }
 </script>

Erst mal nur, um die Werte per alert auszulesen - aber egal, wie ich den Textinhalt im <div>-Tag ändere, wird mir immer scrollHeight = 575 und offsetHeight = 579 ausgegeben. Die Werte müssten sich aber ändern. Ich bin mir auch nicht sicher, ob "body" in der alert-Klammer korrekt ist: ich beziehe mich ja nur auf den <div>-Tag und nicht auf den ganzen body.

Was habe ich falsch gemacht?

Grüße, Martin...

[wahsaga]

hi,

Ich bin mir auch nicht sicher, ob "body" in der alert-Klammer korrekt ist: ich beziehe mich ja nur auf den <div>-Tag und nicht auf den ganzen body.

Du meinst: Du beziehst dich auf body, willst dich aber auf den Div beziehen?
Dann mach das.

gruß,
wahsaga

[Martin Domdey]

warum werden mir bei beiden alerts eigentlich immer dieselben Werte ausgegeben, auch wenn ich den Text im div-Tag beliebig verändere?

[wahsaga]

hi,

warum werden mir bei beiden alerts eigentlich immer dieselben Werte ausgegeben, auch wenn ich den Text im div-Tag beliebig verändere?

Erzeugt der div-Inhalt denn einen Scrollbalken für body?

gruß,
wahsaga

[Martin Domdey]

Der div-Inhalt steht in einer Tabellenzelle, wird der Inhalt zu lang für die Zelle erscheint ein Scrollbalken nur an dieser Zelle, laut CSS: overflow:auto;

Das Bild habe ich an anderer Stelle in den Quelltext geschrieben, gleich unter <body>

<table class="imgsys">
  <tr>
    <td>
      <img src="../../../images/system/acheta.jpg" width="137" height="94">
    </td>
  </tr>
</table>

mit der CSS-Klasse:

.imgsys { background-color: #ffffff; border: 2px ridge #ffffff; position: absolute; right: 25px; top: 158px; }

Was muss ich denn in die alert-Klammer schreiben, dass er die Länge NUR des div-Inhalts ausliest.

Grüße, Martin...

[wahsaga]

hi,

Was muss ich denn in die alert-Klammer schreiben, dass er die Länge NUR des div-Inhalts ausliest.

Na was wohl - du musst die Eigenschaft des Divs abfragen.

Solche Javascript-Grundkenntnisse wie den Zugriff auf Elemente darf man doch wohl eigentlich voraussetzen - document.getElementById & Co. beispielsweise.

gruß,
wahsaga

[Martin Domdey]

Manchmal hab ich echt so'n Brocken vor der Nase...

Natürlich, getElementById!!! Warum bin ich da nicht selbst drauf gekommen???

Okay, vielen Dank, Martin