I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.
Any ideas?
HTML(html and doctype and link tags left out, they're there):
<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
<li class='nav'>+You</li>
<li class='nav'>Gmail</li>
<li class='nav'>Images</li>
</ul>
CSS:
#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }
#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }
#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }
ul {
list-style-type: none;
margin: 0;
padding: 0; }
.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }
The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to.
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }
body{position: relative;}
Try this http://jsfiddle.net/csdtesting/oe55maf0/2/
Added #header :
#header{
float:right;
}
and removed position:absolute; from .nav class .Also added #content :
#content{
position:absolute;
}
to contain the form .
Now the structure is clear.
Hope this helps!
Related
I have a screenshot as shown below which I have replicated in HTML, CSS and JS.
I have created the fiddle for the above screenshot. The above screen-shot portion is at the extreme right in the fiddle. On clicking three dots, the drop-down menu appears.
The HTML and CSS codes which I have used in order to create the drop-down is:
HTML:
<div class="nav-top-searchbar">
<form>
<span class="fa fa-search searchicon fa-lg" aria-hidden="true"></span>
<input type="text" name="search">
<div style="">
<img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
<div class="dropdown">
<li>View Status<i class="fa fa-angle-down" aria-hidden="true"></i></li>
<li>Release Bills</li>
<li>Add Attendee</li>
<li>Export as</li>
<li>View in Google Sheets</li>
<li>Send Notifications</li>
</div>
</div>
</form>
</div>
CSS:
// General CSS
.nav-top-searchbar {
position: relative;
}
#ellipsis {
top: 12px;
position: absolute;
right: 43px;
cursor: pointer;
}
#ellipsis:focus {
outline: none;
}
#ellipsis:focus+.dropdown {
display: block;
}
input[type=text] {
width: 100%;
background: #10314c;
}
.dropdown {
background-color: #FFFFFF;
display: none;
padding-left: 2%;
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top: 25px;
padding-bottom: 25px;
box-shadow: 0 0 15px #888;
top: 2px;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px solid #FFFFFF;
z-index: 2;
padding: 3px;
}
.dropdown a {
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li:hover {
background-color: #EDEDED;
}
Problem Statement:
In my fiddle, the hover doesn't cover the entire row. It only covers 80% of the row. I am wondering what changes do I need to make in the above CSS codes so that the hover covers the entire row.
You have padding on your dropdown container:
.dropdown{
padding-left: 2%;
}
This space is unusable by the child list items. Put the padding on the list items instead:
.dropdown li{
padding-left: 2%;
}
https://jsfiddle.net/nc2djn5p/94/
This should do the trick: https://jsfiddle.net/hp0hxoL3/
.dropdown {
background-color: #FFFFFF;
display: none;
padding-left: 2%;
position: absolute;
/* height: 150px; */
right: 0;
width: 200px;
z-index: 10;
list-style-type: none;
padding-top:25px;
padding-bottom:25px;
box-shadow: 0 0 15px #888;
top: 2px;
list-style: none;
padding: 0;
margin: 0;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
border: 1px #FFFFFF;
z-index: 2;
}
.dropdown a
{
color: #676767;
font-weight: bold;
font-size: 14px;
}
.dropdown li {
padding: 8px;
}
.dropdown li:hover
{
background-color: #EDEDED;
}
It doesn't match exactly the example, but it's close enough.
Your div class="dropdown" has a left padding of 2%. You will need to set it to 0.
As David said, set the padding in .dropdown li, instead of .dropdown
I have tried probably 15 suggestions from stackoverflow on how to center nav. Can you help? I just want to center the nav and be able to hover over Expertise without the rest of the nav bar getting jumbled around.
Here is my markup:
<nav id="header-home-nav">
<div id="menu">
<ul>
<li id="" class="">About</li>
<li id="line-li"><p class="nav-lines">|</p></li>
<li id="" class="">Contact</li>
<li id="" class=""><p class="nav-lines">|</p></li>
<li id="" class="">Expertise
<ul id="" class="sub-menu">
<li>▶ Finance</li>
<li>▶ Operations</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
</ul>
</li>
</ul>
</div>
</nav>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}
#menu li {
background-color: #1b1b1b;
display: block;
float: left;
position:relative;
}
#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
EDIT:
Here is a jsfiddle:
http://jsfiddle.net/8A9tq/
Sorry, forgot to add it.
EDIT:
Responsive is important. So I needs to be centered regardless of screen size.
You can add the following:
#header-home-nav {
width: 100%;
}
Then, give the child (#menu) some kind of max-width and auto margins:
#menu {
background: #1B1B1B;
margin: 0 auto;
max-width: 300px;
position: relative;
font-size: 0.8em;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
}
This seems to work: http://jsfiddle.net/4Eqad/
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
margin-left:25%;
}
Note the new edition is the margin-left:25%. You can make that whatever you would like.
Nav centered: http://jsfiddle.net/8A9tq/1/
To center an element you need three things: a set (non-percentage) width, block display (automatic with block level elements, but it's a good practice anyway), and your left and right margins to be set to auto:
width: 300px;
display: block;
margin: 0 auto;
So for your example, depending on which element you want to center you could try:
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width: 300px;
display:block;
margin: 0 auto;
background-color: #666666;
}
or
#menu {
position: relative;
font-size: 0.8em;
margin: 0 auto;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:300px;
display:block;
}
and so on
Here you can keep your markup and just says to the position has to be 50% left and 50% right.
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
left: 50%;
right: 50%;
}
Fiddle: http://jsfiddle.net/uPs8J/2/
I have a script here for my navigation bar:
<style type="text/css">
/* Navigation Bar */
#nav_bar {
display:inline-block;
height:50px;
}
#nav_bar ul {
display:inline-block;
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:inline-block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
</style>
</font>
I'm having trouble trying to get it displayed in the centre of the page, how can I do it?
I've looked into "display: inline-block;" and "position: relative" and couldn't find a code that worked
the html part of my nav bar is as follows (in regards to your comments) I hope it helps! :)
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
Give it a width and auto margins and make sure its a block level element.
By default a 'div' is a block level element so you can remove this rule.
You must set a width or the menu with expand to the width of its container.
#nav_bar {
display:block;
height:50px;
margin: 0 auto;
width: 567px; /* or whatever you require */
}
Example:
http://jsfiddle.net/29FRa/
#nav_bar {
height:50px;
width:800px;
margin:0 auto;
}
HTML:
<html>
<body>
<div id="#nav_bar"></div>
</body>
</html>
Use text-align: center; on your #nav_bar and be sure it is a block-level element.
http://jsfiddle.net/TKMeU/
A total of six kinds of methods：
１、Margin and width to achieve horizontal center
#nav_bar {
height:50px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
please view the demo.
2、use the inline-block, like this:
#nav_bar {
height:50px;
text-align: center;
}
#nav_bar ul {
list-style-type: none;
display: inline-block;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
#nav_bar li {
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
please view the demo.
3、use the float,like this:
#nav_bar {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
#nav_bar ul {
list-style-type: none;
width: 565px;
height: 50px;
height: 100%;
padding: 0;
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
text-align: center;
}
#nav_bar li {
margin: 0 5px;
display: block;
height: 50px;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
Please view the demo.
Other methods, you can click here.
I have a z-index issue on top-navigation with a menu and its sub-menu, i want menu to overlap sub-menu, i have set z-index of menu higher than sub-menu, but it is not working sub-menu is overlapping menu as default.
Please see and suggest any possible way to do it.
jsFiddle
HTML
<div id="login">
<ul>
<li id="overlap">Log In | Join
<ul class="tsm">
<li>Log In</li>
<li>Join</li>
</ul>
</li>
</ul>
</div>
CSS
#login {
margin: 0px auto;
width: 1000px;
height: 38px;
background: #343438;
}
#login ul {
float: right;
margin: 0px;
padding: 0px;
width: auto;
height: 38px;
}
#login ul li {
float: left;
width: auto;
height: 34px;
display: inline;
list-style-type: none;
}
#login ul a {
color: #FFF;
display: block;
width: auto;
height: 34px;
font: bold 16px/34px "Arial Narrow", Arial, sans-serif;
text-decoration: none;
text-align: center;
padding: 0px 15px;
text-shadow: 0px -1px #000;
}
#login .tsm {
padding: 20px;
background-color: #F2F2F4;
width: 230px;
height: auto;
text-align: left;
border: 4px solid #777;
position: absolute;
visibility: hidden;
top: 32px;
right: 0px;
z-index: 100;
}
#login .tsm li a {
width: 230px;
height: 30px;
margin-bottom: 1px;
text-align: left;
padding: 0px;
text-decoration: none;
color: #000;
text-shadow: 0px 1px #fff;
font: 15px/30px Arial, sans-serif;
border-bottom: 1px solid #DDDDDF;
}
#login ul #overlap {
position: relative;
border: 2px solid #900;
z-index: 1000;
}
#login ul li:hover .tsm {
visibility: visible;
}
#login ul ul li {
border: none;
}
The problem stems from the fact that you're trying to position the parent above its child, which causes problems - if the parent moves up a level, so do its children. Instead of z-indexing the parent list, you need to z-index the login link (a tag):
http://jsfiddle.net/SaNJA/
The code is rough, but it should get you started.
Make sure you add a background colour to the link, otherwise you'll still be able to see through it.
Screenshot of the problem:
The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this?
Here is the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>*****</li>
[...]
</ul>
</div>
</div>
Thanks in advance.
Try this. Seems to work in Firefox/Mac
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background: #00ffff;
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding-top: 18px;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
Bottom left? If so - start by setting clear: both; on your #nav block.
Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?
You can use absolute positioning like this:
#header {
position: relative;
height: 42px;
}
#nav {
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
in this method, you make "nav" with absolute positioning related to "header" division.