[GastForen Archiv Adobe GoLive iFrames in CSS-Bereich

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

iFrames in CSS-Bereich

Darwin
Beiträge gesamt: 19

23. Apr 2006, 15:58
Beitrag # 1 von 11
Bewertung:
(2158 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo.
Ich habe in meiner Homepage einen 2-spaltigen CSS Bereich (Links Navigation,Rechts Inhalt).
Wenn ich nun im Inhaltsbereich Text eingebe bildet sich wie gewünscht ein vertikaler Scrollbalken bei Textüberlauf.

Ich möchte nun in diesen Inhaltsbereich iFrames (mehrere Amazon-Links in eigenen CSS-Schweberahmen) einfügen allerdings gelingt es mir nicht das sich ein Scrollbalken bildet sobald die iFrames nicht mehr vollständig in den CSS-Bereich passen.
Die iFrames setzen sich nach unten fort und überlagern den Seiteninhalt unter dem Inhaltsbereich.

Ich hoffe ihr versteht das Problem und könnt mir helfen.

Schönen Gruß
Michael

(Dieser Beitrag wurde von Darwin am 23. Apr 2006, 16:03 geändert)
X

iFrames in CSS-Bereich

Wulf
Beiträge gesamt: 80

23. Apr 2006, 16:34
Beitrag # 2 von 11
Beitrag ID: #225082
Bewertung:
(2151 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Michael,

Iframes sind tatsächlich nicht so ganz einfach. Irgendwie verhalten die sich immer ein wenig anders als man möchte.

Folgendes kannst Du machen, um sie zu steuern:

Gib den Iframes eine feste Breite und Höhe. Da sie sich sowieso nicht dynamisch anpassen, kannst Du sie so kalkulierbar in das Layout einbinden.

Zusätzlich baue ich um meine Iframes immer jeweils einen eigenen Schweberahmen drum herum, denen ich die selbe Breite und Höhe gebe, wie dem Iframe selber. Damit kann ich sie dann auch in andere Elemente einbauen ohne dass sie mir über den unteren Rand hinausschießen.

Hoffe, ich konnte Dir etwas weiterhelfen. Sonst bitte einfach noch mal die Frage präzisieren.

Viele Grüße
Wulf


als Antwort auf: [#225076]

iFrames in CSS-Bereich

SabineP
Beiträge gesamt: 7586

23. Apr 2006, 17:08
Beitrag # 3 von 11
Beitrag ID: #225085
Bewertung:
(2148 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Michael,

das wären dann drei vertikale Scrollbalken,
einen für die Seite
einen für den scrollbaren Bereich
und einen für den iframe

Solche Seiten sind meistens nicht mehr bedienbar.

Gruß Sabine


als Antwort auf: [#225076]

iFrames in CSS-Bereich

Darwin
Beiträge gesamt: 19

23. Apr 2006, 17:09
Beitrag # 4 von 11
Beitrag ID: #225087
Bewertung:
(2146 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Wulf.

Danke für deine Antwort, aber genau so wie du es beschreibst habe ich es eigentlich gemacht.
Funktioniert aber nicht.
Ich habe so etwas noch nie gemacht,bin aber sicher es gibt eine simple Lösung.Komm wohl nur nicht drauf....

Zur Verdeutlichung hab ich die Unterseite mal hochgeladen:
http://www.michael-jetter.net/Literatur

Für weitere Vorschläge wäre ich sehr dankbar.

Grüße
Michael


als Antwort auf: [#225082]

iFrames in CSS-Bereich

Wulf
Beiträge gesamt: 80

23. Apr 2006, 17:22
Beitrag # 5 von 11
Beitrag ID: #225089
Bewertung:
(2144 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Michael,

Du hast die DIVs für die Iframes absolut positioniert.

Absolut postitionierte Elemente beeinflussen die Höhe des sie umgebenden Elementes nicht mehr.

Lösung: DIVs als Static (Normalzustand) definieren und Elemente innerhalb des Contetn-Elemntes im Fluss belassen.

Viele Grüße
Wulf


als Antwort auf: [#225087]

iFrames in CSS-Bereich

Darwin
Beiträge gesamt: 19

23. Apr 2006, 17:39
Beitrag # 6 von 11
Beitrag ID: #225090
Bewertung:
(2140 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Dankeschön, hat halbwegs funktioniert.
Die iFrames scrollen nun wunderbar mit.

Allerdings scrollt der Div mit der "Problembeschreibung" nicht mit bzw. lässt sich nicht fest neben einem iFrame positionieren.
Wieso funktioniert da das "statische" Positionieren nicht?
Was meintest du genau mit "Elemente im Fluss belassen"? Das würd ich gern tun wenn ich wüsste wie...

Grüße
Michael


als Antwort auf: [#225089]

iFrames in CSS-Bereich

SabineP
Beiträge gesamt: 7586

23. Apr 2006, 17:51
Beitrag # 7 von 11
Beitrag ID: #225091
Bewertung:
(2134 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Michael,

mit dem Code für Deine Amazon-Links stimmt etwas nicht:

Code
 
<iframe src="http://rcm-de.amazon.de/e/cm?t=michaeljetter-21&o=3&p=8&l=as1&asins=3937285113
&nou=1&fc1=000000&IS2=1&lt1=_blank&lc1=0000ff&bc1=000000&bg1=ffffff&f=ifr"
style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>


Hast Du mal auf den Button "Kaufen bei Amazon" in Firefox geklickt?

Da verschwindet lediglich die gesamte Buchanzeige aus Deiner Seite und sonnst nichts.

Verwende besser den Orginalcode den Du bei Amazon generieren kannst und nicht diesen.


als Antwort auf: [#225090]
(Dieser Beitrag wurde von SabineP am 23. Apr 2006, 17:53 geändert)

iFrames in CSS-Bereich

Wulf
Beiträge gesamt: 80

23. Apr 2006, 18:01
Beitrag # 8 von 11
Beitrag ID: #225096
Bewertung:
(2131 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Michael,

das sind die "blöden Tücken" der modernen CSS-Formatierung. Ich schau da auch noch nicht immer ganz hinter alles ...

Wenn Du Elemente mit position:absolute positionierst verstehen die Browser das so, dass sie relativ zum Startpunkt irgendwo (auch neben dem umgebenden Element) auf der Seite positioniert werden. Das setzt aber eben voraus, dass das positionierte Element die Größe des umgebenden Elementes (das Elternelement) nicht beeinflusst. Es dehnt sich eben nicht mit aus.

Wenn Du mit position:relative positionierst sollte sich das umgebende Element in der Höhe anpassen. Die Browser berechnen die Höhe des Elternelementes aber immer ab dem Ankerpunkt. Wenn der DIV-Rahmen mit top:50px positioniert wurde, ragt es im Zweifel unten trotzdem 50px über das Elternelement hinaus.

Außerdem hat der FF an dieser Stelle zwei Bugs, die es dann noch auszugleichen gilt ...

... alles ziemlich kompliziert wie ich finde. Aber leider nun mal die Zukunft.
;-)

Der Kniff ist, die Ebene nicht über position:... zu positionieren sondern im Normalzustand (position:static) zu belassen. Das bezeichnet man mit "das Element im Fluss (der aufeinanderfolgenden Inhalte der Seite)" zu belassen. Damit beginnt die Box immer(!) genau dort, wo sie verankert ist.

Eine von Dir evtl. versuchte Positionierung mit top:... oder left:... ist dann natürlich nicht mehr möglich. Du kannst aber mit margin:... arbeiten.

Hoffe, das konnte Dir ein wenig weiterhelfen. Sonst frag einfach noch mal.

Viele Grüße
Wulf


als Antwort auf: [#225090]

iFrames in CSS-Bereich

Darwin
Beiträge gesamt: 19

23. Apr 2006, 18:39
Beitrag # 9 von 11
Beitrag ID: #225104
Bewertung:
(2128 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine.
Der verwendete Code ist der Originalcode von Amazon.
Ich habs eben in Firefox 1.5 und IE getestet und bei mir funktioniert alles einwandfrei.Die Links öffnen brav in einem neuen Fenster... ??

Wulf,
Prinzipiell verstehe ich was du meinst,kann es allerdings nicht wirklich umsetzen.
Der Beschreibungstext ist nun statisch positioniert,scrollt mit und beginnt dort wo er verankert ist.
Allerdings gelingt es mir nicht den Text rechts neben die Amazon-Links zu setzen.
Der Anker lässt sich im Layoutmodus nicht nach rechts verschieben und ein nach rechts einrücken über Pixelangaben im Inspektor funktioniert nicht.
Ich überlege mir ob es vielleicht mit einer stinknormalen 2-spaltigen Tabelle einfacher wäre ??

Update: http://www.michael-jetter.net/Literatur

Grüße


als Antwort auf: [#225096]

iFrames in CSS-Bereich

Wulf
Beiträge gesamt: 80

23. Apr 2006, 19:05
Beitrag # 10 von 11
Beitrag ID: #225110
Bewertung:
(2122 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Michael,

ja, ist wirklich nicht ganz einfach und Tabellen halte ich nicht für verkehrt. Sind nach wie vor das Layout-Mittel Nummer 1.

Aber wenn Du Lust auf die moderne Form der Layout-Gestaltung per CSS hast, macht das nach etwas Einarbeitungszeit ebenfalls Spaß. Und man kann auf einmal ganz anders an die Seiten-Gestaltung herangehen. (Schau mal hier: http://www.csszengarden.com/tr/deutsch/ Viele Seiten mit einem Quellcode, nur das CSS wechselt.)

Wenn Du den Text rechts neben den Iframe-DIVs weiterfließen lassen willst, kannst Du dies mit machen, indem Du ihn mit float:left formatierst. Dann fließt der andere Text rechts daneben weiter. Probiere es mal aus.

Umfangreiche Infos zu CSS-Layouts findest Du hier:
http://de.selfhtml.org/...uts/mehrspaltige.htm
http://barrierefrei.e-workers.de/

Speziell zu Float finde ich diese Seite ganz gut:
http://css-technik.de/css-examples/219_9/

Sonst frag halt einfach noch mal.

Viele Grüße
Wulf


als Antwort auf: [#225104]

iFrames in CSS-Bereich

Darwin
Beiträge gesamt: 19

23. Apr 2006, 19:14
Beitrag # 11 von 11
Beitrag ID: #225114
Bewertung:
(2121 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Herzlichen Dank soweit...

Ich setze mich die Tage noch mal daran und probiere noch ein bischen herum.
Trotz 12 Stunden Videoseminar und nem billigen Buch ist das Ganze erstaunlich nervig.... :)

Schöne Zeit
Michael


als Antwort auf: [#225110]
X