MrMurphy1: oberen Teil eines Frameinhaltes verdecken

Beitrag lesen

SELF-Forum

oberen Teil eines Frameinhaltes verdecken

MrMurphy1
– Informationen zu den Bewertungsregeln

Hallo,

du kannst auf die Frames ganz verzichten oder in das untere Frame die Lösung nach meinem Beispiel einbauen. Der Verzicht auf Frames ist eleganter. Du benötigst ein div und darin ein iFrame. In das iframe kommt dann die Verkaufsseite. Ein paar Erläuterungen habe ich direkt in die Beispielseite eingestellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>iFrame 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /*Grundeinstellungen*/
   @media all {
      * {
         box-sizing: border-box;
      }
      body {
         padding: 0;
      }
      /*Für IE 11*/
      main {
         display: block;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      div {
         overflow: hidden;
         height: 1750px;
         position: relative;
      }
      iframe {
         border: 0;
         position: absolute;
         top: -800px;
         width: 100%;
         height: 2550px;
      }
   }
   @media only screen and (max-width: 1230px) {
      div {
         height: 1800px;
      }
      iframe {
         top: -670px;
         height: 2650px;
      }
   }
   @media only screen and (max-width: 1024px) {
      div {
         height: 2200px;
      }
      iframe {
         top: -630px;
         height: 2850px;
      }
   }
   </style>
</head>
<body>
   <h1>iFrame</h1>
   <p>Von einem eingebundenem iFrame soll der obere Rand abgedeckt werden.</p>
   <p>Dies kann geschen, indem das iFrame in ein div (oder anderen passenden Container) eingebettet wird. Das div bekommt die CSS-Attribute "position: relative;" und "overflow: hidden;".</p>
   <p>Das iFrame das Attribut "position: absolute;".</p>
   <p>Anschließend werden beide mit "height" und das iFrame mit "top" so angepasst, dass vom iFrame oben und (und ggf. unten) der unerwünschte Inhalt abgeschnitten wird. Falls das iFrame bei Änderung der Fensterbreite seine Höhe ändert kann dass über Media Queries ausgeglichen werden. Durch den negativen top-Wert wird das iFrame über das div hinaus nach oben verschoben und durch das overflow wird der nach oben hinausgeschobene Inhalt nicht angezeigt.</p>
   <p>Dieses Beispiel benötigt noch etwas Feintuning und es sind bislang nur drei Fensterbreiten berücksichtigt.</p>
   <div>
      <iframe src="http://www.nordelektrik.de/prestashop/" name="Shop">
      <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: http://www.sprichwort-des-tages.de/zitat.htm</p>
      </iframe>
   </div>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
–
Informationen zu den Bewertungsregeln