I am trying to create a horizontal navigation bar with the following properties:
The anchor text is centered horizontally and vertically in the list
items.
The entire list item is a clickable link.
On hover, the background colour of the list item and the colour of the anchor text are swapped.
Here is a fiddle that manages to accomplish only #2. None of the solutions that I have found for #1 seem to work. #3 escapes me.
Advice is appreciated.
Here is the working code:
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: block;
text-decoration: none;
color: black;
}
<div id="navbar">
<ul>
<li>Intro</li>
<li>Bio</li>
<li>Issues</li>
</ul>
</div>
You can use this css. Check this link https://jsfiddle.net/oynd1sq6/
#navbar li:hover a{
color:#ffffff;
}
You can use below CSS to get all the 3 things you wanted.
#navbar ul
{
list-style-type: none;
display: table;
}
#navbar li{
float: left;
text-align: center;
}
#navbar li a
{
display: table-cell;
width: 200px;
height: 50px;
text-decoration: none;
color: black;
vertical-align: middle;
background-color: #f0e68c;
}
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
I have used vertical-align: middle to align text it vertically and gave your li styling to a tag to achieve this.
Fiddle here: http://jsfiddle.net/MasoomS/6mn0fun4/1/
Just two modification you need is.
To accomplish #1:
Make line height of anchor same as line height of li tag. i.e. 50px
To Accomplish #3
Add style rule for anchor.
#navbar li:hover a{
color:#f0e68c;
}
Here is fiddle
#navbar ul {
list-style-type: none;
display: table;
}
#navbar li {
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
;
}
#navbar li:hover {
background-color: black;
}
#navbar li a {
display: inline-block;
text-decoration: none;
color: black;
line-height: 50px;
/*Make the line height same as height of li tag*/
}
/*Add style for anchor*/
#navbar li:hover a {
color: #f0e68c;
}
<body>
<div id="statement">
<div id="navbar">
<ul>
<li>Intro
</li>
<li>Bio
</li>
<li>Issues
</li>
</ul>
</div>
</div>
</body>
</html>
Below Code is for html
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
Below code is for css
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
Try this i hope it will work for you
Try this ... just changed ur css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
https://fiddle.jshell.net/ofp184pn/1/
Only updated your code...
For color hover effect add:
#navbar li a:hover{
color: #f0e68c;
background-color: black;
}
And for horizontal align you should add "line-height" and "vertical-align" properties to your "#navbar li" selector:
#navbar li
{
display: table-cell;
float: left;
width: 200px;
height: 50px;
text-align: center;
background-color: #f0e68c;
line-height: 50px;
vertical-align: middle;
}
JsFiddle
Your all 3 problems are solved.
Check it out
#navbar ul{
list-style-type: none;
float:left;
}
#navbar li{ width: 100px;
height: 50px;
text-align: center;
background-color: #f0e68c;
float:left;
}
#navbar li:hover{
background-color: black;
}
#navbar li a{
display: inline-block;
text-decoration: none;
height:100%;
color: black;
}
#navbar li a:before{
height:100%;
vertical-align:middle;
content:'';
display:inline-block;
}
Related
I'm trying to make a dropdownlist in a bar, but no matter what I did, the dropdownlist will never appear below the parent. Here is my css code:
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
overflow: hidden;
background-color: #F9282F;}
li a{
display:inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float:left;
font-size:15px;
font-weight:bold;}
li a:hover{
background-color: #111;}
.dropdown {
position:relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #800000;
min-width: 160px;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
.dropdown:hover .dropdown-content {
display: block;}
.dropdown:hover .dropbtn {
background-color: #111;}
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<div class="dropdown-content">
link 1
link 2
</div></li>
Hope someone will help me get out of this problem. THANKS!
Add color blank to your class (.li a) and add margin-top:50px to your class(.dropdown-content) and its start working.
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
overflow: hidden;
background-color: #F9282F;}
li a{
display:inline-block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
float:left;
font-size:15px;
font-weight:bold;}
li a:hover{
background-color: #111;}
.dropdown {
position:relative;
display: inline-block;}
.dropdown-content {
display: none;
position: absolute;
background-color: #800000;
min-width: 160px;
margin-top:50px;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;}
.dropdown:hover .dropdown-content {
display: block;}
.dropdown:hover .dropbtn {
background-color: #111;}
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<div class="dropdown-content">
link 1
link 2
</div></li>
You can add top: 100%; to .dropdown-content
Remove float:left from li a. You're trying to float the anchors.
Parent shouldn't take float:left
so this style="float: none;" will solve the problem
<a class="dropbtn" style="float: none;">BlaBla</a>
Using floats in cases of dropdown lists can generally be a bad idea. You can achieve most of the work by using display-inline block, UL and LI elements only as structural (f.e. define width), and elements inside to present them selves like A.
ul{
list-style:none;
padding:0;
margin-left:auto;
width:100%;
}
li a{
display:inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15px;
font-weight:bold;
background-color: #F9282F;
}
li a:hover{
background-color: #111;
}
.dropdown {
position:relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #800000;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #111;
}
ul.root {
height: 50px;
}
ul.root li {
position: relative;
}
ul.root ul {
position: absolute;
}
html:
<ul class="root">
<li class="dropdown" ><a class="dropbtn">BlaBla</a>
<ul class="dropdown-content">
<li>link 1</li>
<li>link 2</li>
</ul>
</li>
</ul>
<div>Something else</div>
Edit: I updated the code a bit so you wouldn't have a problem with any elements underneath. You can use z-index if you have issues with overlaping order.
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
.nav ul {
display: block;
list-style-type: none;
margin: 0;
position: absolute;
}
.nav li {
display: inline-block;
float: left;
}
.nav li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
display: block;
float: none;
}
.nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.nav ul > li:hover ul {
display: block;
visibility: visible;
}
.nav ul li:hover > ul {
display: block;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>
About
<ul>
<li>A1
</li>
<li>A2
</li>
</ul>
</li>
</ul>
</div>
sample code
I have tried to make horizontal menu in center of page but 'div align=center' not working properly.
Remove position:absolute; from your ul and add these minor changes
.nav{
width: 100%;
}
.nav ul {
display:block;
list-style-type:none;
margin: 0px auto;
width: 50%;
}
Here's the solved fiddle
Remove position:absolute;. It doesn't take any margin or padding values.
.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}
Here solved fiddle link
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #19c589;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
About
<div class="dropdown-content">
A1
A2
A3
</div>
</li>
<li>New</li>
</ul>
Use as the below:
.nav {
margin:0 auto;
}
please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.
.nav {
display: -webkit-box;
}
.nav ul {
margin: 0 auto;
}
I have 2 nav bars which I want to be on top of each other without spaces, but for some reason there is an empty line as if I had used .
HTML part
<!DOCTYPE html>Logo!
<BR>
<ul class="menu">
<li>Home
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
<li>placeholder
</li>
</ul>
<ul class="submenu">
<li>subheader1
</li>
<li>subheader2
</li>
<li>subheader3
</li>
</ul>
CSS part:
.submenu {
text-align: left;
background-color: #C2F0C2;
}
.menu {
background-color: #98bf21;
}
body {
width: 900px;
margin: 2em auto;
}
.menu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: center;
font-size:0;
}
.menu li {
display: inline;
list-style: none;
}
.menu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #FFFFFF;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #98bf21;
}
.menu a:hover, a:active {
background-color: #7A991A;
}
.submenu ul {
margin:0;
padding:0;
overflow: hidden;
text-align: left;
font-size:0;
}
.submenu li {
display: inline;
list-style: none;
}
.submenu a:link, a:visited {
display: inline-block;
margin-right: -4px;
width: 135px;
color: #000000;
font-size: small;
font-family: Verdana, sans-serif;
text-align: center;
padding: 4px;
text-decoration: none;
background-color: #C2F0C2;
}
.submenu a:hover, a:active {
background-color: #7A991A;
}
Fiddle
I'm not sure which part I need to change so I included all of it.
How can I remove the empty line?
E: I failed with the fiddle and forgot to press update, should have the right one now.
Apply padding:0 and margin:0 for your menu and submenu classes.
.menu, .submenu{margin:0; padding:0;}
DEMO
You just have to add this in your CSS :
.menu {margin-bottom:0px;}
.submenu {margin-top:0px;}
Have a good day.
Note: I see on firefox all together, so it give me 2 pixels on the two square join. For that i used this technique
You can use pseudo :last-child
CSS
div {
display: inline-block;
padding: 15px;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 2px solid red;
margin: 0;
white-space:0;
}
div:last-child {
border-right: 2px solid red;
}
DEMO HERE
I would like my hover effect to be complete, like in the picture. Mine highlights only a tiny bit around the text.
What am I missing? Please add an explanation to the solution.
http://jsfiddle.net/terzista/9vtpyojh/
css:
.nav
{
margin:0 auto;
width:100%;
position: absolute;
top:0px;
left:0px;
z-index: 4;
background-color:rgba(172,175,176,0.68);
}
.nav ul
{
text-align: center;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
}
.nav a{
/*display: inline-block;*/
text-decoration: none;
color: #D12C2C;
}
.nav li:hover
{
color: #666;
background-color: #ED8C8C;
}
.nav li:hover a
{
color: #fff;
}
Modify the following selectors in your css,
.nav ul
{
text-align: center;
margin:0;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding:10px;
}
The only thing being highlighted is your li. If your ul has margin, then there will be space between the highlighted li and the rest of your ul (so to speak). Removing the margin from ul, then adding padding:10px to get that same "buffer zone" allows it to look the same, but also give the highlight you want.
.nav
{
margin:0 auto;
width:100%;
position: absolute;
top:0px;
left:0px;
z-index: 4;
background-color:rgba(172,175,176,0.68);
}
.nav ul
{
text-align: center;
margin:0;
}
.nav li
{
width: 6em;
letter-spacing:0.1em;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding:10px;
}
.nav a{
/*display: inline-block;*/
text-decoration: none;
color: #D12C2C;
}
.nav li:hover
{
color: #666;
background-color: #ED8C8C;
}
.nav li:hover a
{
color: #fff;
}
<section class="nav">
<nav>
<ul>
<li>Home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</section>
the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?
CSS:
#navbar {
width: 900px;
height: 50px;
background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}
#navbar ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align: center;
}
#navbar ul li {
height: 50px;
width: auto;
float: left;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
height: 100%;
}
#navbar a:link {
font-weight:bold;
color: black;
font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
text-decoration: none;
}
#navbar a:hover {
background-color: #003300;
color: gold;
}
#navbar a:visited {
color: black;
}
a:active {
background-color: #003300;
color: gold;
}
HTML:
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>READING</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
Here's a screenshot for reference: (home has my cursor over)
Cheers
here's a quick example for you:
http://jsfiddle.net/DFS5P/
You then should move some of the li css to the a css - like so
#navbar ul li {
height: 50px;
width: auto;
float: left;
}
#navbar ul li a {
display: block;
height: 100%;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
Give your padding & height to anchor instead of LI. Write like this:
#navbar ul li {
float: left;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
height: 50px;
}
Check this http://jsfiddle.net/DFS5P/1/
Try adding
width:100%;
to:
#navbar ul li a {
display: block;
height: 100%;
}
If you remove the padding from the list items and give them a fixed width, it works as you need.
#navbar ul li {
height: 50px;
width: 100px;
float: left;
line-height: 50px;
border-right: 1px solid black;
}
jsFiddle example
It is definately not the best way, but sometimes I just move the entire 'li' inside the 'a' tag. This way everything witin the 'li' goes to the link in when you click on it.
Works fine by me, but as I said it is not the best way.