I have a nav bar with three links in it. If you look closely, you'll see that the dark green top-border on the hover and active anchors do not cover the brown border. Is there any way to make it do this?
Here's what it looks like;
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: 6px solid #4CAF50
}
/*link actions*/
li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Getting Started</li>
</ul>
</nav>
</header>
</div>
</body>
That's the way borders meet. I'd suggest using a box-shadow instead of the top border
NOTE:
You were clearing the floats with overflow:hidden on the ul. This would stop this technique working. I'd suggest an alternative clearfix method.
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header,
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
width: 100%;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1,
li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border: 2px solid #4CAF50;
border-top: none;
box-shadow: 0 -6px 0px 0px #4CAF50;
}
/*link actions*/
li a.active {
background-color: #795548;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0 0px #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: none;
box-shadow: 0 -6px 0px 0px #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Getting Started
</li>
</ul>
</nav>
</header>
</div>
As #Paulie_D commented, the brown in the top border of your anchor tag is the point of intersection between your top green and surrounding brown border. Because the background color of your li is already brown, I'd recommend removing the brown border like so:
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
background-color: #C8E6C9;
margin: 0;
padding: 0;
}
.container {
margin: 0 10% 0 10%;
}
header, ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4CAF50;
}
h1 {
margin: 0;
border-bottom: 1px solid #FFFFFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
li {
float: left;
margin: 0 0 0 0;
}
h1, li a {
display: block;
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
border-top: 6px solid #4CAF50
}
h1 {
border: 2px solid #4CAF50;
}
/*link actions*/
li a.active {
background-color: #795548;
border-top: 6px solid #388E3C;
}
li a:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
color: #795548;
}
li a.active:hover {
background-color: #FDD835;
border: 2px solid #795548;
border-top: 6px solid #388E3C;
}
a:first-child {
text-decoration: none;
color: #FFFFFF;
}
a:first-child:hover {
color: #795548;
}
<body>
<noscript>Please Use JavaScript you loser.</noscript>
<div class="container">
<header>
<nav>
<h1>My Website</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Getting Started</li>
</ul>
</nav>
</header>
</div>
</body>
Note: I also removed the fallback green border of your li to only apply to the h1.
Related
I have a top navigation bar that still has the white borders around. I would like to know how to remove them using css.
This is the css:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #4c4c4c;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: grey;
background-color: white;
}
This is the HTML:
<body>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
Thanks.
Not sure about the question. In #nav li a You are giving border-right: 1px solid #ccc; remove this and I can not see any border any more. Let me know in case you needed something else.
Change border-right: 1px solid #ccc; to border-right: 0px solid #ccc; .Hence,
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 0px solid #ccc;
}
please check the below code and modify accordingly. The issue will be resolved.
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
}
My photos left.png, leftdisabled.png, right.png, rightdisabled.png is 55 x 33 and doesn't look the way I want,
It looks something like this:
- _ _ -
ex: " - " = photos;
" _ " = the texts page1 page2, etc
and I want to look in line like:
- - - -
I tried in different ways to change the values from CSS but doesn't work, what can I do?
My current CSS
div.pagination a.prev { border: 0 none; }
div.pagination a:hover.prev { background: none; border: 0 none; }
div.pagination a.next { border: 0 none; }
div.pagination a:hover.next { background: none; border: 0 none; }
div.pagination { margin: 20px; padding: 3px; text-align: center; font-size: 12px; color: #333; }
div.pagination a { margin: 2px; padding: 2px 5px 2px 5px; text-decoration: none; border: 1px solid #11540C; color: #11540C; }
div.pagination a:hover, div.pagination a:active { background: #11540C; border: 1px solid #11540C; color: #fff; }
div.pagination span.current { background: #11540C; margin: 2px; padding: 2px 5px 2px 5px; border: 1px solid #11540C; color: #fff; font-weight:bold; }
div.pagination span.disabled { margin: 2px; padding: 2px 5px 2px 5px; }
And a JSFiddle:
http://fiddle.jshell.net/nG9FV/
HTML
<div id="pagination" class="pagination">
<span class="disabled">
<img src="http://a.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/arrow_left.png" class="numer" />
</span>
<span ><a title="Pag 1" id="current" class="numer" href="?pg=1">1</a></span>
<span><a title=" Pag 2" class="numer" href="?pg=2">2</a></span>
<span><a class="next" title="Inainte" href="?pg=2"><img src="http://b.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/right_arrow.png" class="numer"/></a>
</span>
</div>
CSS
div.pagination a.prev {
border: 0 none;
}
div.pagination a:hover.prev {
background: none;
border: 0 none;
}
div.pagination a.next {
border: 0 none;
}
div.pagination a:hover.next {
background: none;
border: 0 none;
}
div.pagination {
margin: 20px;
padding: 3px;
text-align: center;
font-size: 12px;
color: #333;
}
div.pagination a {
margin: 2px;
padding: 2px 5px 2px 5px;
text-decoration: none;
border: 1px solid #11540C;
color: #11540C;
}
div.pagination a:hover, div.pagination a:active {
background: #11540C;
border: 1px solid #11540C;
color: #fff;
}
div.pagination span #current {
background: #11540C;
margin: 2px;
padding: 2px 5px 2px 5px;
border: 1px solid #11540C;
color: #fff;
font-weight:bold;
}
div.pagination span.disabled {
margin: 2px;
padding: 2px 5px 2px 5px;
}
span
{
display:inline-block;
float:left;
text-align:center;
}
span .numer
{
width:90px;
height:90px;
font-size:44pt;
}
span .numer img
{
width:90px;
height:90px;
border:1px red solid;
}
Updated Fiddle of your's..!!
I have extra space in the right side of my div. I have tried overflow:hidden and clear but i cannot get rid of it :(
This is my Html
<div id="menu">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
This is the CSS
#menu{
width: 800px;
height: auto;
border: none;
line-height:0;
margin-bottom: 10px;
}
/* Navigation */
#nav {
width: 100%;
overflow: hidden;
list-style: none;
display: inline;
}
#nav ul {
list-style: none;
overflow: hidden;
}
#nav ul li{
padding: none;
margin: none;
border: thin black dashed;
}
#nav li a {
background: #7b7b7b;
border-right: 1px solid #474747;
color: #fff;
display: block;
float: left;
font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 14.1%;
-webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}
#nav li a:hover {
background: #bf0302;
}
nav li:last-child a {
border: none;
}
/* End of Navigation */
This is where the spacing is gone wrong.
(source: picturetrail.com)
The thin yellow border is the menu div and the red one is nav.
The problem is simple you are hadding an 1px border to the rigth of the NAV LI A, so you need to compensate for this.
So add this:
margin-rigth:-1px;
Final CSS:
#nav li a {
background: #7B7B7B;
border-right: 1px solid #474747;
color: white;
display: block;
float: left;
font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
margin-right: -1px;
text-transform: uppercase;
width: 14.1%;
-webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}
Working DEMO | Final Result
![enter image description here][1]I have the following CSS navigation that adds an arrow on hover.
How can add an arrow to be visible for the active or on link? i have attached the image as well
Here is my code below
<style type="text/css">
#nav {
margin-top:0;
padding: 12px 0;
margin-left: 0;
background-color: #fafafa;
color: #464646;
-moz-box-shadow: 0 5px 5px #888;
-webkit-box-shadow: 0 5px 5px #888;
box-shadow: 0 5px 5px #888;
}
#nav li {
list-style: none;
display: inline;
margin: 0px;
padding: 0;
padding: 22px;
padding-right: 0;
padding-left: 0;
}
#nav li a {
font-family: Arial;
font-style:normal;
text-transform: uppercase;
text-decoration: none;
color: #464646;
padding: .7em 3em;
border-right: 1px dashed #959595;
}
#nav li a:hover {
background-color: #fafafa;
color: #005596;
font-weight: bold;
}
#nav li:hover {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
}
</style>
HTML
<ul id="nav">
<li id="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Add a Restaurant</li>
<li>Delete a Restaurant</li>
<li>Logout</li>
</ul>
Use a class name instead if an id:
<li class="active">Home</li>
Then you can do:
#nav li.active {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
Just add a background image to css.
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
background: transparent url(images/down_arrow2.png) no-repeat center bottom;
margin: 0;
}
CSS
#menu2
{
background: black;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 220px;
}
#menu2 li
{
margin: 0;
padding: 0;
}
#menu2 a
{
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 9px 16px;
text-decoration: none;
}
#menu2 a:hover
{
background: black url("../images/select.png") left center no-repeat;
color: #fff;
padding: 9px 16px;
}
#menu2 a:active
{
background: red;
color: #fff;
padding: 9px 16px;
}
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("#menu2 li a").click(function() {
$(".active").removeClass("active");
$(this).addClass('active');
});
});
</script>
HTML
<ul id="menu2">
<li>Home</li>
<li>About us</li>
<li>Contacts</li>
</ul>
Replace this #menu2 a:active into this #menu2 a.active
As like this
Replace this
#menu2 a:active
{
background: red;
color: #fff;
padding: 9px 16px;
}
into this
#menu2 a.active
{
background: red;
color: #fff;
padding: 9px 16px;
}
Demo
Active Navi More info