I have been trying to get to grips with responsive layouts.
The active link on the nav bar does not appear to be working and I cannot see what I have done wrong.
I would like the navigation bar to highlight the current active page. In this case, the active page is the home page. At the moment it is displaying a grey background, however, I would like it to be orange.
It would be much appreciated if someone could take a look at the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="main-header">
<img src="Images/logo.gif" alt="Logo">
<nav><ul>
<li class="active">Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul></nav>
</header>
</body>
</html>
CSS:
body{
background-image: url('Image/bg.png');
color: #000305;
font-size: 87.5%;
font-family: Arial;
line-height: 1.5;
text-align: left;
margin: 0;
padding: 0;
}
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: none;
}
a:link, a:visited{
color: #CF5C3F;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active{
background-color: #CF5C3F;
color: #fff;
text-decoration: none;
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.main-header img{
width: 30%;
height: auto;
margin: 2% 0;
}
.main-header nav{
background: #666;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px;
}
.main-header nav ul{
list-style: none;
margin: 0 auto;
}
.main-header nav ul li{
float: left;
display: inline;
}
.main-header nav a:link, .main-header nav a:visited{
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 23px;
text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.main-header nav li a {
border-radius: 5px;
}
.main-header img {
width: 30%;
height: auto;
margin: 3% 0;
}
This seems to be the piece of CSS where you try to target the 'active' menu button:
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
You are targeting elements with a mainHeader class, but your <header> element has a class called main-header.
In your CSS, replace all occurences of .mainHeader with .main-header and everything should work.
Add a class to your nav, let's say "navigation"
then in css add,
.nav ul li a:current {
//code here
}
Let me know how you get on.
Related
So I'm trying to make an image a hidden link. I had my links in my topBar div be styled to look like buttons with CSS, when I attempted to make an image in my Header just a simple link you could click on it styled it like the button even though it was in an entirely differnt div tag and had a different div class.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head title="ScoopNoop">
<link rel="stylesheet" href="../css files/scoopnoop.css">
</head>
<body>
<div class="topBar">
Jump to Bottom Bar
Page 2
Google
Colts
</div>
<br>
<div class="header">
<a href="https://en.wikipedia.org/wiki/Easter_egg_(media)">
<img src="../images/derp.jpg" alt="Derp">
</a>
<h1>
ScoopNoop
</h1>
<img src="../images/derp.jpg" alt="Derp">
</div>
CSS:
/* All */
body {
background-color: skyblue;}
.body {
padding: 15px 15px;}
/* Bottom Bar */
.bottommBar {
float: left;
margin: 15px;}
.bottomBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;}
.bottomBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
/* Header */
div.header {
text-align: center;
margin: 3em;}
.header img {
max-width: 10%;
height: auto;
margin: 5px 5px;
display: inline-block;}
.header h1 {
margin: 5px 5px;
display: inline-block;}
/* Top Bar */
.topBar {
margin: 2em;}
.topBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;[enter image description here][1]}
.topBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
Instead of
.topBar a:visited, a:active, a:link
and
.bottomBar a:visited, a:active, a:link
It should be
.topBar a:visited, .topBar a:active, .topBar a:link
and
.bottomBar a:visited, .bottomBar a:active, .bottomBar a:link
I got the four header elements home, about, portfolio and kontakt. Now, I would like these to span over the whole nav bar each using 25% of the bar. How can i do that?
Also, I defined that home is always shown red, but as you can see it is wider than the navigation bar itself and i would like to fix this also.
Code:
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
background-size: cover;
height: 1000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader img.Logo {
position: absolute;
right: 5%;
top: 54%;
width: 20%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 25%;
width: 20%;
height: auto;
}
.mainHeader nav {
width: 100%;
background-color: #9cb34f;
height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
}
.mainHeader nav ul li {
text-align: center;
display: inline-block;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader p {
}
.mainHeader p.inBearbeitung {
position: absolute;
top: 45%;
left: 5%;
font-size: 150%;
}
.mainFooter {
position: absolute;
bottom: 3%;
width: 90%;
left: 5%;
right: 5%;
height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
display: table;
}
.mainFooter p {
color: #fff;
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
This is how it looks like now:
Have done following changes in the css below. You can change these more to set required header width and color scheme on link.
Changed the width of .mainHeader to 100%.
.mainHeader {
width: 100%;
margin: 0 auto;
}
Changed the width to 23%. As suggested in answer by #Gabriel also, this 22% or 23% comes due to margin or padding getting applied to these links, and so, at 25% width, they move on to next line.
.mainHeader nav ul li {
text-align: center;
display: inline-block;
width:23%;
}
Changed below code snippet
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited
{
background-color: #CF5C3F;
text-shadow: none;
}
to remove the default red box display over active link.
.mainHeader nav a:hover, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
EDIT : To make all 4 elements centered together, you need to do this.
.mainHeader nav ul {
list-style: none;text-align: center;
}
.mainHeader nav ul li {
display: inline-block;
width:12%;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
background-size: cover;
height: 1000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
}
.mainHeader {
width: 100%;
margin: 0 auto;
}
.mainHeader img.Logo {
position: absolute;
right: 5%;
top: 54%;
width: 20%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 25%;
width: 20%;
height: auto;
}
.mainHeader nav {
width: 100%;
background-color: #9cb34f;
height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
}
.mainHeader nav ul li {
text-align: center;
display: inline-block;
border:1px solid red;
width:23%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover, mainHeader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader p {
}
.mainHeader p.inBearbeitung {
position: absolute;
top: 45%;
left: 5%;
font-size: 150%;
}
.mainFooter {
position: absolute;
bottom: 3%;
width: 90%;
left: 5%;
right: 5%;
height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #9cb34f;
display: table;
}
.mainFooter p {
color: #fff;
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="mainHeader">
<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul>
</nav>
<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
This will point you to the right direction:
.mainHeader nav ul li {
width: 25%;
}
.mainHeader nav ul li a {
display: block;
}
NOTE: You will also need to work out the spacing between the menu items or set maybe a 22% percentage so everything is on the same line.
Hope this helps!
<head>
<title>HTML5/CSS3 Responsive Theme</title>
<meta charset="UTF-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale=1">
</head>
<body class="body">
<header class="mainheader">
<img src="img.jpg">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
body {
background-image: url(img1.jpg);
color: #000305;
font-size: 87.5%;
font-family: Arial, "Lucida Sans Unicode";
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited; {
}
a:hover, a:active; {
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav {
background-color: #666;
height: 48px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited, {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
All the attributes you see here are working except those within .mainheader nav a:link , .mainheader nav a:visited. (color: #FFF; display: inline-block; padding: 10px 25px; height: 20px;) You asked to see more code, here it is. Thanks
Of course it will not apply. Why?
You have a syntax error , comma after the selector.
Try changing this to:
.mainheader nav a:link, .mainheader nav a:visited,
to:
.mainheader nav a:link, .mainheader nav a:visited
Try this
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
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>
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>