Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Membuat gambar rata Bawah
Hi Pak Hilman, Terima kasih jawaban anda di <a href='http://sekolahkoding.com/forum/tanya/Anchor-text-Gambar-Rata-Bawah'>http://sekolahkoding.com/forum/tanya/Anchor-text-Gambar-Rata-Bawah</a>
============
Sudah saya coba seperti yg Bpk rekomendasikan, tapi gambar2 diwebsite saya itu tingginya tidak sama, jika memakai img { height: 180px;} atau 360px, atau ukuran apa saja, smua gbr jadi 1 ukuran, shingga tinggi & lebar gbr tdk sesuai. Di kode HTML, Jika buat gbr rata bawah, kodenya valign="bottom", untuk rata atas kodenya valign="top"
Contoh Rata Bawah
<table border="1">
<tr>
<td width="300" height="600" valign="bottom"><img border="1" src="images/panama-outdoor-corner-rattan-sofa.jpg" width="250" height="250"><br>Contoh</td>
</tr>
</table>
==================
Contoh Rata Atas:
<table border="1">
<tr>
<td width="300" height="600" valign="top"><img border="1" src="images/panama-outdoor-corner-rattan-sofa.jpg" width="250" height="250"><br>Contoh</td>
</tr>
</table>
==================
Namun website yang sedang saya design menggunakan css
(ini web saya : <a href='http://www.sofacatalogue.com/curved-sofa.html'>http://www.sofacatalogue.com/curved-sofa.html</a> )
Secara otomatis gambar rata atas, akan tetapi jika saya ingin membuat gambar diwebsite saya tersebut menjadi rata bawah, kode apa yang harus saya tambahkan. Terima kasih
salam
suwanto
9 Jawaban:
silakan dilihat mas, barangkali ini yang dicari: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp pakai
vertical-align: xxx
Hello Pak Bagaskara Wisnu, Saya telah mencoba menggunakan metode yang Bapak sharing, namun tidak berhasil. Kode tersebut hanya bisa di gunakan jika gambar satu dengan gambar yang lain di susun dari atas kebawah. namun di website saya, gambarnya tersusun ke samping dan kebawah. Apakah ada cara lain untuk membuat gambar rata bawah dan sejajar dengan gambar yang ada di sampingnya.??
Terima kasih
Suwanto
Jawaban Terpilih
Coba ditambah satu pembungkus di bagian gambar aja, misalnya
<div class="img_wrapper">
<img src="">
</div>
terus pembungkusnya dikasih tinggi absolute, sama posisi relative (contoh aja)
.img_wrapper{
position:relative; height: 120px;
}
dan gambarnya sekarang absoute terhadap pembungkusnya
.img_wrapper img{
position: absolute; bottom:0px;
}
kalo berhasil, dipelajarin ya mas, penting ini hehe, kalo ada masih ga jelas bilang aja
Terima kasih Pak Hilman, Sudah Saya Coba Metode yang Bapak berikan, Gambar nya berhasil rata kebawah, Namun achor text yang ada di gambar pindah Ke atas. Bagaimana caranya untuk membuat posisi text tersebut tetap berada di bawah?
Terima kasih
Suwanto
Mungkin ada yang salah mas, saya sudah coba bisa ko, coba aja bikin halaman lain di test.html misalnya, terus kasih link yg sudah diubah style nya disini
<html><head>
<style>
#sidebar {
width:25%;
float:right;
}
#body {width:75%; float:left;}
.col-3{
width:29%;
margin:2%;
height:300px;
float:left;
}
.img_wrapper{
position:relative; height: 320px;
}
.img_wrapper img{
position: absolute; bottom:0px;
}
</style></head><body>
<div id="body"><div class="img_wrapper">
<div class="col-3"><a href="a.html"><img border="0" src="pm.jpg" width="220" height="220"><br>T1</a></div>
<div class="col-3"><a href="b.html"><img border="0" src="cr.jpg" width="220" height="220"><br>T2</a></div>
<div class="col-3"><a href="c.html"><img border="0" src="tg.jpg" width="220" height="165"><br>T3</a></div>
</div> </div>
<div id="sidebar"><h2>SBar</h2><p><a href="test.html">Tesk</a></p></div></div></body></html>
Hello Pak Hilman, Berikut adalah Kode web sya
<html><head>
<style>
#sidebar {
width:25%;
float:right;
}
#body {width:75%; float:left;}
.col-3{
width:29%;
margin:2%;
height:300px;
float:left;
}
.img_wrapper{
position:relative; height: 320px;
}
.img_wrapper img{
position: absolute; bottom:0px;
}
</style></head><body>
<div id="body"><div class="img_wrapper">
<div class="col-3"><a href="a.html"><img border="0" src="pm.jpg" width="220" height="220"><br>T1</a></div>
<div class="col-3"><a href="b.html"><img border="0" src="cr.jpg" width="220" height="220"><br>T2</a></div>
<div class="col-3"><a href="c.html"><img border="0" src="tg.jpg" width="220" height="165"><br>T3</a></div>
</div> </div>
<div id="sidebar"><h2>SBar</h2><p><a href="test.html">Tesk</a></p></div></div></body></html>
Ketika menambahkan kode .img_wrapper , gbr rata bawah, tp anchor text diatas. Mohon Bpk cek apakah ada yang salah dgn kode tersebut?
nah, img_wrapper atau pembungkus gambar ini bener-bener cuman bungkus setiap gambarnya, bukan bungkus yang lain. coba lihat jawaban saya sebelumnya.
Terima kasih atas jawabannya Pak Hilman. Saya sudah mengerti. img_wrapper digunakan untuk membungkus gambar. hehe..