[ASK] Agar Logo di Kiri dan Menu di Kanan

Discussion in 'Programming' started by wrep17, Aug 15, 2017.

  1. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Saya ingin membuat sebuah header, dimana logo / judul blog di sebelah kiri dan menu navigation ada di sebelah kanan.

    Pertanyaan saya :
    Bagaimana agar bisa rapi, tulisan ada di tengah2 kotak merah tersebut. Apakah memang harus menggunakan Position relative atau ada alternative lainnya? :)

    Contoh yang saya inginkan
    [​IMG]

    Hasil sementara punya saya
    [​IMG]

    Codingan saya
    == CSS ==
    Code:
    .header-wrapper{
        background: #F44336;
        padding: 50px;
        width: 100%;
    }
    #header{
        float: left;
        width: 40%;
    }
    #header h1{
        position: relative;
        bottom: 18px;
        margin-left: 10px;
    }
    #sub-menu{
        float: left;
        width: 60%;
    }
    #sub-menu li{
        position: relative;
        bottom: 24px;
        padding: 2px;
        display: inline-block;
    }
    #sub-menu a{
        text-decoration: none;
        color: #fff;
        padding: 5px;
        font-size: 120%;
    }
    == HTML ==
    HTML:
    <div class="header-wrapper">
    <div id="header">
    <h1>SETASHOP</h1>
    </div>
    <div id="sub-menu">
    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    </nav>
    </div>
    </div>
    
    Terima kasih dan ditunggu jawabannya.
     
    Last edited: Aug 15, 2017
  2. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
  3. Muhammad Khoir

    Muhammad Khoir Super Level

    Joined:
    Jun 10, 2014
    Messages:
    2,873
    Likes Received:
    362
    Trophy Points:
    83
    Google+:
    itu template apa?
    Blogger? Buatan siapa? Apa namanya? Pengen nyoba otak atik juga.. :D
     
  4. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Coding sendiri ini hehe,
     
  5. Garett

    Garett Super Level

    Joined:
    Apr 13, 2015
    Messages:
    1,104
    Likes Received:
    1,049
    Trophy Points:
    163
    Google+:
    Belum pakai framework 'kah?

    Kamu bisa gunakan margin atau padding untuk atur jarak spasi dari logo. Atau bila anda ingin logo dan menu bisa simetris, anda bisa gunakan wrapper pada luar navigasi. Kalau untuk atur atau preposisi, anda bisa tukar float-left-right atau urutkan tag mana duluan yang harus di atas.

    Btw, kamu lupa cantumkan tag logo. Apakah tag logo beruma img, atau heading? Class apa yang dipakai? Apakah tag logo tersebut terdapat di dalam navigasi atau luar?
     
  6. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Itu karena menunya sedikit, coba tambah lagi sampai penuh, bagaimana hasilnya
    atau
    dibagi saja headernya: jadi header 1 dan header 2
     
  7. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Ya benar, tidak lengkap copasan saya :D
    Coba cek lagi hehe

    Judul Blog / Logo = Diatas
    Menu = dibawahnya ya?

    Begitu kah kang?
     
  8. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    Nggak tetap berjajar. Coba lihat saja kode contoh yang diinginkan...
     
    wrep17 likes this.
  9. ARIF AHNAN

    ARIF AHNAN Member

    Joined:
    Oct 18, 2016
    Messages:
    552
    Likes Received:
    61
    Trophy Points:
    28
  10. Garett

    Garett Super Level

    Joined:
    Apr 13, 2015
    Messages:
    1,104
    Likes Received:
    1,049
    Trophy Points:
    163
    Google+:
    Meh. Navigasi dengan list itu bagus kalau tujuannya untuk membuat sub-navigasi. Tapi bila hanya satu level, pakai anchor tag saja cukup.

    Ini navigasi buatan saya yang bisa dibilang sangat amat singkat.
    https://jsbin.com/voyemekabu/edit?html,css,output

    Edit:
    Saya mahasiswa jurusan Teknik Informatika. Saya tahu bagaimana desain web, tapi ini bukan bidang yang paling saya geluti semenjak mendesain tidak bisa jadi bahan judul makalah ilmiah.
     
    Last edited: Aug 15, 2017
    wrep17 likes this.
  11. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Gausah nyepam, silahkan baca Rules
    Terima Kasih.
     
  12. ys. herbi

    ys. herbi Well-Known Member

    Joined:
    Mar 6, 2016
    Messages:
    1,251
    Likes Received:
    190
    Trophy Points:
    63
    Google+:
  13. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Agar posisinya ditengah (tidak terlalu ke-atas atau ke-bawah) header dan menu harus memiliki line-height yang sama.

    misalkan keduanya di set line-height: 40px; maka meskipun header dan menu mempunyai font-size yang berbeda, posisinya akan tetap di tengah-tengah.

    Saya punya contoh, dalam kasus dibawah ini line-height hanya diatur ke ul.topnav li a karena header/logo nya juga berada di ul.topnav li a sehingga yang membedakan adalah tambahan <h1> pada tag html:

    Code:
    /* ======================================== Navigasi ========================================= */
    ul.topnav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F44336;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    ul.topnav li.header {float: left;}
    ul.topnav li.header h1 {margin: 0;}
    ul.topnav li.header h1 a {font-size: 32px;} /* Ukuran huruf logo */
    ul.topnav li {float: right;}
    ul.topnav li a {
        display: inline-block;
        color: #f2f2f2;
        text-align: center;
        padding: 22px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;   
        line-height: 40px; /* Coba ubah bagian ini untuk mengetahui perbedaan */
    }
    HTML:
    <ul class="topnav">
                <li class="header"><h1><a href="#!">SETASHOP</a></h1></li>
                <li><a href="#!">Contact</a></li>
                <li><a href="#!">Testimonial</a></li>
                <li><a href="#!">Team</a></li>
                <li><a href="#!">About</a></li>
                <li><a href="#!">Home</a></li>
    </ul>
    Untuk demonya bisa dilihat disini: https://www.pramudito.com/files/html/nav-height.html :)
     
  14. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    @Damar berarti di dalam tag <ul> semua yak ?
    Saya kerepotan harus mengurutkan menggunakan position: relative; :p
     
  15. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Iya, itu kebetulan saya samakan antara menu dan logo jadi <li> berada di dalam <ul>, dan <ul> seharusnya berada di dalam <nav> tapi saya lupa menambahkannya :D

    Urutannya terbalik mungkin karena float:right jadi dihitung dari kanan :D dan baru ingat navigasi yang saya buat itu position:fixed alias navigasi melayang/overlay :D
     
  16. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    @Damar kenapa tidak sesuai yak? [​IMG]
     
  17. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Hemm, bisa lihat kode-nya? :rolleyes:
     
  18. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Codenya :

    == CSS ==

    Code:
    h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal;}
    h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%}
    .header-wrapper{
        background: #F44336;
        padding: 45px;
    }
    ul.top{
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #F44336;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    ul.top li.headermenu{
        float: left;
    }
    ul.top li.headermenu h1{
        margin: 0;
    }
    ul.top li{
        float: right;
    }
    ul.topnav li.header h1 a {font-size: 32px;}
    ul.top li a{
        display: inline-block;
        color: #f2f2f2;
        text-align: center;
        padding: 22px 16px;
        text-decoration: none;
        transition: 0.3s;
        line-height: 50px; 
    }
    == HTML ==

    Code:
    <div class="header-wrapper">
    <div id="header">
    <ul class="top">
        <li class="headermenu"><h1>SETASHOP</h1></li>
        <li><a href="#!">Contact</a></li>
        <li><a href="#!">Testimonial</a></li>
        <li><a href="#!">Team</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Home</a></li>
    </ul>
    </div>
    </div>
     
  19. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Coba yang ini:
    HTML:
    <div class="header-wrapper">
    <div id="header">
    <ul class="top">
        <li class="headermenu"><h1><a href="#!">SETASHOP</a></h1></li>
        <li><a href="#!">Contact</a></li>
        <li><a href="#!">Testimonial</a></li>
        <li><a href="#!">Team</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Home</a></li>
    </ul>
    </div>
    </div>
    Saya logonya pakai link :D
     
  20. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Ternyata ada perbedaannya juga ya,
    Sekarang sudah bisa :)
    [​IMG]
     
Loading...

Share This Page