arif.suparlan.com » Design http://arif.suparlan.com Just another WordPress weblog Tue, 31 Jan 2012 15:38:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Masalah CSS dengan List ul/ol di sebelah Gambar http://arif.suparlan.com/2011/09/03/masalah-css-dengan-list-ulol-di-sebelah-gambar?utm_source=rss&utm_medium=rss&utm_campaign=masalah-css-dengan-list-ulol-di-sebelah-gambar http://arif.suparlan.com/2011/09/03/masalah-css-dengan-list-ulol-di-sebelah-gambar#comments Sat, 03 Sep 2011 14:09:10 +0000 Arif http://arif.suparlan.com/?p=441 Continue reading →]]> Baru kali ini dapetin solusi untuk masalah layout CSS list ul/ol (unordered list/ordered list) apabila diletakkan di samping gambar/image yang di float. Makanya langsung diposting biar ga lupa. Hasil dengan CSS biasa, menyebabkan bullet/number di bagian samping gambar tidak inden dengan paragrap. Ini tentunya tidak nyaman dilihat.

Lihat contoh di bawah. Sungguh tidak menyenangkan sekali.

Kadang kejadiannya seperti ini:

Padahal maunya hasilnya seperti ini:

Caranya cuma ngubah CSS utk ul/ol dan li seperti ini:

ul
{
margin-left: 0;
padding-left: 0;
}

ul li
{
margin-left: 0;
padding-left: 0;
position: relative;
left: 20px;
}

Lihat demo di sini.

]]> http://arif.suparlan.com/2011/09/03/masalah-css-dengan-list-ulol-di-sebelah-gambar/feed 0 Ucapan Selamat Lebaran untuk para Geek http://arif.suparlan.com/2010/09/08/ucapan-selamat-lebaran-untuk-parageek?utm_source=rss&utm_medium=rss&utm_campaign=ucapan-selamat-lebaran-untuk-parageek http://arif.suparlan.com/2010/09/08/ucapan-selamat-lebaran-untuk-parageek#comments Wed, 08 Sep 2010 06:01:15 +0000 Arif http://arif.suparlan.com/?p=284 Continue reading →]]> Hari ini ID facebook saya ditag di gambar oleh seorang teman. Menjelang Idul Fitri, memang sering banyak yang nge-tag untuk ngucapin selamat Lebaran. Gambar ucapan Lebaran yang satu ini agak sedikit berbeda, lebih kreatif dari yang lain.

Gambarnya didesain sendiri bertema glossy/candy. Menggambarkan button keyboard “Ctrl + A” dan “Del”, kemudian dibawahnya bertuliskan “Sucikan diri di bulan suci Ramadhan. Selamat Hari Raya Idul Fitri. Mohon Maaf Lahir Batin”.

Itu gambarnya yang dibuat teman saya, seorang web designer. Kesannya kita dengan mudah menghapus semua dosa-dosa kita digambarkan dengan kombinasi tombok “Ctrl-A” dan “Del”.

Saya sebagai seorang Programmer, punya cara tersendiri untuk mengucapkan Mohon Maaf Lahir Batin. Begini ucapan saya:

<?php
// Bila dosa dan kesalahan di dalam sebuah variable array,
$dosa = array(
 'dendam',
 'dengki',
 'iri',
 'benci',
 'caci',
 'maki',
 'amarah',
 'bohong',
 ...
);

// Maka dihari yang suci ini mari kita sama mengosongkan variable tersebut.
$dosa = 0;

// SELAMAT HARI RAYA IDUL FITRI 1431H. MOHON MAAF LAHIR DAN BATIN
// Mohon maaf atas segala bugs, baik itu berupa error maupun warning.
print_r($dosa); // Alhamdulillah sudah kosong
?>

Atau untuk yang biasa dengan command-command Linux:

history -c |grep -e sins -e mistakes
#Happy Eid ul-Fitr. Minal Aidzin Wal Faidzin.

Btw, Selamat Lebaran semuanya :) . Mohon maaf lahir batin.

]]> http://arif.suparlan.com/2010/09/08/ucapan-selamat-lebaran-untuk-parageek/feed 1 Resize gambar proporsional & posisi tengah dengan CSS & Javascript (Update) http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript?utm_source=rss&utm_medium=rss&utm_campaign=resize-proporsional-posisi-center-dengan-css-javascript http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript#comments Wed, 18 Aug 2010 15:16:46 +0000 Arif http://arif.suparlan.com/?p=259 Continue reading →]]> Saya hampir gila mencoba me-resize dan memposisikan tengah beberapa gambar di dalam div yang mempunyai property overflow: hidden. Terlalu berlebihan ya? hehehe… Tapi memang sulit. Ukuran gambar tersebut berbeda-beda, portrait atau landscape, yang jelas dia lebih besar dari ukuran div itu. Saya belum bisa ngakalinnya bermodalkan CSS saja.

Meskipun mentok dengan CSS, saya akhirnya ngakalin dengan bantuan Javascript. Dengan memanfaatkan Javascript saya bisa untuk merubah ukuran dan posisi gambar secara dinamis. Bisa lebih dari itu sih, tapi untuk pemula seperti saya ini bisa sangat membantu melayout halaman.

Dulu saya pernah buat script untuk Resize & crop gambar dengan Codeigniter. Nah script ini memakai hitung-hitungan yang sama. Kalau Codeigniter kalkulasinya oleh PHP di sisi server, yang ini di sisi client/browser. Cara ini bisa dipermudah dengan menggunakan framework Javascript. Saya belum coba, tapi kalau ada cara yang lebih mudah lagi, mohon dipost di sini. Makasih.

Di bawah berikut kira-kira contoh scriptnya. Kedua gambar yang berukuran besar dengan orientasi yang berbeda, portrait dan landscape ini saya letakkan sebagai icon dalam div dengan property overflow hidden. Prosesnya mudah, tetapi agak panjang, yaitu membandingkan rasio dua ukuran untuk menentukan orientasi kemudian me-resize dan menghitung posisi tengah. Ini contohnya: Demo.

<html>
<head>
 <title>Resize proporsional & posisi center dengan Javascript</title>
<style type="text/css">
.test {
 border:1px solid;
 margin-top:100px;
 margin-left:250px;
 width:150px;
 height:150px;
 overflow: hidden;
 float: left;
}

.test img {
}

</style>

<script type="text/javascript">
 window.onload = function() {
 var $images = document.getElementsByTagName('img');
 $x=150;
 $y=150;

 for($i=0; $i<$images.length; $i++)
 {
 $new_size = resize_min($images[$i].width, $images[$i].height, $x, $y);

 $images[$i].style.width = $new_size[0];
 $images[$i].style.height = $new_size[1];
 $images[$i].style.marginLeft = -(($new_size[0]-$x)*.25) + "px";
 $images[$i].style.marginTop = -(($new_size[1]-$y)*.25) + "px";
 }

 function resize_min($x0, $y0, $x1, $y1) {
 $xs=$x0/$x1;
 $ys=$y0/$y1;

 if ($ys>$xs){
 $x2 = $x1;
 $y2 = $x1 * ($y0/$x0);
 }
 else {
 $x2 = $y1 * ($x0/$y0);
 $y2 = $y1;
 }

 return [$x2, $y2];
 }
 }
</script>

</head>
<body>
<h1>Resize proporsional & posisi center dengan Javascript</h1>

<div>
 <img src="img01.jpg" />
</div>
<div>
 <img src="img02.jpg" />
</div>

</body>
</html>

Update berikut untuk penggunaan dengan jQuery. Ada beberapa tambahan script untuk mengukur dimensi ketika dalam keadaan gambar hidden.

$(document).ready(function() {
 $('img').each(function() {
 var x = 150;
 var y = 150;
 var ratio = x/y;

 if ($(this).height() > 0) {
 var width = $(this).width();
 var height = $(this).height();
 } else {
 var elem_clone = $(this).clone()
 .attr("id", false)
 .css({visibility:"hidden", display:"block", position:"absolute"});
 $("body").append(elem_clone);
 var width = elem_clone.width();
 var height = elem_clone.height();
 elem_clone.remove();    
 }

 $new_size = resize_min(width, height, x, y);

 $(this).css("width", $new_size[0]);
 $(this).css("height", $new_size[1]);
 $(this).css("marginLeft", -(($new_size[0]-x)*.5) + "px");
 $(this).css("marginTop", -(($new_size[1]-y)*.5) + "px");
 });
 });
]]> http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript/feed 0 Check Your Website on Different Browsers http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers?utm_source=rss&utm_medium=rss&utm_campaign=check-your-website-on-different-browsers http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers#comments Wed, 29 Oct 2008 19:52:05 +0000 Arif http://arif.suparlan.com/?p=109 Continue reading →]]> Browser compatibility is about how your website is displayed on different web browsers. This is much about user experience testing to ensure users have the same visual experiences and how it functionally behaves and responds the same way across different browsers. It is really frustrating when your website looks fine on one, but ruined on other browsers. And there are a lot of types of browsers and they have different ways of interpreting the codes.

I have my own way for this kind of situation. Check the web’s stats. For example, according to Google Analytics for this website, the most used browsers are Firefox, IE, Opera, Mozilla Compatible, Safari and Chrome. Then I would manually view the web on different browsers. For IE special case, it has many versions, I use Tredosoft which enable to run multiple IE versions on your PC.

browsershots.org

Maybe you don’t want to install anything, or you want to know how it looks not only on different browser, but on different OS’ too. This is very interesting, I found this site when Googling about cross browser compatibility. There are some commercial online services to check browser compatibility, but Browsershots.org is free open-source online service for website compatibility testing. Just enter the URL, select the browser and OS, and it will queue the screenshots. Now maybe you should try it to your website.

]]> http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers/feed 0 Keep it Simple, Stupid http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid?utm_source=rss&utm_medium=rss&utm_campaign=keep-it-simple-stupid http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid#comments Mon, 23 Jul 2007 10:36:23 +0000 Arif http://arif.suparlan.com/?p=33 Continue reading →]]> No, this ain’t about PHP’s KISS thing. It’s about my blog’s new theme design. I know it sucks, I don’t care, I got tired with all these theme designs, tired with rearranging CSS, etc. so I’m keeping it simple this time. This KISS thing I’m gonna keep in mind, I mean for everything.

Only one coloumn, header on top, then menu, content, and footer. The menu is slide-able, it contains search form, categories, and links. Thanks to Anas for telling me about these great joomla templates and mootools, well now this is not simple. Heheh…

]]> http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid/feed 0