Membuat iframe tanpa iframe | tentangrifai-dotcom

19 Aug

Membuat iframe tanpa iframe

Posteds by admin in Tentang Website

tags: css, html

Dengan design layout website yang tidak memungkinkan untuk melar ke bawah.. kita sering mengakali dengan <iframe> tags dari html…
Fungsinya memungkinkan untuk scroll content sehingga halaman tidak menjulur kebawah pada content yang panjang…

Saya kurang puas jika tags ini diaplikasikan pada website basis cms opensource . karena pd prinsipnya sebuah frame meload halaman lain seperti pada tags berikut:

<iframe src=”source_html_anda”></iframe>

jika anda membuat website dengan cms-open source semacam joomla/drupal/auracms , anda tentu kesulitan memberikan source iframe pd sebuah content aktif halaman web tersebut… karena biasanya cms-opensource (joomla) memiliki 1 file template yang mem-buffer fungsional fitur2x web..

Untuk mengakali hal tersebut anda dapat melakukannya menggunakan CSS dengan tags :

overflow:scroll;

Untuk lebih jelasnya , silakan copy paste contoh listing html code penggunaan css iframe berikut ini :

<html >
<head>
<title>Untitled Document</title>
<style type=”text/css”>
.scroll{
position:static ;
margin-left:0px;
padding-left:20px;
padding-top:15px;
color:#FFFFF;
overflow:scroll;
height:300px;
border:solid;
border-width:thin;
border-color:#cccccc;
width:200px;
}
</style>
</head>
<body>
<p class=”scroll”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eros. Donec placerat magna et ligula. Integer consequat enim fringilla nisi fringilla iaculis. Donec ultricies libero ut neque. Nulla elementum nisi in ligula. In ullamcorper. Pellentesque vehicula, leo sagittis ultrices semper, eros sem ultricies elit, sed viverra tellus erat ut erat. Nunc vehicula. Aliquam eros. Ut cursus, turpis nec laoreet lacinia, erat odio scelerisque leo, sit amet sodales lacus tellus eget elit. Mauris magna orci, porttitor ut, pretium sed, faucibus vel, elit. Maecenas blandit, dui sit amet auctor suscipit, eros nunc lobortis elit, ac varius sem magna et enim.<br />
</p>
</body>
</html>