1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Full Width Header, Nav, dan Footer

Discussion in 'Developer Corner' started by zetyokoxxx, Jun 3, 2014.

  1. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    askumm..
    dari kemarin aku cari di mbahBING dan mbahGOOGLE gk ada yang bisaa :tidaak1:
    tolong master css ato html yng bisa membuat header,nav dan footer di blog saku menjadi full width
    [​IMG]

    http://ajitan.blogspot.com/
    please helpp.. :pleease3:
     
  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    coba pada css tambahkan kode dibawah
    (backup dulu ya)
    Code:
    #outer-wrapper {width:100% !important;}
    #content-wrapper {width:80% !important;margin:0 auto;}
    #headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;}
    #nav {width:100%}
    #header-wrapper {padding: 0;}
    
    tapi yang jadi kendala... ada masalah pada responsive headernya...
    coba aja dulu..
     
  3. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    mantaab gann :goodjob:
    tpi headernyaa?? :pleease3:
     
  4. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    coba yang ini...
    :goodjob:

    Code:
    #outer-wrapper {width:100% !important;}
        #content-wrapper {width:80% !important;margin:0 auto;}
        #headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;min-height:30px}
        #Header1_headerimg {height:86px;}
        #nav {width:100%}
        #header-wrapper {padding: 0;}
     
  5. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    mantabbb :goodjob: tpi kok lebar body jadi ngecil ya ?:woa:
     
  6. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    ini saya fix resposivenya...

    Code:
        #outer-wrapper {width:100% !important;}
        #content-wrapper {width:80% !important;margin:0 auto;}
        #headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;min-height:30px}
        #Header1_headerimg {height:86px;}
        #nav {width:100%}
        #header-wrapper {padding: 0;height:110px;}
        @media screen and (max-width:700px){
            #header-wrapper {height:86px;}
        }
    
    lebar body bisa diubah pada kode berikut khususnya yang diberi warna merah... mungkin bisa ubah jadi 90% dsb.
    (pada kolom no 2 kode diatas)
    #content-wrapper {width:80% !important;margin:0 auto;}
     
  7. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    makasih :goodjob:
    Rep+
     
  8. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    sama sama...
    Selamat sudah solved
    jangan lupa ganti prefixnya..
    semoga bermanfaat...
    Senang dapat membantu..
    Thx Repnya... :cool:
    :goodjob:
     
  9. xtehsoda

    xtehsoda Active Member

    Joined:
    Jul 14, 2013
    Messages:
    1,056
    Waah keren ada mastah CCSS di forum ini... seneng punya mastah2 yg royality nya membantu kepada member yg lagi butuh bantuan... Manntaaaaaaapp....
     
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    yang bener itu CSS :peace:
    Pelajari Lebih Lanjut di Thread CSS
     
  11. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    ohya kelupaan.. kalo mau ganti header dengan gambar? lebar n panjangnya brapa??
     
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    masalahnya itu tergantung...
    karena yang kita gunakan disini adalah lebar 100%, yang tidak bisa ditentukan dengan angka..
    Saya rekomendasikan mending gambar logo dan tulisan saja (tanpa background aka transparan) pake format .png, karena dari css diatas saya telah memberi warna background dengan warna #333 (hitam agak terang dikit) dan bisa diganti... dan itu bisa terlihat lebih bik lagi... :cool:
     
  13. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    oh iya ada yg kurang nih.. :tidaak1:
    tulisan dalam navbar dan dalam footer biar lebarnya selebar body gimana ?
    :peace:
     
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    untuk footer tinggal css berikut :
    Code:
    #isifooternya {width:80%}
    untuk navbar saya selidiki dulu :cool:

    update...
    untuk navbar harus dibungkus dulu...
    copas kode dibawah dibawah kode<nav id="nav">
    Code:
    <div style="width:80%;margin:0 auto;">
    dan copas kode dibawah diatas </nav>
    Code:
    </div>
    tapi masalahnya ada sedikit masalah saat responsive.
     
  15. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    maav banget ngrepotin... :nangis1:
    jadi gimana ya :woa:
     
  16. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    gak masalah...
    udah liat update-nya blm..

     
  17. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    udh..
    sekali lagi terima kasih... gpp deh masalah saat responsive
     
  18. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,320
    ya... sudah,
    sama sama.., nanti mungkin akan saya cari tau fix responsivenya... :goodjob:
    btw sya izin nyimak isi blognya ya...:ketawa:
     

Share This Page