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>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm stuck creating a navigation bar. I dont know why the text is out of the bar? Can anyone what is the problem?
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aunty Grocery</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
</body>
</html>
The issue is because the sub-level ul is making all the li taller. To keep the alignment to the top of the ul you need to set vertical-align: top:
nav ul li {
/* other properties... */
vertical-align: top;
}
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
vertical-align: top;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
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>
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'm wondering why (looking to achieve a drop down menu), my nav is not aligned horizontally, I've looked for every error I know, obviously didn't find anything. Can anyone help me to find the error? Or a way which I can use to make that nav aligned? :)
body {
background: #182530;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px #000000;
background: #ffffff;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: helvetica;
font-weight: bold;
color: #000000;
}
.menu a {
transition: all linear 0.15s;
color: #000000;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #be5b70;
}
menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
}
.submenu {
width: 10%;
padding: 5px 0px;
position: absolute;
right: auto;
z-index: -1;
opacity: .0;
transition: opacity linear 0.15s;
background: #2e2728;
}
.menu li:hover .submenu {
z-index: 1;
opacity: 1;
}
.submenu li a {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div class="menu-wrap">
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="submenu">
<li>WebIdentity</li>
<li>LogoDesign</li>
<li>Branding</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How can I align my nav? Where is the error?
maybe you need
.menu > ul > li {
display: inline-block;
}
I fixed the code just by adding
nav ul li {
display:inline;
}
Here is a working fiddle