[ASK] Agar Logo di Kiri dan Menu di Kanan

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

  1. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Sip, :D untuk mengatur tinggi navigasinya, tinggal ubah ukuran line-height: 50px; dan jika line-height dihilangkan, apa yang terjadi? :D
     
  2. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Tidak jadi ditengah-tengah lagi :)

    Btw,
    Untuk slideshow enakan pakai pure CSS atau ditambah embel2 JQ, JS ?

    Aku udah buat dengan kode seperti ini

    ==CSS==
    Code:
    @keyframes slideshow{
    30%{
        left: -100%;
    }
    60%{
        left: -200%;
    }
    100%{
        left: -300%;
    }
    }
    #slideshow{
        overflow: hidden;
    }
    #slideshow figure img{
        width: 20%;
        float: left;
    }
    #slideshow figure{
        position: relative;
        width: 500%;
        margin: 0;
        left: 0;
        animation: 10s slideshow infinite;
    }
    ==HTML==
    Code:
    <div id="slideshow">
    <figure>
        <img src="gambarlima.jpeg" width="100%" height="500">
        <img src="gambarempat.jpeg" width="100%" height="500">
        <img src="gambartiga.jpeg" width="100%" height="500">
    </figure>
    </div>
     
  3. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Tergantung kebutuhan sih, jika hanya sekedar SlideShow dan tidak memerlukan control sepeti next & prev pakai CSS saja sudah cukup :)
     
    wrep17 likes this.
  4. wrep17

    wrep17 Well-Known Member

    Joined:
    Sep 26, 2015
    Messages:
    1,325
    Likes Received:
    246
    Trophy Points:
    63
    Google+:
    Butuh lebih dari 2 hari hanya untuk menyelesaikan blog portofolio.
    Saat ini memang belum menggunakan boostrap karena sedang fokus latihan css, jquery dan javascript.
    Sengaja blm menambah responsive karena masih belum begitu paham.

    Silahkan untuk @Damar @Garett untuk mendownload codingan saya, agar bisa dicek sekiranya sudah urut atau belum. Apakah masih membingungkan pengurutan, misal suatu saat ada tugas dari Dosen.

    Btw, ada yang bingung di bagian "Keunggulan Kami" itu masih belum mau turun tulisannya, enggak tahu kenapa. Malah yang turun kotaknya :D

    Maaf kalau masih merepotkan, namanya juga belajar kalau enggak tanya2 saya tidak bisa. Saat ini, masih pingin fokus tema company / portofolio dulu soalnya.

    Link : https://drive.google.com/file/d/0B-OiOt0DY4gEcTdhQ1ZWUnRZdk0/view?usp=sharing

    Ini hasilnya
    [​IMG]
     
  5. Damar

    Damar Well-Known Member

    Joined:
    Jun 22, 2014
    Messages:
    1,472
    Likes Received:
    216
    Trophy Points:
    63
    Google+:
    Ini pengurutan apa ya? Apakah dari atas ke bawah, dari kiri ke kanan, atau depan ke belakang (tumpang tindih) ~

    Tapi saya rasa pengurutan dari depan ke belakang karena saya cek menu navigasi tertutup oleh slideshow saat di scroll :p

    Untuk mengurutkan, gunakan z-index. Atur menu navigasi memiliki nilai z-index yang lebih tinggi daripada slideshow, contoh:

    Code:
    ul.top{
        z-index: 9;
    }
    #slideshow{
       z-index: 2;
    }
    itu hanya contoh sih :D dan kalau ingin menu navigasi tidak tertutup oleh elemen apapun atur aja dengan angka yang besar

    Code:
    ul.top{
        list-style-type: none;
        margin: 0;
        padding: 0;
        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%;
        z-index: 99999999999999; /* Tambahkan ini biar tidak tertindih objek lain (seperti slideshow) */
    }
    Itu tinggal tambahkan padding :D

    ini file yang sudah saya edit: https://www.dropbox.com/s/mcb7twddd6sfm9d/Portofolio1.rar?dl=1 :)
     
    wrep17 likes this.
Loading...

Share This Page