I'm trying to have an inline-block navigation bar. When someone hovers over the li, I want it to change background colors - simple enough.
It appears as though my code causes the background to be off about 2 inches.
Here is the offending code -
css-
#mainNav {
width: 100%;
background:#bbb;
border-right: 2px solid #777;
border-left: 2px solid #777;
border-bottom: 2px solid #555;
}
#mainNav ul li {
display: inline-block;
line-height:40px;
font-size: 20px;
padding: 0 15px 0 15px;
border-right: 2px solid #777;
}
#mainNav ul li.active {
background:#aaa;
}
#mainNav ul li:hover {
background:#aaa;
}
html-
<div class='container_12'>
<nav id="mainNav">
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Forums</a></li>
</ul>
</nav>
</div>
Screenshot:
Give margin-left to li will solve the problem.
DEMO
It should also be :
#mainNav ul li:active {
background:#aaa;
}
Just like hover is coded out. Still not sure about the original question though.
Related
Im trying to have a layout like this, with a full width gray border but then below the active item have a different border color:
enter image description here
But its not working. Do you know why?
https://jsfiddle.net/Ldye5qg8/
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
Css
a{text-decoration:none;}
.nav{
border-bottom: 3px solid gray;
}
.nav a{
padding: 15px;
}
.nav .active{
border-color:yellow;
padding:20px;
}
Try this one. Hope it will work
EDIT: I used 5px bottom color in .nav. So, the whole .nav will use 5px bottom color. Then I used 5px in .nav a.active bottom color. The .nav a.active bottom color will be shown but on different lines. Hence I used margin-bottom: -5px to overlap .nav color.
.nav {
list-style-type: none;
padding-left: 0;
margin: 0;
border-bottom: 5px solid #ccc;
}
.nav a {
display: inline-block;
padding: 0 15px 0 15px;
margin-left: -4px;
text-decoration:none;
}
.nav a.active {
border-bottom: 5px solid yellow;
margin-bottom: -5px
}
<div class="container">
<div class="nav">
<a class="active" href="">Item 1</a>
Item 2
</div>
</div>
.nav .active {
border-bottom: 3px solid yellow;
padding: 20px 20px 1px 20px;
}
is not the same element, you need to bring for him border-style also to bottom.
Just change border color to border-bottom like this
.active {
border-bottom: 3px solid yellow;
}
I have the following html. When I hover on the last li, a border should generate. When I hover on the last li, other li's are moving.
I have gone through these 2 questions.
list item width height issue
fixed with span inside li
I can't able to stop moving the element.
HTML:
<div class="menu_right">
<ul class="menu">
<li>Text 1</li>
<li>Text 2</li>
<li class="your_space"><span>Text3</span></li>
</ul>
</div>
Kindly check my jsfiddle.
It maybe a simple issue. But I can't able to find a solution to fix it.
Use a transparent border on all the other <li> to make it good.
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
Fiddle: https://jsfiddle.net/8cu4bL3s/
Please add border: 2px solid transparent; to all the li
.menu_right {
float: right;
}
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
ul.menu li a {
text-decoration: none;
}
li.your_space {
width: 100px;
}
li.your_space:hover {
border: 2px solid black;
}
li.your_space a>span {
display: block;
}
<div class="menu_right">
<ul class="menu">
<li>Text 1
</li>
<li>Text 2
</li>
<li class="your_space"><span>Text3</span>
</li>
</ul>
</div>
another solution
Add padding:2px; to all li and on hover remove padding of the hovered li and add border to it
Add this CSS
.menu_right{
float:right;
}
ul.menu li{
float: left;
list-style-type: none;
padding:2px;
}
ul.menu li a{
text-decoration:none;
}
li.your_space{
width:100px;
}
li.your_space:hover{
border: 2px solid black;
padding:0;
}
li.your_space a>span{
display:block;
}
Explaining:
This is because you are setting a border property on hover, which causes the li to add the border property to its height / width.
You need to set transparent borders on all your li independent on they state, so when you hover any li you won't be adding a border but changing its color.
ul.menu li {
border: 2px solid transparent;
}
course blocks will move, you add a 2 pixel border (left + right = 4px). As an alternative I can propose "outline"
li.your_space:hover{
outline: 2px solid black;
}
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
I am trying to recreate an effect that can be seen in the top links of http://math.stackexchange.com. The effect is that there is some text and a line below, upon hover both the text and segment of line below it changes color.
Here is what I have: http://jsfiddle.net/4m7zc/ I tried making the bottom borders overlap but it didn't work. What is the appropriate way to do this?
HTML
<div class="top-links text-center">
TEA
|
COFFEE
|
SODA
|
ALCOHOL
</div>
CSS
.top-links {
font-size:16px;
color: #b77b48;
border-bottom: 4.5px solid #db9356;
}
a.top-link {
color: #b77b48;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid #db9356;
}
a.top-link:hover {
color: red;
margin-bottom:0px;
padding-bottom:0px;
border-bottom: 4.5px solid red;
}
If you want to copy the site exactly, you can use a list with text-align:center set on the ul then display:inline-block set on each li. Then simply apply a border on mouse hover to any links, and offset their bottom margin by the border width so they dont 'pop' out of place. Simple!
Demo Fiddle
HTML
<ul>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
</ul>
CSS
ul {
list-style:none;
text-align:center;
border-bottom: 3px solid #000;
margin:0;
padding:0;
}
li:hover a {
color: #d02027;
border-bottom: 3px solid #d02027;
margin-bottom:-3px;
}
a {
font-size: 14px;
color: #000;
padding: 6px 12px 6px 12px;
text-transform: uppercase;
text-decoration: none;
display: block;
}
li {
padding: 0 5px;
display: inline-block;
}
You can try the following:
Display your links as inline-blocks,
Position them relatively, changing top to the same as your border height,
Use a whole integer for your border, to avoid any rounding issues:
a.top-link {
display:inline-block;
position:relative;
top:4px;
color: #b77b48;
border-bottom: 4px solid #db9356;
}
JSFiddle
If the 4px of space above your buttons is bugging you, you can combat this by giving a -4px top margin to the parent:
.top-links {
/* other styles */
margin-top:-4px;
}
JSFiddle
Note: Don't use   to create margins between elements. That is what the CSS property margin is for.
remove the underline from a tag using text-decoration property like below, so it looks similar to what you expect (Instead of aligning the line better to remove
)
a {
text-decoration: none
}
JSFiddle
Try this>>>>DEMO JSFIDDLE
I removed the text-decoration from the a element then I rearranged the order of the code and added some CSS and HTML so the navigation doesn't mix up with the line as it can be seen in the jsfiddle.
HTML
<div class="top-links text-center">
NEWEST
<div class="line">|</div>
POPULAR
<div class="line">|</div>
TAGS
<div class="line">|</div>
USERS 
</div>
and the CSS
.top-links {
font-size:16px;
color: #b77b48;
/*border-bottom: 4.5px solid #db9356;*/
}
a.top-link {
color: #b77b48;
border-bottom: 4.5px solid #db9356;
}
a.top-link:hover {
color: red;
border-bottom: 4.5px solid red;
}
.line {
display:inline;border-bottom: 4.5px solid #db9356;
margin:-4px;
}
a {
text-decoration:none;
}
Check the jsfiddle at http://jsfiddle.net/dC8P2/2/ --if you need more help or this does not work please comment back. This works 100%.
Please you this HTML - it more accurate
HTML
<ul id="nav">
<li>Tea</li>
<li>Coffee</li>
<li>Soda</li>
<li>Alcohol</li>
</ul>
CSS
#nav {
margin:0;
padding:0;
}
#nav li {
float: left;
list-style:none;
}
#nav a {
display: block;
border-bottom: 3px solid #000;
padding: 5px 15px;
text-decoration: none;
}
#nav a:hover {
border-bottom: 3px solid #f00;
}
Please look at my CSS Tabs menu: http://jsfiddle.net/NoGo/3Spru/
It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: not actively developed anymore)
The Tabs are: Home | Users | Map
My HTML:
<nav>
<div class="ym-wrapper">
<div class="ym-wbox">
<ul>
<li>
<a href="#">
<div>Home <i class="icon-home"></i></div>
<span>Go to Main Page</span>
</a>
</li>
<li class="active">
<a href="#" class="">
<div>Users <i class="icon-search"></i></div>
<span>Search User Accounts</span>
</a>
</li>
<li>
<a href="#">
<div>Map <i class="icon-globe"></i></div>
<span>Users near you</span>
</a>
</li>
</ul>
</div>
<div class="ym-clearfix"></div>
</div>
</nav>
The CSS:
header nav {
clear: both;
width:100%;
position:relative;
white-space: nowrap;
padding-top:10px;
border-bottom: 2px solid #CA278C;
}
header nav ul {
list-style: none;
padding:0;
margin:0;
display:inline;
}
header nav ul li {
display: inline-block;
border-top: 2px solid transparent;
margin: 0 5px -2px 0;
background-color: #f0f0f0;
border-bottom: 2px solid #CA278C;
line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #fff;
background-color: #fff;
}
header nav ul li.active {
border-right: 2px solid #CA278C;
border-left: 2px solid #CA278C;
}
header nav ul li a {
display: inline-block;
padding: 5px 16px;
}
header nav ul li a div {
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
header nav ul li a span {
font-size: 11px;
color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
vertical-align: baseline;
line-height: inherit;
opacity: 0.7;
}
My problem: When I change browser zoom, the bottom-line looks ugly. Is there a better way than working with margin-bottom: -2px on li elements?
I could get it to look a lot better by using subpixel positioning and setting the margin-bottom and border-width to -1.5px and 1.5px respectively. It looks fine here at jsFiddle - with minimal effort - on 100% up to somewhere close to 200%, and you could probably get it to look even better at other zoom levels by going further down the subpixel rendering path.
But then it dawned on me that you don't really need to have that bottom border on the inactive tabs, just set the margin-bottom on the tabs to 0px and then set the margin-bottom at the .active and :hover class to -2px. This will automatically look fine on any zoom level, as you won't have to worry about 'lineing up the lines' at all. Here's a jsFiddle for this approach.
header nav ul li {
display: inline-block;
margin: 0 5px 0 0;
border-top: 2px solid transparent;
background-color: #f0f0f0;
line-height: 180%;
position: relative;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #FFF;
background-color: #fff;
margin-bottom: -2px;
}