html - Navbar not getting it's style right -
i want create navbar this page's. can see on website there's picture. in picture see black nav bar. want make same 1 not able that. here's code:
css:
@charset "utf-8"; @import url("base.css"); { } span, input, #small_navigation, nav, { display: inline-block; margin: 5px; } #wrapper { width: 100%; height: 100%; } /* large desktop */ @media (min-width: 1200px) { #header { width: 100%; height:50px; background-color: #f2e8e8; box-shadow: 0px 5px 5px 3px #aaa; } #right_side #small_navigation { margin-top: -150px; } #header #right_side { float: right; } #header #dropdown ul li ul{ text-align: center; } }
html:
<div id="wrapper"> <div id="header"> <span id="icon"><!-- <img src="icon_src.png" /> -->icon</span> <input type="search" placeholder="search" id="search_site" /> <span id="logo">website name</span> <div id="right_side"> <div id="small_navigation"> <a href="#">home</a> <a href="#">office</a> </div> <nav id="dropdown"> <ul> <li> dropdown <ul> <li>item 1</li> <li>item 2</li> </ul> </li> </ul> </nav> </div> </div> </div>
please me :)
thanks, areeb
like this
css
* { margin: 0px; padding: 0px; } #header { width: 100%; height: 50px; background-color: #f2e8e8; box-shadow: 0px 5px 5px 3px #aaa; vertical-align: middle; } #right_side #small_navigation { float: left; text-align: center; } #header #right_side { float: right; } #header #dropdown ul li ul { text-align: center; } .logo { text-align: center; vertical-align: middle; }
Comments
Post a Comment