Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
cara membuat kolom about me yg gambarnya malah keluar elemen
mas ini kenapa ya? kan ceritanya saya mau buat kolom about me nah si gambarnya ini pake float left biar si artikelnya itu naik disebelahnya eh pas mau dirapihin yg gambarnya malah keluar elemen eh uda pake div lagi juga terus juga gangaruh apanya ya mas?
ini script css sama htmlnya
<div class="profil">
<div class="about-me">
<div class="img">
<img src="pictures/Arey.jpg">
</div>
<h3>About ME</h3>
<p class="teks-artikel">Saya tinggal di INDONESA pulau JAWA provinsi JAWA BARAT Kabupaten BOGOR Kecamatan Gunung putri Kampung Parung Dengdek. Software untuk membuat sebuah template semuanya gratis mulai dari teks editor ATOM BRACKETS DREAMWEAVER dan juga sebuah BROWSER (CHROME)</p>
</div>
</div>
/*------------aboutme--------*/
.about-me img{
border-radius: 100%;
width: 100px;
height: 100px;
margin-right: 15px;
float: left;
max-width: 100%;
margin-top: 2.5px;
}
.profil{
background-color: rgba(0,54,229,0.74);
}
.profil h3{
padding: 20px;
}
.profil p{
padding: 0px 20px 20px 20px;
}
14 Jawaban:
kalo sama yg ini mas biar si teks nya itu posisi ada ditengah tengah gitu mas biar posisinya tuh kaya yg saya garisin warna merah itu loh mas gimana ya? 
Coba tambahin style clear:both; nya dengan tag baru dibawah tag class img. Biasanya sih aku gitu. Hahaha
style clearbothnya di tag bawahnya berarti tag h3?
Jawaban Terpilih
@areydra, buat text biar di vertikal di tengah (vertical-align = middle), maksudnya yang kaya ini bukan?
Demo: https://jsfiddle.net/nurimansyah/fhs5n2us/
- - -
HTML Code
<div class="partner">
<div class="partner--copy">© 2017. Special Thanks to</div>
<ul class="partner--lists">
<li class="partner--logo"><img src="URL_LOGO" alt=""></li>
<li class="partner--logo"><img src="URL_LOGO" alt=""></li>
<li class="partner--logo"><img src="URL_LOGO" alt=""></li>
</ul>
</div>
CSS Code
/** Google Fonts (Optional) **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/** Body (Optional) **/
body {
margin: auto;
font-family: "Open Sans", sans-serif;
}
/** Reset **/
ul {
list-style: none inside;
margin: auto;
padding: 0;
}
/** Partner **/
.partner {
background-color: white;
padding: 25px;
}
.partner--copy {
display: inline-block;
vertical-align: middle;
}
.partner--lists {
margin-left: 20px;
display: inline-block;
vertical-align: middle;
}
/** This style is used for clearing the float **/
.partner--lists::after {
clear: both;
content: "";
display: block;
}
.partner--logo {
float: left;
margin-right: 20px;
}
.partner--logo img {
width: 50px;
height: 50px;
}
@nurimansyah iya mas maksud saya begitu makasih mas :)
Iya sama-sama, just info, untuk positioning elemen, sebenernya lebih concern kita kudu paham betul tentang "Floating", "Display", dan "Position".
Karena, 3 properti ini penting banget buat design layout website kita. Kalo kita belum paham konsepnya, pasti nanti kita bakal bingung, kapan dan dimana mau gunain properti ini.
FYI, untuk vertical align (rata tengah vertikal), kalo ane best-practicenya ada 2: 1. Pake properti "display: inline-block". Cuman kalo ini, si elemen-nya harus punya sibling (sodara), kalo ga ga work. 2. Pake properti "line-height". Ane make ini kalo yang mau di ratain tengah itu cuma elemen bentuk text aja.
Yah semoga bermanfaat ya gan :D
maksudnya itu biar kita bisa lebih mudah menempatkan sebuah layout kita harus perdalam tentang 3 hal itu mas? iya mas pertamanya saya juga uda pake display inline block tapi saya bingung mau ditaro diclass mana eh pas uda disatuin buat class malah gabisa pas liat script dari mas saya baru ngerti hehe :D kalo pake line-height buat kaya teks link bisa juga kan mas? oiya jawaban dari yg gambar about me juga sama dibikin kodenya kaya yg footer yg mas kasi ya?
mas saya boleh minta kontak mas ngga? buat nanya nanya kalo saya ada problem sama minta solusi gitu mas?
@areydra Nah untuk yang about me diatas, masih belum kebayang saya, maksudnya keluar elemen itu gimana ya?
Btw, untuk kontak, lewat line aja, search aja "nurimansyah", :D
maksudnya itu gambarnya ini loh mas misalnya kan saya ubah padding dari class profil eh saya susa ngejelasinnya :' biar lebih jelas gambarnya kaya gini mas jadi si gambar itu keluar dari kotak biru itu mas 
okee mas makasi yaa jadi gaenak saya hehe :'D
Oh yang biru itu, akibuat ga di "clear" properti floatnya. Itu si gambar sama yang konten kanan pake properti "float" kan? Nah, solusinya bisa tambahin "<div />" baru setelah konten. Seperti yang dibilang oleh mas @rickyrachmanto.
Atau make pseud-class "after" di parentnya.
Contoh: https://jsfiddle.net/nurimansyah/8j3r9x04/
HTML Markup:
<div class="parent">
<div class="logo"><img src="https://www.gravatar.com/avatar/056b8441d6669418e0aa93df911cd543/?default=&s=160" alt="Logo"></div>
<div class="konten">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos vel ut, ad repellendus dolore! Possimus nemo quae ad, corrupti doloremque quia numquam quibusdam, cumque non, vero pariatur aspernatur delectus, explicabo.</div>
</div>
CSS Code:
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: "Roboto";
margin: auto;
}
/** Begin Parent **/
.parent {
background-color: dodgerblue;
color: white;
padding: 20px;
}
/** Clear Float Child **/
/**
Disini ane gunain pseudo-class "::after" karena properti clear akan di taro di terakhir element.
**/
.parent::after {
clear: both;
content: "";
display: block;
}
/** Logo **/
.logo {
float: left;
width: 100px;
}
.logo img { width: 100%; }
/** Konten **/
.konten {
float: left;
padding-left: 25px;
width: calc(100% - 125px); /* Kalkulasi ukuran width dengan logo ditambah padding */
}
Kalo saya lebih seneng pake "pseudo" karena jadi rapi markup HTML-nya :D. CMIIW.
terus biar teksnya ada ditengah tengah gambar pake vertical-align middle ya mas? oiya sama mas ko setiap buat teks ngga pake tag p ya? apa nggapapa mas gapake tag p?
Untuk ketengah gambar, iya pake vertical-align middle, yang seperti sebelumnya.
Nah kalo saya buat teks, tergantung konten isi-nya.. Kalo memang tipenya berbentuk paragraph atau sub title, baru saya gunain
. Karena, best-practice frontend, sebelum kita nentuin elemen/tag HTML apa yang digunain pada sebuah web-page, kita mesti tahu dulu konten web-page kita mau kaya apa, jadi kita bisa tahu elemen/tag HTML apa yang mau digunain. Hal ini dibutuhkan agar pengembangan webpage kedepannya jadi lebih mudah dimengerti kalo seandainya agan ingin berkolaborasi dengan team.
Kesimpulannya, kodingan dan letak elemen/tag HTML sangat berperan penting untuk dalam pengembangan web-page, karena akan sangat membantu kalo ada perubahan yang signifikan nantinya. Jadi ga sekadar asal taro elemen/tag aja, mesti bener-bener paham konsepnya dulu, kapan dan dimana tag/elemen HTML tersebut digunakan.
CMIIW... ^^ v
oke mass. makasi ni ilmunya ehh saya jadi tambah ngerti hehe :D