css - horizontal menu, position fixed, next to div -
i have top horizontal menubar 100% width, centeraligned, fixed position, not scrolling page.
but want name (named test in example) in left side of menu, inline of menu.
but though uses inline-block, stepsdown according left sided div.
<div class="name">test</div > <div id="menu"> <ul> <li><a href="index.php?menu=1" border="0" alt="menu1">menu1</a></li> <li><a href="index.php?menu=1" border="0" alt="menu1">menu2</a></li> <li><a href="index.php?menu=1" border="0" alt="menu1">menu3</a></li> <li><a href="index.php?menu=1" border="0" alt="menu1">menu4</a></li> <li><a href="index.php?menu=1" border="0" alt="menu1">menu5</a></li> </ul> </div>
and css
.name { font-size: 12pt; font-weight: bold; height: 20px; color: #ffffff ; width: 99%; display: ; position:fixed; z-index:2; padding: 5px; top: 2px; } #menu { background: #bbbbbb; top: 0px; height: 35px; width: 99.8% ; text-align: center ; position:fixed; z-index:1; } } #menu ul{ display: ; height: auto; padding: 8px 0px; margin: 0px; z-index:3; } #menu li { display: inline; z-index:3; } #menu { display: inline-block; font-weight: bold; font-size: 15px; color: red; text-decoration: none; vertical-align: bottom; padding: 20px; }
see example: https://jsfiddle.net/sm6npxdc/3/
i reset , changed padding, height , width values. please try following css:
*{ margin: 0; padding: 0; } .name { font-size: 12pt; font-weight: bold; height: 20px; color: #ffffff ; display: ; position:fixed; z-index:2; padding: 5px; top: 2px; } #menu { background: #bbbbbb; top: 0px; width: 99.8% ; text-align: center ; position:fixed; z-index:1; } #menu ul{ display: ; height: auto; margin: 0px; z-index:3; } #menu li { display: inline; z-index:3; } #menu { display: inline-block; font-weight: bold; font-size: 15px; color: red; text-decoration: none; vertical-align: bottom; padding: 10px; }
fiddle link
Comments
Post a Comment