Change the height of hover effect

Change the height of hover effect - html

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/

Related

Why is my dropdown going sideways, instead of drop down?

I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I want a collapsible menu.
I would be helpful if you suggest some good sources to learn css
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>

like this. beacuse of "display:inline-block" use in dropdown's li tag.i modify & add some css regarding dropdown.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
/*CSS FOR DROPDOWN*/
nav ul li > ul {
float: unset;
position: absolute;
top: 80px;
margin: 0;
display: none;
background-color: #179942;
}
nav ul li ul li {
display: block !important;
line-height: 44px;
}
nav ul li:hover > ul {
display: block;
padding: 15px 10px;
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
nav ul li > ul {
position: relative;
top: 0;
left: 0;
background: #2c3e50;
}
nav ul li > ul li {
display: block !important;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>

Move hover background and font down

My navigation bar has a hover effect. But when I hover over the different elements in the nav bar it shows that the text and background are moved up a bit and aren't aligned with the nav bar.
Here is a photo
The 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 nav {
width: 100%;
background-color: #9cb34f;
height: 40px;
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;
width:23%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
.mainHeader nav a.Home:link, .mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
padding: 10px 120px;
}
.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%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li><a class="Home" href="#">Home</a></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>
Sorry I have to write something here because it says that my post was mostly code and that I needed to add more information.

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 nav {
width: 100%;
background-color: #9cb34f;
height: 40px;
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;
width: 23%;
position: relative;
top: 8px;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
padding: 8px 20px;
}
.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%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">
<nav>
<ul>
<li><a class="Home" href="#">Home</a></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>

Where to put the "position: relative;"?

I found out, that for my dropdown menu to show, I have to add position: relative to my css. But no matter where I add it, it gets displayed like this (with the navbar increasing its width. See the picture:
Code:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
min-height: 2000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
color: #CF5C3F;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 2em;
padding: 0;
}
nav:first-of-type ul {
display: flex;
flex-flow: row wrap;
}
nav:first-of-type li {
flex: 1 0 15em;
padding: 0.125em;
}
nav a {
display: block;
padding: 1em;
transition: all linear 0.15s;
text-decoration: inherit;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
}
.menu li:hover .sub-menu {
position: relative;
z-index: 1;
opacity: 1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.sub-menu {
width: 140%;
padding: 1em;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #CF5C3F;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover {
background: #3e3436;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Couture Anni</title>
<link rel="stylesheet" type="text/css" href="resources/css/ionicons.css">
<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">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Movies <span class="arrow">▼</span>
<ul class="sub-menu">
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</li>
<li>T.V. Shows</li>
<li>Site Help</li>
</ul>
</nav>
</div>
<p class="Schneiderei"><strong>Schneiderei<br>& Handwerk</strong></p>
<p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>
<p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>
I just don't get how I prevent the navbar from increasing its width, when the dropdown is shown.

The need for position: relative in the first place arises from wanting to use position: absolute on the drop-down menu's content. Absolutely positioned elements define their position based on the closest position: relative parent. Therefore the sub menu's parent is the correct place to define position: relative.
Add these to your CSS:
.dropdown-trigger { /* New class */
position: relative;
}
.sub-menu { /* Existing class */
position: absolute;
}
Finally add the .dropdown-trigger class to your second nav ul li element (containing the sub-menu). A few margin tweaks and you're done.

Try This:
.mainHeader nav ul li {
position: relative;
}
.menu li:hover .sub-menu {
position: absolute;
//more code...
}
.sub-menu {
top: 1.7em;
left: -1.8em;
//more code...
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
min-height: 2000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
color: #CF5C3F;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 2em;
padding: 0;
}
.mainHeader nav ul li {
position: relative;
}
nav:first-of-type ul {
display: flex;
flex-flow: row wrap;
}
nav:first-of-type li {
flex: 1 0 15em;
padding: 0.125em;
}
nav a {
display: block;
padding: 1em;
transition: all linear 0.15s;
text-decoration: inherit;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
}
.menu li:hover .sub-menu {
position: absolute;
z-index: 1;
opacity: 1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.sub-menu {
width: 140%;
padding: 1em;
position: absolute;
top:1.7em;
left: -1.8em;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #CF5C3F;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover {
background: #3e3436;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Couture Anni</title>
<link rel="stylesheet" type="text/css" href="css/1.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">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Movies <span class="arrow">▼</span>
<ul class="sub-menu">
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</li>
<li>T.V. Shows</li>
<li>Site Help</li>
</ul>
</nav>
</div>
<p class="Schneiderei"><strong>Schneiderei<br>& Handwerk</strong></p>
<p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>
<p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>

Please check this. You have to put position relative to nav li class and don't give position:relative to class .menu li:hover .sub-menu.
*, *::before, *::after { box-sizing: border-box; }
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
min-height: 2000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}
a {
text-decoration: none;
color: #CF5C3F;
}
.mainHeader {
width: 90%;
margin: 0 auto;
}
.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 2em;
padding: 0;
}
nav:first-of-type ul {
display: flex;
flex-flow: row wrap;
}
nav:first-of-type li {
flex: 1 0 15em;
padding: 0.125em;
position:relative;
}
nav a {
display: block;
padding: 1em;
transition:all linear 0.15s;
text-decoration: inherit;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
}
.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainHeader nav ul li a {
border-radius: 5px;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
.sub-menu {
width:110%;
padding:1em;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#CF5C3F;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover {
background:#3e3436;
}
.mainHeader nav ul.sub-menu{
margin:0;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Couture Anni</title>
<link rel="stylesheet" type="text/css" href="resources/css/ionicons.css">
<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">
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Movies <span class="arrow">▼</span>
<ul class="sub-menu">
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</li>
<li>T.V. Shows</li>
<li>Site Help</li>
</ul>
</nav>
</div>
<p class="Schneiderei"><strong>Schneiderei<br>& Handwerk</strong></p>
<p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>
<p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>
</header>
<footer class="mainFooter">
<p>Copyright © couture-anni.ch</p>
</footer>
</body>
</html>

make header elements use the whole space

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!

Navigation List a:hover

I'm creating a website, and it so far has the navigation bar under "construction." I want it so when I hover over it, the whole nav ul li background to change color, not just the background behind the text. I have this:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Home</li>
<li>Contact Us</li>
<li>Sharepoint</li>
<li>Employees</li>
</ul>
</nav>
</header>
<section class="body">
</body>
</html>
and this for the CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav a:hover
{
background: #00248F;
}
nav ul
{
width: 40%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
}
nav ul li a:hover
{
text-decoration: none;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}
How can I do it?

Try this: http://jsfiddle.net/3BBe2/2/. I have modified your code around.
New CSS:
body
{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8
}
/****HEADER STUFF****/
header
{
position: fixed;
height: 10%;
width: 200%;
background: #F8F8F8;
box-shadow: -10px 0px 10px #000;
}
nav
{
margin-right: 7%;
margin-left: 7%;
height: 40px;
}
nav ul a{
padding:3px 3px;
}
/* nav li a:hover
{
background: #00248F;
} */
nav ul
{
width: 60%;
background: #0033CC;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav ul li
{
display: inline;
padding: 8%;
padding:5px 5px;
padding:10px 12px 10px;
}
nav ul li:hover
{
background: #00248F;
}
nav ul li a
{
color: #F8F8F8;
text-decoration: none;
}
nav ul li a:visited
{
text-decoration: none;
}

You can't change .nav ul li by hovering over a, because they are abscending. A working method to do it is with Javascript.
I've changed the width of .nav because it was unlogic, header was 200% width and with that you can't center .nav proper.
But anyways, this will work for you:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<title>Landstown High School and Technology Academy - Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script>
function change() {
document.getElementById("ul").style.backgroundColor="#bbb";
document.getElementById('nav').style.backgroundColor="#ccc";
document.getElementById('li').style.backgroundColor="#333";
document.getElementById('li2').style.backgroundColor="#333";
document.getElementById('li3').style.backgroundColor="#333";
document.getElementById('li4').style.backgroundColor="#333";
}
function changeback() {
document.getElementById('nav').style.backgroundColor="#888";
document.getElementById("ul").style.backgroundColor="#0033CC";
document.getElementById('li').style.backgroundColor="#f00";
document.getElementById('li2').style.backgroundColor="#f00";
document.getElementById('li3').style.backgroundColor="#f00";
document.getElementById('li4').style.backgroundColor="#f00";
}
</script>
<header>
<div id="nav">
<ul id="ul">
<li id="li">Home</li>
<li id="li2">Contact Us</li>
<li id="li3">Sharepoint</li>
<li id="li4">Employees</li>
</ul>
</div>
</header>
<section class="body">
</body>
</html>
The CSS:
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
background: #F8F8F8;
}
/****HEADER STUFF****/
header {
position: fixed;
height: 10%;
width: 100%;
background: #F8F8F8;
box-shadow: -10px 0 10px #000;
}
#nav ul {
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
line-height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #03C;
}
#nav li {
display: inline;
padding: 0 8%;
background: red;
}
#nav a {
color: #F8F8F8;
text-decoration: none;
}
#nav a:visited {
text-decoration: none;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Change the height of hover effect - html

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; }

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/

Related

Why is my dropdown going sideways, instead of drop down?

Move hover background and font down

Where to put the "position: relative;"?

make header elements use the whole space

Navigation List a:hover

Categories

Resources