• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Innerhalb eines iframe Fensters nebeneinander und untereinander

Taleras

Neues Mitglied
Hallo zusammen,

Ich gestalte gerade eine eigene Webseite, komme aber auf einer Seite noch nicht zurecht.
Ich bin Anfänger, was das Gestalten von Htmls angeht und hab meine Kenntnisse von der Seite Selfhtml.
Aber mit fehlen noch einige Grundkenntnisse, deswegen bin ich hier :))

Gut, auf der Seite sollen Bilder dargestellt werden, ich habe den Html entwurf unten einmal bereitgestellt.
Das ganze soll dann wie im Html Text aufgebaut sein:
Überschrift,
darunter dann jeweils untereinander Bildname, Details und das Bild selbst.
daneben dann entsprechend mit weiteren Bildern fortfahren.

Die Webseite wird in einem Iframe Fenster angezeigt.
(1) Ich möchte nun, dass die Webseite von allein erkennt, wenn der Rand des Iframe Fensters erreicht ist und dann automatisch darunter ganz links mit den nächsten Bildern (Name, Details, Bild) weitermacht.
(2) Wenn alle Bilder angezeigt sind, möchte ich selbst erzwingen können, dass es in die nächste Zeile geht, also darunter ganz links neu anfangen soll.

der html text unten ist nur mein entwurf. wenn das auf andere weise besser geht oder etwas fehlt, sagt es bitte :)
mit tabellen arbeite ich bewusst nicht, weil ich nicht möchte, dass ich jedesmal genau definieren muss, wann eine neue Zeile/ Spalte anfängt. die html datei soll das von sich aus erkennen und am iframe Fenster rand eben "runterspringen".

ich hab das forum schonmal nach hilfe durchforstet, bin aber nicht wirklich fündig geworden.
danke für jede hilfe.

mfg,


<div style="position:absolute; top:20px; left:20px; width:300px">

<font size="+3"> <u>Pictures</u> </font> <br>

<p style="float:left; width:100px; padding-top:10px">
<b>Picture</b> <br>
Details <br>
<img src="Picture.jpg"> </p>

<p style="float:left; width:100px; padding-top:10px">
<b>Picture</b> <br>
Details <br>
<img src="Picture.jpg"> </p>

<p style="float:left; width:100px; padding-top:10px">
<b>Picture</b> <br>
Details <br>
<img src="Picture.jpg"> </p>

<p style="float:left; width:100px; padding-top:10px">
<b>Picture</b> <br>
Details <br>
<img src="Picture.jpg"> </p>

</div>
 
das iframe fenster ist im grunde nebensächlich.

ich habe eine hauptseite und dort habe ich ein iframe fenster definiert, um darin eben die ganzen links aus der navigation anzuzeigen.
Es bildet einfach nur den "rahmen", um etwas darin anzuzeigen.. bitte nicht davon verwirren lassen.
 
Zuletzt bearbeitet:
Ich selber bin nicht so ein Fan von iframes. Hast Du Grundkenntnisse in PHP ? Möglicherweise ist der iFrame das Problem.

Kannst Du mir den Link zu Deiner Seite geben, damit ich mir ein besseres Bild verschaffen kann? Es fällt mir so nicht gerade Leicht Dir zu helfen.

Grüße
 
Hallo,
php kenne ich nicht, ich schau gleich mal auf selfhtml vorbei und schaue mir das mal an.
die seite ist leider noch nicht online, weil eben noch unvollständig...

welche infos brauchst du denn noch, um das problem besser zu verstehen?
 
Ich glaube die Ursache für deinen Punkt 1) ist das hier:

HTML:
<div style="position:absolute; top:20px; left:20px; width:300px">

Absolut positionierte Elemente sind aus dem Fluss genommen. Die wissen nicht wie groß ein Viewport ist und können sich und ihre Inhalte auch nicht daran ausrichten.

Verzichte auf absolute Positionierung, besonders für Einsteiger ist das immer ein Stolperstein.

Und verwende bitte Code-Tags wenn Du Quellcode hier im Forum zeigst.
 
Zurück
Oben