kostenloser Webspace werbefrei: lima-city

2 Iframes nebeneinander

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   johannestutorials

   johannestutorials hat kostenlosen Webspace.

   16:28, 5.1.2015

   Ich habe schon gegoogelt aber das ist mir alles zu hoch.
   Ich habe folgendes Problem, ich habe 2 Codes für Iframes (ca. 500x35ß) und möchte diese (gerne auch per PHP) nebeneinander und nicht untereinander haben.
   
   Wie realisiere ich das?
   
   Danke im voraus!
   Grüße
   Johannes

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. matthias-detsch

   

   matthias-detsch hat kostenlosen Webspace.

   16:33, 5.1.2015

   am einfachsten wäre es natürlich mit einer tabelle, aber es wäre auch eine möglichkeit, dies mit css zu machen, indem du dem linken iframe den style
   

   #idlinkesiframe{
   float: left;
   }

   
   verpasst und dem rechten

   #idlrechtesiframe{
   float: right;
   }

   
   
   (hoffe das funktioniert)
   Viele Grüße,
   matze

4. hechma

   

   hechma hat kostenlosen Webspace.

   18:10, 5.1.2015

   hallo johannestutorials,
   
   
   da iframes ja die eigenschaft haben das man eine feste höhe und eine feste breite angeben muss stellt sich die frage was passieren soll wenn der umliegende container schmaler wird als die beiden iframebreiten zusammen (falls dein layout nicht auch eine feste breite des beinhaltenden elements hat).
   
   es gibt eine vielzahl von möglichkeiten elemente im html nebeneinander auszuzeichnen, zb:
   
   
   mit einer tabelle

   <table>
   <tr>
   <td><iframe></iframe></td>
   <td><iframe></iframe></td>
   </tr>
   </table>

   vorteil: man kann auch das vertical-align der einzelnen zellen beeinflussen und die 100% höhe des elternelements abgreifen.
   nachteil: die verwendung einer tabelle ist nicht wirklich semantisch korrekt, da es sich ja nicht um taellarischen inhalt handelt. sollte der umschließende container zu klein werden um beide iframes nebeneinander anzeigen zu können entsteht ein overflow
   
   
   floated

   <iframe id="iframe1"></iframe>
   <iframe></iframe>
   <br id="clearfloat">

   #iframe1 {
      float:left;
   }
   #clearfloat {
      clear:left;
   }

   vorteil: wenn der umschließende container zu klein wird um beide iframes nebeneinander anzuzeigen wird der zweite automatisch in eine neue zeile umgebrochen
   nachteil: der gefloatete frame ist immer ganz am linken rand - eine zentrierung beider ist nicht so einfach möglich
   
   
   mit auszeichnung als inline-block

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

   div {
      text-align:center;
   }
   iframe {
      display:inline-block;
      margin: 0px auto;
   }

   vorteil: wenn der umschließende container zu klein wird um beide iframes nebeneinander anzuzeigen wird der zweite automatisch in eine neue zeile umgebrochen und es ist eine horizontale ausrichtung möglich.
   nachteil: eigentlich nichts
   
   
   absolut positioniert
   

   <div id="container">
      <iframe id="iframe1"></iframe>
      <iframe id="iframe2"></iframe>
   </div>

   #container {
      position:relative;
   }
   #iframe1 {
      position:absolute;
      top:0px;
      left:0px;
   }
   #iframe2 {
      position:absolute;
      top:0px;
      right:0px;
   }

   vorteil: es kann pixelgenau positioniert werden - und auch überlagerungen sind möglich
   nachteil: die iframes befinden sich nicht im static-html-layout, also sollte dem container-div die entsprechende höhe und breite auch noch zugewiesen werden
   
   
   mit flexbox
   

   <div id="wrapper">
      <div id="links">
         <iframe></iframe>
      </div>
      <div id="rechts">
         <iframe></iframe>
      </div>
   </div>

   #wrapper {
      display:flex;
      align-items:flex-start;
      flex-wrap:wrap;
   }
   #links{
      width:50%;
   }
   #rechts {
      width:50%;
   }

   vorteil: eine vielzahl an formatierungsmöglichkeiten wie zb auch die reihenfolge ungeachtet der position im quelltext
   nachteil: wird eventuell nicht von alten browsern unterstützt
   
   
   durch frameset
   man könnte dorst wo die beiden iframes stehen sollen einen einzigen iframe mit doppelter breite setzten, in dessen quelldokument ein frameset definieren das aus zwei nebeneinander angeordneten frames besteht - aber da habe ich jetzt keine lust mehr zu... :)
   
   
   ich denke die inline-block lösung ist am besten für dein anliegen geeignet.
   
   
   lg hechma
   
   Beitrag zuletzt geändert: 6.1.2015 17:41:09 von hechma

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?