Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
kenapa footernya gini ya gan ?
gimana supaya footernya menempel terus di bawah ?
ini code ane gan
#copyright{
margin-bottom: 0px;
width: 100%;
position: absolute;
height:50px;
line-height:50px;
background:#3c3a3a;
color:#fff;
padding-left: 10px;
}
20 Jawaban:
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* tinggi dari footer */
background:#6cf;
}
coba style ini ..
saya pikir itu karna position nya absolute gan...
seharusnya apa gan kalo gak absolute soalnya itu dah ane coba pake fixed ntar malah ngikut terus pas di scroll
<?php
require_once "init.php";
require_once "view/header.php";
$articles = tampilkan();
if(isset($_GET['cari'])){
$cari = $_GET['cari'];
$articles = hasil_cari($cari);
}
?>
<form action="" method="get" class="pencarian">
<input type="search" name="cari" placeholder="Cari Disini gan!...">
</form>
<div class="pagination">
<?php for($i=1; $i<=$pages; $i++){ ?>
<a href="?halaman=<? echo $i ?>"> <? echo $i ?> </a>
<?php } ?>
</div>
<?php
$blog = mysqli_query($link, "SELECT * FROM blog");
while($row= mysqli_fetch_assoc($articles)):
?>
<div class="table-row-equal" >
<div class="col-md-6 col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="upload/<?php echo $row['gambar']; ?>">
<div class="caption">
<h3><?= $row['judul']; ?></h3>
<p>
<?= excerpt($row['isi']); ?>
</p>
<div id="menu_thumb">
<p class="waktu"> <?= $row['waktu']; ?> </p>
<p class="tag"> Tag: <?= $row['tag']; ?> </p>
<a href="edit.php?id=<?= $row['id']; ?>" class="btn btn-primary"> Edit </a>
<a href="delete.php?id=<?= $row['id']; ?>" class="btn btn-danger"> Hapus </a>
<a href="single.php?id=<?= $row['id']; ?>" class="btn btn-info"> Baca Selengkapnya </a>
</div>
</div>
</div>
</div>
</div><!--akhir thumbnail row-->
<?php endwhile; ?>
<br><br>
<?php
require_once "view/footer.php"
?>
<link rel="stylesheet" href="view/style.css">
<footer>
<div id="copyright">Copyright © JarKom 2017 . All right reserved.<span id="withlove"> [ ] with
<span style="color:pink">❤</span> in Klaten - Indonesia</span> </div>
</footer>
Contohh yang pake position..
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;</div>
<div class="absolute">This div element has position: absolute;</div>
</body>
</html>
Contoh yang gk pake position gann.. Mungkin bisa membantu
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;</div>
<div class="absolute">This div element has position: absolute;</div>
</body>
</html>
Gini udah di coba ?
#copyright{
margin-bottom: 0px;
width: 100%;
background:#3c3a3a;
color:#fff;
padding-left: 10px;
}
#footer {
width:100%;
height:60px; /* tinggi dari footer */ Ini kok dibuat seperti ini gan ?
background:#6cf;
}
Untuk style footer nya gan.. ada dua contoh yang pake position absolute dan relative juga yang tanpa kedua nya.. coba dipelajari gan
coba ini gan.
bottom: 0
dan
position: fixed
#copyright {
bottom: 0;
position: fixed;
}
coba agan lihat di sini [link]http://stackoverflow.com/questions/13788357/css-for-fixed-footer[/link]
lihat juga preview yg ane buat di [link]http://codepen.io/orangtanah/pen/RKmENx[/link]
bisa gan tapi kalo pake fixed kalo di scroll footernya ngikut gan, cara ngatasinnya gimana gan?? :)
coba di cssnya dibuat seperti ini gan
footer {
width: 100%;
height: 40px;
margin-top: 871px;
position: fixed;
}
