Hello I am terribly sorry for the 'easy' question, it's just that I did this verbatim from the website and so I must be missing something painfully obvious. Ok so I have an li list and I want the first one to be yellow and the other elements to be white. I have for one of my rules in the real project li a { color: white but I am pretty sure that this specific class should override that rule, no? Any help would be appreciated, thanks.
.active{
color: yellow;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a:hover {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a class="active" href="#overview">Overview </a></li>
</ul>
</div>
Add a more specific css selector to override the white color coming from #subnav li a like below:
#subnav li a.active {
color: yellow;
}
and you will have the first li yellow if you have put active class to it.
.active {
color: yellow;
}
#subnav {
height: 10%;
text-align: center;
}
#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
text-align: center;
width: 100%;
font-weight: bold;
}
#subnav li {
display: inline-block;
}
#subnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#subnav li a.active {
color: yellow;
}
#subnav li a:hover {
color: yellow;
}
<div id="subnav">
<ul>
<li> <a class="active" href="#overview">Overview </a>
</li>
<li> Test
</li>
</ul>
</div>
Try this, it should work. Thanks
#subnav li a:hover,
#subnav li a.active {
color: yellow;
}
Related
I've got a nav here:
http://tumolo.co.uk/navbar/
I've tried all sorts - but I cant get this nav to fill up the browser 100% width. It has white space on both Left and Right side of the navbar.
I put each nav li to 16% as it's 100% / 6 menu elements, 16% is the closest to get each element equal size.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
#media screen and (min-width: 600px) {
.nav li {
width: 16%;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
border-right: 1px solid #ebe3e3;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
.nav li:last-child {
border-right: 0;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
Flexbox will get you there!
.nav ul {
width: 100%;
display: flex;
justify-content: space-around;
}
If you're wanting the ends to be flush against the edge, it may be better to use:
justify-content: space-between;
Looking at the existing styles on the element, you can remove the padding-left and padding-right, as mentioned in the comments. Also, with flex, you may want to check out vendor prefixes.
Note: Support for old IE can be shaky.
The above does leave gaps in the header, as also mentioned in the comments. An alternative, suggested by Joe, is:
#navList {
display:flex;
}
#navList li {
flex:1 auto;
}
If it's not absolutely necessary, I'd ditch display: inline-block; on the .nav li - it messes with width calculations, as you know since you've adjusted for it with the -4px on each, which is only an approximation.
If you float the .nav li left, add box-sizing: border-box; and increase the width to 16.6667%, you'll get total coverage. You'll have to adjust .nav ul to contain it properly, but I've updated the snippet below to show.
body {
background: #ccc none repeat scroll 0 0;
margin: 0;
padding: 0;
}
.nav ul {
background-color: #fff;
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
float: left;
width: 100%;
}
.nav li {
border-bottom: 1px solid #888;
font-size: 1em;
height: 40px;
line-height: 40px;
}
.nav a {
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
text-decoration: none;
transition: background-color 0.3s ease 0s;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
background-color: #5e7ea4;
color: #ffffff;
}
.nav ul li#mvl a:hover {
background-color: #5b3e52;
color: #ffffff;
}
.nav ul li#admin a:hover {
background-color: #7c6e61;
color: #ffffff;
}
.nav ul li#liquid a:hover {
background-color: #7c4c4c;
color: #ffffff;
}
#media screen and (min-width: 600px) {
.nav li {
border-bottom: medium none;
border-right: 1px solid #ebe3e3;
font-size: 1em;
height: 50px;
line-height: 50px;
width: 16.6667%;
box-sizing: border-box;
float: left;
}
.nav li:last-child {
border-right: 0 none;
}
}
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition</li>
<li id="hmrc">Cant pay HMRC?</li>
<li id="cvl">CVA</li> <li id="mvl">MVL</li>
<li id="admin">Administration</li>
<li id="liquid">Liquidation</li>
</ul>
</div>
What I understand from your explanation, you are trying to make a header navigation that has 100% width and the nodes of the menu will have the same width;
You should use calc() let me give you an example and you can apply that to your code;
<div class="nav">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
Also in your CSS;
.nav { height:30px; width:100%;
border-bottom:1px solid #000;}
.nav li {
width:calc(100% / 4);
list-style: none;
text-align:center;
float:left;
}
We divided %100 to 4 because we have 4 li elements in our navigation.
Check on jsfiddle: https://jsfiddle.net/d9b1re2p/1/
Hoping that would help, please post your code as it is simplified in your question with a better explanation next time.
Use CSS table. It behaves much like the flex box but with better support.
It will space out each li equally up and down without the need for the 16% media query.
You will just need to tweak the styling of the links a little to add in your border.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
display:table;
width:100%;
table-layout:fixed;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display:table-cell;
vertical-align:top;
position:relative;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
I've looked at so many questions of people asking how to centre a navigation bar, and I've tried lots of things and just cannot get it to move...
HTML:
<div id="header">
<h1>Midlands Car Club</h1>
<ul id="nav">
<li>Home</li>
<li>Members</li>
<li>Cars</li>
</ul>
</div>
CSS:
//header
#header {
width: 100%;
height: 150px;
}
#header h1{
font-family: "Vernada", sans-serif;
font-size: 1.8em;
text-align: center;
}
//navigation
#nav ul {
list-style-type: none;
padding: 0;
text-align: center;
}
#nav a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
#nav li {
display: inline;
color: black;
font-family: "Vernada", sans-serif;
font-size: 1.2em;
}
#nav a:link {
width: 120px;
padding: 10px;
display: inline-block;
text-decoration: none;
color: black;
}
#nav a:visited {
display: inline-block;
text-decoration: none;
color: black;
}
#nav a:hover {
text-decoration: none;
color: grey;
}
#nav a:active {
text-decoration: none;
color: blue;
}
Most likely missed something out, or just gone about it wrong altogether. I've managed to get it working in the past but have completely forgotten how I did it...
#nav {
width : "however wide you want it";
margin: 0 auto;
}
It's the margin: 0 auto; that centers the element.
You could also use text-align on the parent element, but the margin trick is most commonly used.
I'm triying to create a horizontal nav bar in my website. The problem is when I hover over one of the options. It gets highlighted but not as I want. This is the result:
As you can see there's some space which should be highlighted as well but it's not.
My Html and CSS:
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
<hr />
<hr />
</body>
Add line-height in li
line-height: 21px;
.section ul {
list-style: none;
list-style-type: none;
padding: 0;
overflow: hidden;
text-align: center;
background-color: #5fb763;
}
.section ul li {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 0.8em;
width: 200px;
height: 100%;
line-height: 21px;
}
.section ul li a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.section ul li a:hover {
background-color: #f0f0f0;
height: 100%;
}
.section ul li a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<div class="section">
<ul>
<li class="home">El local
</li>
<li class="tutorials">Como Llegar
</li>
<li class="about"><a class="active">Historia</a>
</li>
</ul>
</div>
If you don't need to support IE8. I would look at maybe using the nav tag instead for your needs. Consider the following snippet;
nav {
text-align: center;
background-color: green;
}
nav a {
text-decoration: none;
color: #fff;
transition: .3s background-color;
}
nav a:hover {
background-color: #f0f0f0;
}
nav a.active {
background-color: rgba(198, 186, 186, 0.73);
color: #444;
}
<body>
<nav>
El local
Como Llegar
<a class="active">Historia</a>
</nav>
</body>
With your current solution you'll need to float the li elements in order to get the correct behaviour with specified widths I believe. You could also consider a flexbox solution.
There are some simple guidelines to creating CSS navigation bars here.
Hope that helps you out!
I want to make it so the +Kendrick element is not underlined, but the Gmail and Images elements remain underlined when hovered over, any help would be appreciated, thanks
Relevant HTML
<body>
<div id="header">
<ul>
<li>+Kendrick</li>
<li>Gmail</li>
<li>Images</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Relevant CSS
#header {
background-color: none;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#header ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
}
#header ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#header ul li a:hover {
text-decoration: underline;
}
ul a:hover first-child {
text-decoration: none;
}
You almost had it there. You just needed to finish the last css style like this
#header ul li:first-child a:hover {
text-decoration: none;
}
Here is the JSFiddle
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