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
Related
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.
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;
}
Tried display: inline-block; text-align: center; and many things from the Internet, but nothing helped.
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc; }
#nav li {
list-style: none;
float: left; }
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
HTML:
<ul id="nav">
<?php wp_nav_menu('menu=header_menu&container=false'); ?>
<div class="clear"></div>
</ul>
It looks like this:
... and I don't know how to center it.
basic is :
ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
li {
display:inline-block;
}
Note that if <li> floats, you lose :)
http://jsfiddle.net/KWG2j/
then , if you need to center ul with fluid width: go one step higher in html.
http://jsfiddle.net/KWG2j/1
nav {
text-align:center;
}
nav ul {
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
nav li {
display:inline-block;
}
nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
Set a fixed width on your UL, then adjust it's margin as
margin: 0 auto;
This will apply equal margins to both the left and right of block elements that have a definite width.
http://jsfiddle.net/Be4Q2/
#nav {
margin: 0;
padding: 0;
text-align:center;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
<li>About</li>
<div class="clear"></div>
</ul>
![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;
}
I want to the Li Element of the Ul of my menu are in the Center, I tried a lot of methods but it is not going on. Take a look on my css:
#menu {
float: left;
width: 767px;
height: 38px;
margin: 11px 0 0 14px;
background: url(images/menubg.gif) repeat-x;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border: 1px solid #efeff1;
}
#menu ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
height: 40px;
}
#menu ul li {
float: left;
color: #767676;
height: 18px;
padding: 11px 0px 11px 0px;
display: inline;
}
#menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: inherit;
font-size: 12px;
text-decoration: none;
font-weight: bold;
display: block;
padding: 0px 23px 2px 23px;
border-left: 1px solid #e0e0e2;
}
I tried display: inline, text-aling: center, but it doesnt get right.
Thanks a lot in Advance.
I removed the float and added inline-block instead:
http://jsfiddle.net/dtTdg/1/
#menu ul li {
display: inline-block;