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

avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Diperbarui 8 tahun yang lalu

9 Jawaban:

silakan dilihat mas, barangkali ini yang dicari: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp pakai

vertical-align: xxx
avatar bagaskara7
@bagaskara7

3 Kontribusi 0 Poin

Dipost 8 tahun yang lalu

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

avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Dipost 8 tahun yang lalu

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

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 8 tahun yang lalu

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

avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Dipost 8 tahun yang lalu

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

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 8 tahun yang lalu

<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>
avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Dipost 8 tahun yang lalu

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?

avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Dipost 8 tahun yang lalu

nah, img_wrapper atau pembungkus gambar ini bener-bener cuman bungkus setiap gambarnya, bukan bungkus yang lain. coba lihat jawaban saya sebelumnya.

avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Dipost 8 tahun yang lalu

Terima kasih atas jawabannya Pak Hilman. Saya sudah mengerti. img_wrapper digunakan untuk membungkus gambar. hehe..

avatar suwanto
@suwanto

13 Kontribusi 1 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban