Dwi Febriandaru Site

Catatan Harian Dwi Febriandaru

Corel Draw Graphic Suite X5 dan Cara Crack

Setelah sebelumnya saya membagikan Corel Draw X6 kali ini saya akan share versi X5 dari Corel Draw Graphic Suite. Sebenarnya tidak ada perbedaan berarti dari versi X6, -dwifebriandaru.blogspot.com

Membuat Sticky Footer dengan CSS

Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan... -dwifebriandaru.blogspot.com

Membuat Sistem Login Session di PHP-MySQLi

Berjumpa lagi dengan saya, Dwi Febriandaru. Seperti janji saya pada tutorial terdahulu, Kali ini kita akan membahas tentang cara membuat Membuat Sistem Login dengan Session... -dwifebriandaru.blogspot.com

Lirik Lagu 5 Seconds of Summer - Permanent Vacation

, No comments
 "Permanent Vacation"

[Michael:]
You say that I'm too complicated
Hung up and mis-educated
I say 9 to 5 is overrated
And we all fall down

[Michael:]
I can't sleep 'cause my mind keeps racing
My chest hurts 'cause my heart keeps breaking
I'm so numb and I can't stop shaking
And we all fall down

[Luke:]
Frustration, desperation
You say I need some kind of medication
Situation: no motivation
Destination: permanent vacation

[All:]
Hey, I'm doing fine
And I know I'm out of line
So let's sing this one more time
It goes
Destination: permanent vacation

[Michael:]
Na-na, na-na na na

[Michael and Calum:]
Voices coming through the speaker
They can't make me a believer
I know I'm an under-achiever
And we're all so proud

[Calum:]
Watch out, I think we're going under
Right now, you're just another number
Get out, the system's in the gutter
And we're all so proud

[Luke:]
Frustration, desperation
You say I need some kind of medication
Situation: no motivation
Destination: permanent vacation

[All:]
Hey, I'm doing fine
And I know I'm out of line
So let's sing this one more time
It goes
Destination: permanent vacation

[All:]
Hey, I'm doing fine
And I know I'm out of line
So let's sing this one more time
It goes
Destination: permanent vacation

[All:]
Na-na, na-na na na na na
Na-na, na-na na na na na

[Michael:]
Congratulations, your imitations
Are taking over the radio stations
Corporations, calculations
We're the voice of the new generation

[All:]
Congratulations, your imitations
Are taking over the radio stations
Corporations, calculations
We're the voice of the new generation

[All:]
Hey, I'm doing fine
And I know I'm out of line
So let's sing this one more time
It goes
Destination: permanent vacation

[All:]
Hey, I'm doing fine
And I know I'm out of line
So let's sing this one more time
It goes
[Luke:]
Destination: permanent vacation

[All:]
Na-na, na-na na na na na
Na-na, na-na na na na na
Na-na, na-na na na na na

[Luke:]
Destination: permanent vacation



Share:
Read More

Cara Membuat Footer Tetap Berada di Bawah dengan CSS

, 20 comments
Assalamu'alaikum Wr.Wb





Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan Copy Right atas karya mereka. Namun terkadang keberadaan footer justru menjadi blunder kecil bagi para developer. Kadang penempatan footer justru mengikuti Konten yang ada. Padahal ini membuat tampilan website menjadi kurang "Proporsional" seperti contoh berikut ini.

Gambar 1

Tampilan yang seperti itu menyisakan bagia bawah yang tidak terpakai. Jadi pada kesempatan kali ini kita akan membahas tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS. Pada dasarnya cara ini hanya menggunakan class yang diset poritionnya menjadi absolute dan relative. Untuk lebih jelasnya bisa di lihat di script HTML berikut ini :

<html>
<head>
<title>Belajar-PHP</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
   <div class="header"><h2>Belajar-PHP</h2></div>
   <div class="content">
       <!--Sobat bisa gunakan Text Lorem Ipsum disini-->
   </div>
   <div class="footer">
      Copyright by Dwi Febriandaru
   </div>
</div>
</body>
</html>

Dan Script CSS berikut ini :

*{margin: 0px auto;}
html,body{
    height: 100%;
}

#container{
    position: relative;
}

.header{
    background: #0cf;
    padding: 10px;
}

.content{
    padding: 10px;
}

.footer{
    width: 100%;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    background: #333;
    color: #fff;
}

Dua Script diatas bila dieksekusi akan menghasilkan tampilan seperti pada gambar 1. 
Nah, Untuk membuat footer tetap berada di bawah meski konten tidak penuh kita perlu menambah atribut min-height pada "container" dan membuat class "footer" menjadi fixed (ditambah atribut position:absolute dengan bottom 0px). Jadi script utuhnya akan menjadi seperti dibawah ini.
*{margin: 0px auto;}
html,body{
    height: 100%;
}

#container{
    min-height: 100%;
    position: relative;
}

.header{
    background: #0cf;
    padding: 10px;
}

.content{
    padding: 10px;
}

.footer{
    width: 100%;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    background: #333;
    color: #fff;
    position: absolute;
    bottom: 0px;
}

Dan Tampilannya akan menjadi seperti berikut ini


Tampak lebih rapi,bukan ?.

Klik untuk melihat Demo

Nah sepertinya cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS.

Jangan lupa klik tombol share bila artikel ini bermanfaat bagi kalian. Dari saya cukup sekian, mohon maaf apabila ada salah kata dan terima kasih atas perhatiannya.

Happy Coding !!!

Wassalamu'alaikum Wr.Wb
Share:
Read More

Blog Traffic