The following code snippet works fine in Chrome and Mozilla browsers, but on IE8 i see only a an underdered list with no design –ave the following HTML and CSS code, and I'm not sure why. Any ideas?
nav {
background-color: #666;
height: 50px;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
nav ul {
list-style: none;
display: inline-flex;
padding: 0;
margin: 0 auto;
}
nav ul li {
display: inline;
margin: 0 auto;
}
nav a:link, nav a:visited {
color: #FFF;
display: inline-block;
padding: 15px 25px 15px 25px;
height: 20px;
font-size: 20px;
text-decoration: none;
font-family: gothic;
}
nav a:hover, nav a:active,
nav .active a:link, nav .active a:visited {
background-color: #5aada0;
}
<div class="container">
<nav>
<ul>
<li>home</li>
<li>about</li>
<li class="active">contact</li>
</ul>
</nav>
</div>
HTML5 is not supported by IE8 so you can't use the <nav> tag.
Replace your nav tags with something like this:
<div class="nav"></div>
Related
I've been trying to add a red background to the buttons on my navigation bar when they're being hovered over with the mouse. I can't seem to get it to appear, not sure what my issue is. I've watched multiple videos and just can't seem to get it properly. I'm using bootstrap 4 via codepen. Not very experienced with it, so not able to troubleshoot properly. Hoping someone can help figure out what exactly I'm doing wrong.
Here's the link to the pen: https://codepen.io/tazmancooks/pen/WzPROR
nav ul li a.active {background: #E2472F;color: #fff;border-radius: 6px;
Is the code that isn't taking into effect (given I've properly used it)
The code below can solve your problem.
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
transition: .3s;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul il {
list-style: none;
}
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav ul li a:focus {
outline: none;
}
nav ul li a.active,
nav ul li a:hover {
background: #E2472F;
color: #222;
text-decoration: none;
}
<nav>
<div class="logo">Logo</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
Your current code in the codepen is the following:
nav ul li a.active a:hover {
This doesn't work because it's looking for a a:hover inside an a.active. I think instead you're looking for this:
nav ul li a.active,
nav ul li a:hover {
/* insert styling */
]
Looks like you have not assigned background color for :hover Try this code.
nav ul li a:hover {
background: #E2472F;
color: #ffffff;
}
I've posted the Code pen Link. Which you can check and i think it will help you to solve the Problem.
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
transition: .3s;}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex; }
nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;}
nav ul li a:hover {
background: #E2472F;
color: #fff;
border-radius: 6px;}
<nav>
<div class="logo">Logo</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
https://codepen.io/anon/pen/qogxYV
I think I may have some code restricting itself. Basically I am new to this whole web creation thing and I am a bit stuck with the navigation and drop down. it doesn't seem to line up correctly. Here is my code below so far.
So I have: Home - NewToFitness? - Nutrition - Recipes - Contact all on one line and workouts on the next line, underneath the word 'Home'. I want it on the same line as the others but I can't find where my code has gone wrong.
.mainHeader nav {
position: relative;
background: #363636;
height: 60px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline-block;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
font-size: 110.5%;
display: inline-block;
padding: 14px 60px;
height: 30px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active .mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background-color: #73b5ff;
text-shadow: none;
}
.mainHeader nav ul li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #363636;
min-width: 20px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
</head>
<body class="body">
<header class="mainHeader">
<img src="img/Logo.png" width="100" height="100" alt=""/>
<h1>Mike's Workshop</h1>
<nav id="navbar">
<ul>
<li>Home</li>
<li>New to Fitness? </li>
<li>Nutrition</li>
<li>Recipes</li>
<li>Contact </li>
<div class="dropdown">
Workouts
<div class="dropdown-content">
Abs
Back
Biceps
</div>
</div>
</ul>
</nav>
</header>
I'm here to ask a question I know is simple, but I just can not get it to work. I want to change the background color of my li tag to a different color once a user hovers over it.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
Any help will be greatly appreciated, thanks!
add an a to the hover and it works
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li a:hover {
background-color: #666;
color: #000;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
The reason it doesn't work is that there are links inside the li tags - <a> tags. Those take on their own color when hovering. So you'll have to define your desired color for li a:hover { color: ...}
Your styling for the anchor tag is interfering with your li:hover instructions.
You have to think of them as layers, especially when you're using them as block elements. The dimensions of the anchor tag are bigger than the ones of the li tag, hence you don't see the hover effect. I corrected your code. This works:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
background-color: #333;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
nav ul li a {
color: #aaa;
background: transparent;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Try to see, if you notice what I changed. This helps you to understand what was wrong in the first place. :)
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
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...