<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;
}
Related
My hover effects aren't exactly aligned with the nav bar. In fact they are slightly wider and I would like to fix that. I've tried some stuff but to no success.
This is how it looks like now:
Code:
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/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: 15%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 15%;
width: 15%;
height: auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
overflow: auto;
}
.mainHeader nav ul li {
text-align: center;
float: left;
width: 24%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
background-color: #CF5C3F;
}
.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;
display: inline-block;
height: 30px;
padding: 10px 130px;
}
.mainHeader p {
}
.mainHeader p.inBearbeitung {
position: absolute;
top: 45%;
left: 5%;
font-size: 150%;
color: #CF5C3F;
font-size: 200%;
}
.mainFooter {
position: absolute;
bottom: 3%;
width: 90%;
left: 5%;
right: 5%;
height: 30px;
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;
padding-left: 1%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/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="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li>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>
Current Problem:
The text is not in the middle of the nav bar and the spacing is wrong of the hover effects
Your a[tag] needs to be displayed inline-block; and than add height=20px; (your menu height)
.mainHeader nav ul li a {
display: inline-block;
height: 20px;
}
It isn't the hover rule that causes this, but the restriction of the height in the rule for nav. Erase the heightsetting from nav and add overflow: auto; to the ul(to wrap the ul around the floated li s)
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/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: 59%;
width: 15%;
height: auto;
}
.mainHeader img.Margrit {
position: absolute;
right: 5%;
top: 15%;
width: 15%;
height: auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
overflow: auto;
}
.mainHeader nav ul li {
text-align: center;
display: inline-block;
float: left;
width: 24%;
}
.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;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Couture Anni</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resources/css/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="resources/img/Content_variation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li>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>
I think you got this issue because the height of several elements, like <nav> <ul> and <li> is smaller than the height of your <a>, try to set it to 25px (the actual height of your links) and that should be fine.
Then it should look like this : https://jsfiddle.net/nodedL26/1/
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!
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>
Please tell me why the four nav items are not centering. I want the space between the middle two nav elements to line up with the center marking.
https://jsfiddle.net/yerc52px/
.mainHeader nav {
background: #383838;
font-size: 1.143em;
height: 40px;
width: 100vw;
line-height: 30px;
margin: 0px 0px 0px 0px;
padding: 0;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {margin: 0px 0px 0px 0px;}
.mainHeader nav ul li {display: inline;}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
width: 18%;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #727272;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Your .mainHeader nav has a width of 100vw when you should probably be using 100%. 100vw wont take into account the margin being applied by the body tag, so it actually spills over 100% to be something like 100% + 20px.
https://jsfiddle.net/yerc52px/3/
.mainHeader nav {
width: 100%;
also your .mainHeader nav ul has default padding being applied to it. Use this to fix that issue:
.mainHeader nav ul {
margin: 0px 0px 0px 0px;
padding: 0;
}
Now to fix the paragraph tag... remove this:
p {
margin-left: auto;
margin-right: auto;
width: 10px;
}
and replace it with:
p {
text-align: center;
}
I'll introduce you to FLEX!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Overwrite your syntax on the following.
.mainHeader nav ul {
display:flex;
justify-content:space-between;
// or if you want equal spaces between menu options
// use justify-content:space-around
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
// Removed width
}
But bewary, you should always put prefix like -webkit-, -moz-, -ms-, etc... But some browsers aren't supported like our favorite IE.
Here's your updated JSFIDDLE
https://jsfiddle.net/yerc52px/6/
You Have to remove width from your code . Edit this section.
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
/* width: 18%; */
}
https://jsfiddle.net/lemonkazi/yerc52px/5/
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.