I want to make the navigation to look like this, the border needs to look blue for the active links.
Now with this code below:
.main-nav {
list-style: none;
text-align: center;
border-bottom: 2px solid #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
background-color: #ffffff;
padding: 30px 10px;
margin-bottom: 2px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #303030;
text-decoration: none;
}
.main-nav li:active,
.main-nav li:hover {
background-color: #f7f7f7;
border-bottom: 2px solid #439ddc;
border-top: 2px solid #439ddc;
}
My navigation looks like this:
You can use margin-top: -2px and margin-bottom: -2px to fix you problems:
Working example on jsfiddle: https://jsfiddle.net/jqsg0sLa/
.main-nav {
list-style: none;
text-align: center;
border-bottom: 2px solid #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
background-color: #ffffff;
padding: 30px 10px;
margin-top:-2px;
margin-bottom:-2px;
border-top: 2px solid #d9d9d9;
border-bottom: 2px solid #d9d9d9;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #303030;
text-decoration: none;
}
.main-nav li:active,
.main-nav li:hover {
background-color: #f7f7f7;
border-bottom: 2px solid #439ddc;
border-top: 2px solid #439ddc;
}
Sounds like you're thinking of the border-bottom and border-top properties. You are listening for the :hover pseudoclass, to detect if a mouse is over the link. If it is, we will add a blue border.
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
a {
text-decoration: none;
color: black;
}
a:hover {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
<nav>
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</nav>
Related
I can't seem to make the bottom border under LinkedIn link less bold as it is double bordered.
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100px;
border: 1px solid;
border-bottom: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
change css
li:last-child a {
border-bottom: none;
}
When you do that :
li a {
border-bottom: 1px solid;
}
you tell CSS to add a border bottom to all link inside a li.
li:last-child {
border-bottom: none;
}
was almost correct, but you didn't tell css the same rule as the previous snippet.
the good way to put this is
li:last-child a {
border-bottom: none;
}
Another thing you can remove
border-bottom: 1px solid;
inside the ul block it does not do anything
Here are my solution with extra class:
.liBorder {
border-bottom: solid black 1px;
}
<ul>
<li class="liBorder">Home</li>
<li class="liBorder">About</li>
<li class="liBorder">Services</li>
<li class="liBorder">Contact</li>
<li class="liBorder">LinkedIn</li>
</ul>
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100px;
border: 1px solid;
border-bottom: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
.liBorder {
border-bottom: solid black 1px;
}
https://jsfiddle.net/master1991/cjzfdg3v/3/
you can use this css
li:last-child a {
border-bottom: none;
}
li:last-child {
border-bottom: none;
}
I have a dynamic menu that is generated by a CMS in the following format:
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Blog</li>
<li>Dashboard</li>
</ul>
Here's the CSS:
.nav li {
list-style: none;
float: left;
padding: 15px;
}
.nav a {
color: #777;
text-decoration: none;
}
.nav a:hover {
color: green;
}
.btn-blue {
border: 1px solid red;
color: red;
padding: 5px 20px;
border-radius: 25px;
background-color: #fff;
}
.btn-blue:hover {
border: 1px solid red;
color: white;
background-color: red;
}
The problem here is that the class "btn-blue" isn't respected. The color code for btn-blue doesn't seem to work. How do I resolve this problem?
Here's the JSFIDDLE DEMO
It's because .nav a is a more specific selector that .btn-blue. Take a look at the MDN article for a lot more information on specificity
As for your problem, just change .btn-blue to .nav .btn-blue.
It all boils down to specificity. Try this instead, for your css:
.nav li {
list-style: none;
float: left;
padding: 15px;
}
.nav a {
color: #777;
text-decoration: none;
}
.nav a:hover {
color: green;
}
.nav .btn-blue {
border: 1px solid red;
color: red;
padding: 5px 20px;
border-radius: 25px;
background-color: #fff;
}
.nav .btn-blue:hover {
border: 1px solid red;
color: white;
background-color: red;
}
If you want to read more about this, here is a post on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have borders on the left and right sides of some items in a list, but I'm getting these white gaps that I don't want, but it's only on the right side which is weird and I haven't been able to figure out what I'm doing wrong.
Any help would be great.
The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}
<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><u>Products</u>
<ul class="dropdown">
<li class="top">Apples
</li>
<li>Cans
</li>
<li>Bowls
</li>
<li class="bottom">Cups
</li>
</ul>
</li>
</ul>
The style in ul li
border: 1px solid white;
is causing extra white lines to be drawn
Remove it and you should be good
I have this css for my horizontal menu:
when you hover over the links and a sub menu appears, it shows the sub menu but the page content below moves down slightly.
any ideas?
fiddle here: http://jsfiddle.net/XwDTt/1/
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
change this:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
into this :
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
i think this one is the simplest
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
There are two points here:
When you add a border to an element, it often increases the height of the element. You could use a transparent border by default.
Instead of setting a margin property on anchor tags, you could use the property on the sub-menu list-items, which are positioned absolute and doesn't affect the document normal flow.
Use the following:
nav ul li:hover a {
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li:hover li {
margin-top: 5px; /* <-- add margin to sub-menu items */
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid transparent; /* <-- Set a transparent border */
border-bottom: 1px solid transparent; /* <-- Set a transparent border */
}
JSFiddle Demo
You are adding border on hover. You should have transparent borders by default...
And margin too.
nav ul li a {
display: block;
margin-bottom:5px;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
http://jsfiddle.net/XwDTt/3/
Or you can just set the height of li elements:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
Solution 1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
Solution 2:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment this line only */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;;
}
and add this line:
nav ul li a {
margin-bottom:5px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
The tabs work perfectly. I am just having a problem with the placement in IE. In Mozilla it shows the placement of the tabs perfectly but when I load the page in IE it moves the tab to the complete left of the table the tabs are in.
Here is my CSS code:
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
#tabs_container {
width: 626px;
font-family: Arial;
font-size: 10px;
}
#tabs_container ul.tabs {
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li {
float: left;
}
#tabs_container ul.tabs li a {
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}
#tabs_container ul.tabs li.active a {
background-color: #90afcb;
padding-top: 6px;
}
div.tab_contents_container {
border: none;
border-top: none;
padding: 10px;
font-size: 10px;
}
div.tab_contents {
display: none;
}
div.tab_contents_active {
display: block;
}
div.clear {
clear: both;
}
HTML
<!-- These are the tabs -->
<ul class="tabs">
<li class="active">
<span>Dienstleistung | Services</span>
</li>
<li><span>Über uns | About us</span></li>
<li><span>Netzwerken | Networking</span></li>
<li><span>Social Media</span></li>
<li><span>Impressum</span></li>
</ul>
I would be very grateful for any assistance you could provide.
Many thanks
hi did you try to add float #tabs_container ul.tabs and #tabs_container ul.tabs li a
#tabs_container ul.tabs {
float:left;
border:1px solid red;
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li a {
float:left;
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}