NiK-IT.de - iFrames mit CSS

ACC Menu

SkypeMe:

Firefox Ad

Herzlichen Glückwunsch zu Ihrem Browser..
Durch die Weiten des WEBs mit:

An apple a day keeps the doctor away...

iFrames mit CSS

Samstag, 7. Oktober 2006

Mit Hilfe von CSS lassen sich wie iFrames aussehende, scrollbare Boxen erstellen.

Original: http://www.webmaster-resource.de/tricks/css/iframes-mit-css.php

Die Textbox im folgenden Beispiel sieht aus wie ein iFrame und besitzt bei entsprechend viel Text auch automatisch einen Scrollbalken.

<html>
<head>
<style type="text/css">
<!--
#Box {
   text-align: justify;
   width: 320px;
   height: 220px;
   background: #FFDDBB;
}
.Rahmen {
   padding: 10px;
}
.iFrame {
   overflow: auto;
   width: 300px;
   height: 200px;
}
-->
</style>
 
<title>iFrames mit CSS</title>
</head>
<body>
 
<div id="Box">
 <div class="Rahmen">
  <div class="iFrame">
  Lorem ipsum dolor...
  </div>
 </div>
</div>
 
</body>
</html>

Beispiel:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ut dolor. Donec neque velit, hendrerit quis, pulvinar sed, sagittis nec, mauris. Suspendisse lobortis, lacus nec aliquet egestas, elit eros sodales mauris, vel aliquet est elit non neque. Vivamus vel eros vel orci luctus egestas. Sed nisl. Curabitur vestibulum posuere nibh. Nullam dolor leo, molestie sit amet, sagittis sit amet, convallis eget, lectus. Proin quis dolor nec pede cursus faucibus. Morbi placerat dolor eu risus. Donec in diam eu elit imperdiet mollis. Etiam ut arcu. Maecenas mi elit, gravida a, eleifend id, aliquet sit amet, massa. Curabitur vehicula sapien in ipsum. Fusce aliquam, nibh a condimentum facilisis, wisi nulla eleifend tellus, at iaculis tortor mi tristique wisi. Nunc tellus. Donec malesuada tincidunt massa. Quisque id nisl et augue molestie nonummy. Maecenas pretium, magna non sollicitudin iaculis, erat quam mollis sapien, nec lobortis dui ligula sit amet leo. Integer pellentesque, augue vel hendrerit egestas, lectus mauris gravida mi, eu ultrices nunc ipsum quis turpis. Praesent congue nunc a lectus. Nulla facilisi. Nulla elit. Morbi egestas justo quis odio. Sed placerat lorem non felis. In ultrices vestibulum felis. Morbi luctus purus a libero. Quisque rutrum. In euismod. Suspendisse id urna vitae eros condimentum feugiat. Curabitur ultrices massa id tellus. Maecenas orci quam, commodo vitae, tristique dignissim, dictum sed, libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus rhoncus. Ut justo ipsum, ullamcorper accumsan, vestibulum quis, posuere eu, wisi.

< zurück