Menyisipkan Kotak tulisan atau gambar di Posting - Internet Beritaku

Jumat, 05 Agustus 2011

Menyisipkan Kotak tulisan atau gambar di Posting

Mungkin sobat sobat sekalian pernah melihat di beberapa artikel diblog ini ... kotak yang didalamnya berisi tulisan atau gambar.....Ada tiga jenis yang biasa digunakan untuk bingkai yaitu : border, overflow/biasanya disebut kotak scroll dan textarea..

Untuk lebih jelasnya akan dijelaskan satu persatu ..langsung saja ke TKP :


Border :


Border berarti bingkai yang membatasi tulisan atau gambar yang ada didalam bingkai. Jika sobat inigin membuatnya silahkan copy paste script dibawah ini :


<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">Tulisan atau Gambar</div>


Hasilnya seperti ini :

Tulisan atau Gambar

Keterangan :

  • Border : 1px solid #CCC, adalah ketebalan garis tepi adalah 1px dengan warna abu abu .
  • Margin: 10px 0px, adalah margin atas bawah 10px dan margin kiri kanan 0px.
  • Padding: 10 px artinya jarak tulisan ke border adalah 10px.
  • Background color : adalah warna background kotak, kamu dapat ganti warnanya sesuai keinginan, jika ingin di hilangkan warnanya ganti kode warna #FBFBEE dengan none atau hapus saja perintah background color dan kode warnanya.
  • Text-align (rata tulisan): Dapat di ganti dengan left, right, center (rata tengah) dan justify (rata kiri kanan).

Overflow:
Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah yang biasa digunakan dalam overflow yaitu scroll, hide dan auto.
  • Apabila scroll yang digunakan , maka tulisan yang melebihi media akan dibuatkan scroll.
  • Apabila hide yang digunakan, maka tulisan yang melebihi media akan disembunyikan.
  • Apabila auto yang digunakan, maka tulisan yang melebihi media akan dibuatkan scroll dan selebihnya akan disembunyikan.
  • Ingin membuatnya kamu tinggal copy paste script berikut ini :

<div style="overflow: auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: none; text-align: left;">Tulisan atau Gambar</div>

Hasilnya seperti berikut :

Tulisan atau Gambar


Keterangan :


Apabila tulisan tersebut melebihi lebar 95% dari lebar container yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.



Semoga bermanfaat yachhhh.......aduhhh...ngantukkkk....







Comments


EmoticonEmoticon