Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana Cara Membuat Logo dan Menu Bersebelahan
Saya ingin membuat logo dan menu (navigation) bersebelahan dalam satu kotak. Seperti header sekolah koding saat ini.
Saya punya kode sebagai berikut
== CSS ==
.header-wrapper{
background: #F44336;
padding: 50px;
width: 100%;
}
#header{
float: left;
width: 40%;
}
#sub-menu{
float: left;
width: 60%;
}
#sub-menu li{
padding: 2px;
display: inline-block;
}
#sub-menu a{
text-decoration: none;
color: #fff;
padding: 5px;
font-size: 120%;
}
== 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="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
Untuk hasil sementara saat ini seperti ini
Terima kasih, semoga bisa dibantu
10 Jawaban:
ini sepertinya bisa
<li><a href="#"><span class=fa fa-home>Home</li>
@kuntoro46 itu kan cuma nambah font awesome, maksudnya biar rapi di tengah kotak2 itu. Itu kan di gambar ada dibawah :)
Lebih baik pakai bootstrap bro simpel dan cepat,
Tapi kalau mau native bisa sih,
Pakai
.container {
display: block;
}
#header,
#sub-menu {
display: inline-block;
}
<div class="container">
<div id="header"></div>
<div id="sub-menu"></div>
</div>
Maaf kalau bukan yang dimaksud karena pertanyaan anda kurang jelas hehe
Biar bisa bersebelahan, ilangin aja width nya.Di header dan submenu
melihat kodingan bang @trihap sih harusnya gk sampe kebawah gitu, mungkin itu effect floatnya , coba di kasih class clearfix di setiap setelah penggunaan float
.clearfix::after{
clear:both;
content:'';
display:table;
}
coba taruh class clearfix di bagian .header-wrapper nya itu yang saya tau dan saya belum ngetes kodenya sih hehehe, lagi males bang :D
@sector18 bisa lihat header sekolahkoding? Ya seperti itu, yang saya inginkan.
@naufalhfzhn kok tidak ada perubahan apapun ya? Hmm
Jawaban Terpilih
uda saya coba bisa kok.. taruh classnya mungkin salah , kyk gini harusnya
<div class="header-wrapper clearfix">
font-size biasakan pakai pixel aja, jangan %
coba pake css flexbox sperti ini mudah2an bs membantu
<div class="header-wrapper">
<div class="brand-logo">
<h1>SETASHOP</h1>
</div>
<ul class="sub-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
.header-wrapper {
background-color: #F44336;
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.brand-logo {
width: 20%;
}
.sub-menu {
width: 80%;
text-align: right;
}
.sub-menu li {
display: inline-block;
margin-left: 10px;
}
.sub-menu li a {
text-decoration: none;
color: #fff;
font-size: 14px;
}
.sub-menu li a:hover {
text-decoration: underline;
}
