Sahabat harviacode, berikut ini kita akan membuat halaman dengan banner yang posisi tetap. Apabila discroll ke bawah, maka konten akan menutupi banner, sedangkan posisi banner tetap. Berikut ini adalah demonya.
Dasar
Baik untuk membuatnya buatlah file index.php dengan kode sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html> <head> <title>harviacode.com</title> <style> body{ margin: 0px; } header{ position: fixed; height: 80px; /* tinggi header */ z-index: 10; background: white; width: 100%; border-bottom: 1px solid lightgrey; } #banner{ position: fixed; top: 80px; /* sama dengan tinggi header */ width: 100%; height: 300px; /* tinggi banner */ background: green; background-size: cover; } #content{ position: relative; top: 380px; /* tinggi header + tinggi banner */ width: 100%; background: white; min-height: 1500px; } </style> </head> <body> <div id="container"> <header> <h1>Header</h1> </header> <div id="banner"> Banner </div> <div id="content"> Content </div> </div> </body> </html> |
Yang perlu menjadi kunci pada tutorial ini adalah posisi fixed untuk header dan banner, sedangkan pada content posisinya adalah relative. Sehingga saat discroll, posisi header dan banner tidak berubah. Selain itu nilai z-index header yang lebih besar dari content akan menjaga header berada pada posisi di atas content.
Jalankan index.php melalui browser anda dan cobalah scroll ke bawah, maka posisi header dan banner akan tetap selanjutnya content akan menutup banner.
Percantik Tampilan
Setelah berhasil membuat dasarnya, tinggal kita percantik tampilannya dengan menambahkan menu, gambar pada banner serta konten. Berikut ini adalah kode index.php setelah kita lengkapi dengan menu, gambar dan konten.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!doctype html> <html> <head> <title>harviacode.com</title> <style> body{ margin: 0px; } header{ position: fixed; height: 80px; /* tinggi header */ z-index: 10; background: white; width: 100%; border-bottom: 1px solid lightgrey; } #banner{ position: fixed; top: 80px; /* sama dengan tinggi header */ width: 100%; height: 300px; /* tinggi banner */ background: url('banner.jpg'); background-size: cover; } #content{ position: relative; top: 380px; /* tinggi header + tinggi banner */ width: 100%; background: white; min-height: 300px; } /*css di bawah ini hanya pelengkap aja :)*/ #content-wrapper, #header{ width: 800px; margin: auto; } #brand{ float: left; font-size: 1.5em; text-transform: uppercase; } #nav{ text-align: right; } #menu li{ display: inline-block; margin-top: 6px; margin-left: 20px; text-transform: uppercase; } p{ text-align: justify; } </style> </head> <body> <div id="container"> <header> <div id="header"> <div id="brand"> Harviacode </div> <div id="nav"> <ul id="menu"> <li>Home</li> <li>About</li> <li>Contact Us</li> </ul> </div> </div> </header> <div id="banner"> Banner </div> <div id="content"> <div id="content-wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin ut leo nec egestas. Curabitur vel libero porta, sagittis nulla quis, luctus velit. Suspendisse eu cursus massa, non gravida odio. Aliquam erat volutpat. Donec at facilisis lorem. Ut dignissim congue orci et porttitor. Phasellus nibh leo, pretium et condimentum ac, malesuada ut tortor. Aenean non ante in nunc malesuada volutpat vitae id augue. Phasellus magna dui, pulvinar ac finibus in, pellentesque at erat. Sed egestas ipsum eget mi lacinia, id rhoncus eros fringilla. Curabitur eu mauris ultrices, varius arcu sodales, ullamcorper erat. Aenean placerat sem in mattis faucibus. Curabitur ultricies efficitur ex, sit amet lacinia tellus pellentesque in. Nam vehicula libero sit amet eleifend imperdiet.</p> <p>Cras rhoncus arcu non nibh rutrum, non tincidunt purus faucibus. Suspendisse vitae tortor feugiat libero luctus blandit vitae a diam. In efficitur libero eget metus porttitor semper. Morbi lobortis sem aliquam sagittis volutpat. Quisque et malesuada tortor. Integer tincidunt in turpis euismod tincidunt. Nam vehicula dapibus erat, et finibus ligula. Proin in aliquet nisi, interdum tempor tellus. Pellentesque non justo eget enim feugiat laoreet nec at arcu. Donec suscipit, lacus ac hendrerit tincidunt, mi mi euismod nulla, eu vulputate dui leo ut diam. Phasellus blandit elit non molestie laoreet. Sed eget ipsum eget tortor placerat bibendum. Suspendisse quis neque pharetra, iaculis tortor ac, commodo enim.</p> <p>Quisque finibus sit amet neque a auctor. Mauris vitae neque dignissim, tempor urna eu, efficitur purus. Vestibulum vel quam cursus, tincidunt nisi facilisis, ultrices nibh. In tristique non velit maximus venenatis. Morbi ex mauris, eleifend in est sed, lacinia ultricies arcu. Morbi non orci nisi. Nulla ut risus tincidunt, consectetur odio non, consectetur mauris. Suspendisse id ipsum sit amet arcu euismod semper. Etiam at erat quis leo feugiat posuere sed quis felis. Sed neque nisi, volutpat eget venenatis sed, ultrices luctus nulla. Maecenas pulvinar risus non diam iaculis, finibus semper quam fringilla. Fusce sit amet semper ante. Integer quis sem urna.</p> <p>Nulla blandit vulputate eros. Phasellus ultricies condimentum mi, id euismod ante auctor ut. Duis quis varius justo. Morbi nec venenatis metus. Quisque nec sem vestibulum, suscipit diam sit amet, porttitor eros. Curabitur semper ipsum posuere nisi pretium blandit pretium eget est. Integer vulputate consectetur odio, in dictum nisi commodo nec. Donec ac nunc quam. Curabitur sollicitudin nisl ut lorem pulvinar, bibendum pulvinar lorem facilisis. Cras et sodales est.</p> <p>Nunc sed scelerisque lorem. Maecenas dignissim justo quam, nec porttitor metus tincidunt at. Cras finibus urna lacus, sed imperdiet ante euismod et. Ut pharetra odio eu varius sollicitudin. Nullam eu ornare lorem, sed viverra lectus. Aliquam elementum cursus lectus, nec vestibulum tellus fermentum sed. Curabitur risus nulla, maximus eu nulla et, fringilla tristique neque. Donec tristique, nisl non bibendum gravida, ante sapien hendrerit erat, eu porta tortor mauris ut enim. Vestibulum non mi nisl. Curabitur commodo, nulla id ullamcorper posuere, ligula felis consectetur sapien, a blandit turpis odio in lorem. Fusce porta aliquam lacus quis commodo. Etiam tempor dui ac est mollis tempor. Donec id ultricies turpis. Morbi imperdiet erat viverra sem interdum faucibus. Etiam pulvinar, ex ac vulputate venenatis, urna nisi accumsan quam, ut porta dui risus a leo. </p> </div> </div> </div> </body> </html> |
Mudah bukan, anda bisa mengkombinasikan dengan bootstrap agar tampilan menjadi lebih menarik dan responsive. Terima kasih telah berkunjung ke harviacode.com. Silahkan berkomentar di kolom komentar di bawah ini.
Recent Comments