When adding padding, margin, just general distance to a text element on my page, my top menu kind of "mirrors" down on the page and i get a non-functional second menu at the middle of the page. Identical to the second one, and cuts through all other elements like images, text, etc.. Colors and all other aspects are still retained on the new menu and on the page in general.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body class="fade-in">
<div id="meny">
<div id="menyknapp1">
<div class="dropdown">
<button class="dropbtn">Mobile Enheter</button>
<div class="dropdown-content">
Enheter
Operativsystemer
</div>
</div>
</div>
<div id="menyknapp2">
<div class="dropdown">
<button class="dropbtn">Teknologi</button>
<div class="dropdown-content">
Webtjenester
Teknologier
</div>
</div>
</div>
</div>
</div>
<div id="bilde1">
<img src="Technology.png" style="width: 400px; height: 350px;">
</div>
</div> </div>
<div id="tekst">
<p> text
</p>
</div>
</body>
</html>
CSS code:
#import url('https://rsms.me/inter/inter-ui.css');
/*fade in animasjon body */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
}
body {
height: 100%;
width: 100%;
margin-left: 2%;
}
#meny {
background-color: #CACACA;
position: absolute;
width: 100%;
height: 10%;
top: 0%;
left: 0%;
padding-left: 10px;
padding-top: 5px;
padding-right: 5px;
}
#tekst
{
top: 20%;
font-family: 'Inter UI', 'sans-serif';
font-size: 30px;
position: absolute;
}
.dropbtn {
background-color: #89cff0;
color: black;
padding: 16px;
font-size: 18px;
border: none;
cursor: pointer;
font-family: 'Inter UI', 'sans-serif';
border-radius: 3px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #89cff0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: 'Inter UI', 'sans-serif';
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #6599b2;
}
#menyknapp1 {
position: absolute;
left: 3%;
top: 10%;
padding: auto;
}
#menyknapp2 {
position: absolute;
left: 20%;
padding: auto;
top: 10%;
}
#tekst {
margin-left: 18px;
font-size: 18px;
line-height: 25px;
position: relative;
padding-top:
}
#bilde1 {
position: absolute;
left: 18px;
width: 600px;
height: 400px;
}
It has to do with absolute position in your .dropdown-content css definition.
Maybe take some time to understand how absolute positioning works:
https://www.w3schools.com/css/css_positioning.asp
Related
I've found plenty of answers to this question, but none of them have worked for my case. I can't help but feel I'm missing something basic.
HTML
<nav>
<a to="#"><i class="fas fa-home">TEST</i> Home</a>
<a to="#">About</a>
<a to="#">Something else</a>
<div class="animation start-home"></div>
</nav>
CSS
nav {
display: flex;
margin: auto;
/* margin-top: 30px; */
padding: 12px 0;
position: relative;
max-width: 800px;
height: 50px;
background-color: purple;
border-radius: 0;
}
nav a {
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
}
nav i {
/* position: absolute; */
height: 100%;
top: 0;
z-index: 0;
transition: all 0.5s ease 0s;
color: black;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 150px;
}
a:nth-child(3) {
width: 150px;
}
/* somehow invert this color when the nav a element is hovered */
.fa-home {
color: green;
}
.fa-home:hover {
color: white;
}
/* I expected this to work, but it doesn't */
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
nav a:nth-child(1):hover ~ .animation {
width: 100px;
left: 0;
background-color: green;
}
nav a:nth-child(2):hover ~ .animation {
width: 150px;
left: 100px;
background-color: #d3b814;
}
nav a:nth-child(3):hover ~ .animation {
width: 150px;
left: 250px;
background: rgb(249, 11, 70);
}
What I want is for the green TEST text, left of Home, to change colour when hovering the link.
I've used the ~ modifier to move the background colour around - but I can't get it to work with the I tag (which is a font-awesome icon, but couldn't get codepen to import it properly).
I'm currently able to turn it white while hovering the I tag, but not the link itself.
Finally, here's the original navbar code for those interested.
The selector is wrong
Change
nav a:nth-child(1):hover ~ .fa-home {
background-color: white;
}
To this:
nav a:nth-child(1):hover > .fa-home {
color: white;
}
Somehow my dropdown button isn't aligning in center when using the custom html in Clickfunnels. I'm not really that into coding maybe someone here could help me with it.
I already tried to add different text-aligns also with !important left, right, margins etc. but it would save me a lot of headaches if it would just always easily be centered.
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS</button>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.dropdown:hover .dropbtn {
background: white;
transition: background ease-in-out 0.5s;
color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
width: 150px;
left: -999em;
}
.dropdown:hover .dropdown-content {
background-color: white;
left: 0;
transition: background ease-in-out 0.5s;
;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
<div class="dropdown-content">
GALERIE
LAGE
</div>
</div>
</body>
</html>
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: white;
color: red;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(300%, 0) !important;
}
.dropdown:hover .dropbtn {
transition: background ease-in-out 0.5s;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
width: 150px;
left:-999em;
}
.dropdown:hover .dropdown-content {
left: 0;
transition: background ease-in-out 0.5s;;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(350%, 0) !important;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
<div class="dropdown-content">
<div class="dropdown-menu-center">
GALERIE
LAGE
</div>
</div>
</div>
</body>
</html>
Please run code it will center your drop down button
Made the changes to following 2 classes:
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
text-align: center !important;
.dropdown {
position: relative;
text-align:center;
}
To center the elements inside your div class="dropdown">, style it with display: block; and text-align: center;
<html>
<head>
<title> Centered Navigation Menu</title>
</head>
<style>
.dropdown {
display: block;
text-align: center;
}
</style>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<div class="dropdown-content">
GALERIE
LAGE
</div>
</div>
</body>
</html>
<html>
<head>
<title> Centered Navigation Menu</title>
<style>
.dropdown {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">ÜBER UNS
</button>
<div class="dropdown-content">
GALERIE
LAGE
</div>
<style>
/* Dropdown Button */
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
text-align: center !important;
}
.dropdown:hover .dropbtn {
background: white;
transition: background ease-in-out 0.5s;
color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
text-align:center;
}
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
}
.dropdown:hover .dropdown-content {
background-color:white;
left: 0;
transition: background ease-in-out 0.5s;;
}
.dropdown:hover .dropdown-content {display: block;}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
</style>
</div>
</body>
</html>
enter image description here
I'm here regarding a question about having a section already loaded in when the page starts, but to still be able to hide it later on. I've hidden it from the start with example of the code below:
section {
display: none;
}
and I re-enable it with :target, like so:
section:target {
display: block;
}
To change the sections and what is shown, I have ids set for letters a through c, and to enable them with the target I use href:
<div id="sidenav" class="sidenav">
About
Works
Contact
</div>
Is it possible to have section a loaded, but still be able to clicked off of, and transitioned into another id / section?
An example of a section within my code.
<section class="fade-in" id="a">
<h1>
Hey, welcome to my site!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
If you need more code / an idea of what I am trying to express, please let me know.
Thank you.
Haven't styled it. Don't mind. 😊
let sidenav = document.querySelector('#sidenav')
let def = document.querySelector('#a')
sidenav.addEventListener('click', () => {
def.classList.remove('default')
})
.default {
display: block !important;
}
section {
display: none;
}
section:target {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sidenav" class="sidenav">
About
Works
Contact
</div>
<section class="fade-in default" id="a">
<h1>
Hey, welcome to my site!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="b">
<h1>
this is another something
</h1>
<p class=p3>Lorem ipsum dolor sit amet.</p>
</section>
<section class="fade-in" id="c">
<h1>
Another sample stuff
</h1>
<p class=p3>Lorem ipsum dolor sit amet😊</p>
</section>
</body>
</html>
Hope this Helps
Comment if any doubt
I hope, This code may solve your problem.
:root {
--headerfont: #e13470;
--mainfont: #ffffff;
--bgcolor: #0c0b10;
--sidenav: #13111b;
--selectioncolor: #1f1b2a;
--selectioncolorbar: #1f1b2a;
--selectorfont: #e13470;
}
body {
background-color: var(--bgcolor);
font-family: "Iosevka", Georgia, sans-serif;
width: calc(100% - 6em);
}
div.content {
padding: 0.3rem 0.9rem;
}
h1 {
color: var(--headerfont);
font-size: 3rem;
font-style: oblique;
font-weight: 400;
padding-top: 4rem;
padding-left: 5rem;
padding-right: 18rem;
}
h2 {
color: var(--headerfont);
font-size: 2rem;
font-style: oblique;
font-weight: 500;
padding-top: 2rem;
padding-left: 5rem;
padding-right: 18rem;
}
h3 {
font-size: 32px;
color: var(--headerfont);
font-weight: 500;
}
p {
font-size: 1.6rem;
position: relative;
font-weight: 100;
color: var(--mainfont);
outline: none;
padding-left: 5rem;
padding-right: 18rem;
line-height: 1.4;
}
.p2 {
font-size: 1.7rem;
font-weight: 200;
position: relative;
font-style: oblique;
color: var(--mainfont);
outline: none;
line-height: 1.4;
padding-left: 5rem;
padding-right: 18rem;
}
.p3 {
font-size: 1.4rem;
font-weight: 200;
position: relative;
font-style: oblique;
color: var(--mainfont);
outline: none;
line-height: 1.4;
padding-left: 5rem;
padding-right: 18rem;
}
.default {
display: block !important;
}
section {
display: none;
}
section:target {
display: block;
}
.medialist {
text-underline-position: under;
outline: none;
}
.fade-in {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
margin: 0;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
width: 100%;
}
ul li {
display: inline-block;
flex-basis: 33%;
}
ul li a {
display: block;
padding: 20px;
background: #000000;
text-align: center;
font-size: 1rem;
color: #ffffff;
text-decoration: none;
}
.fade-in {
height: 300px;
background: #dddddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1rem;
border-bottom: 5px solid #333333;
position: absolute;
width: 100vw;
z-index: 0;
}
#main section.fade-in:first-child {
z-index: 1;
}
section.fade-in:target {
display: flex;
z-index: 2;
justify-content: center;
align-items: center;
}
a {
transition: ease 0.3s, background-color 0.3s;
font-weight: 200;
text-decoration: none;
color: var(--mainfont);
outline: none;
}
a:hover {
color: var(--selectorfont);
outline: none;
background-color: var(--selectioncolor);
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 16rem;
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
overflow: auto;
background-color: var(--sidenav);
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 17rem;
outline: none;
}
/* The navigation menu links */
.sidenav a {
padding: 1.7rem;
text-decoration: none;
text-align: right;
font-size: 2rem;
color: var(--headerfont);
display: block;
transition: width 0.4s;
outline: none;
font-weight: 200;
}
.sidenav a:hover {
background-color: var(--selectioncolorbar);
transition: ease 0.4s;
}
.sidenav a::after {
content: "";
display: block;
width: 0;
height: 1px;
transition: width 0.4s, background-color 0.4s;
position: absolute;
right: 0;
background-color: var(--selectioncolorbar);
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover::after {
background-color: var(--headerfont);
width: 70%;
outline: none;
transition: width 0.4s;
}
#media screen and (max-width: 700px) {
.sidenav {
width: 97.9vw;
height: auto;
position: relative;
padding-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.sidenav a::after {
content: "";
display: block;
width: 0;
height: 1px;
transition: width 0.4s, background-color 0.4s;
position: absolute;
right: 0;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover::after {
background-color: var(--fadinginto);
width: 0%;
}
.sidenav a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidenav a {
text-align: center;
float: none;
overflow-x: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="blah.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="main">
<section class="fade-in" id="a">
<h1>
Hey, welcome to my site A!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="b">
<h1>
Hey, welcome to my site B!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
<section class="fade-in" id="c">
<h1>
Hey, welcome to my site C!
</h1>
<p class=p3>Come take a look to everything!</p>
</section>
</div>
</body>
</html>
This question already has answers here:
How to remove white space left and right side of page?
(10 answers)
Closed 5 years ago.
My Nav bar isn't spanning the whole page (run the snippet code to see). As you can see, there are white borders on the left and right side. Here is the code:
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
</body>
Every single thing that pertains to the nav bar is set on width: 100%. Please help me understand why the nav bar isn't filling the whole width of the page.
The CSS below should prevent the white spacing around your Nav bar
body {
margin: 0;
padding: 0;
}
every tag has some default margin and padding at first you have to clear that margin and padding using *{ padding:0px; margin:0px} that * select all the element and set margin and padding 0.
*{
margin: 0px;
padding:0px;
}
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
The best thing to do is set your CSS like this:
body{ margin: 0; padding: 0; width: 100vw;}
nav{width: 100vw;}
Using the 100vw will set the item's to be 100% of the viewable width. This should eliminate your problem.
I'm currently trying to make a website, and I managed to create a navigation bar. However, there is a weird "extra" space between my navigation bar. It was working fine at first but after I referenced a JQuery. However, I doubt the JQuery is the one that caused the problem as the site looks the same even after I took it out. Here's a screenshot of the problem. I'm trying to get rid of the circled part.
My HTML code:
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="selected" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
Games
<div class="drop-content">
Red Faction: Guerrilla <!-- Contains links to the respective pages -->
Way of the Samurai 3
Singularity
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
<li>Feedback</li> <!--Feedback form-->
And here's the stylesheet:
#nav nav{ /* Navigation bar*/
padding-top: 5%;
margin-bottom: 5% }
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 0;
display: inline-block }
#nav li {
float: left;
width: 14% }
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 15%;
padding-right: 15%;
text-decoration: none }
.selected {
background-color: #6CCC0A;
padding-right: 25% }
li a:hover, .drop:hover .dropbtn {
background-color: #BFA810 }
a {
padding-top: 1em;
padding-bottom: 1em }
li.drop {
display: inline-block }
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 14%;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100 }
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left }
.drop-content a:hover {
background-color: #02BBC4 }
.drop:hover .drop-content {
display: block;
border: 1px solid black;
position: absolute } /*End of navigation*/
* { /* index style */
box-sizing:border-box
}
body {
font-family: Verdana,sans-serif;
margin:0
}
.slideshow-fade {
display:none
}
/* Slideshow container */
.slideshow {
max-width: 100%;
position: relative;
margin: auto;
}
.slideshow img {
opacity: 0.7
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 1em;
margin-top: -1em;
color: #FFFFFF;
font-weight: bold;
font-size: 1.5em;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #000000;
font-size: 1.3em;
padding: 1% 2%;
position: absolute;
bottom: 2%;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.number {
color: #000000;
font-size: 1em;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 1em;
width: 4%;
margin: 0 2px;
background-color: #bbbbbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width : 720px ){
.prev, .next,.text {font-size: 11px}
}
.slideshow-fade a {
color: #FFFFFF
}
.slideshow-fade a:visited {
color: #5115D0
} /*End of style for index*/
footer { /*Footer*/
background: #000000;
width: 100%;
height: 5%;
position: relative;
bottom: 0;
left: 0;
padding-top: 2%;
overflow: hidden;
}
footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
padding-bottom: 2%;
} /*End of footer*/
Any help will be much appreciated. Thank you.
Here is the jsfiddle file to make it more convenient to see the problem. https://jsfiddle.net/8xutoea5/
Edit: Added more CSS codes.
Edit: I solved the problem. Thanks everyone for taking the time to solve this problem.
It appears to be a margin somewhere else in your CSS, not provided here, that is causing the issue. You could try setting margin-bottom:0; a few places to see if that solves it.
#nav nav ul li {
margin-bottom: 0;
padding-bottom: 0;
}
#nav nav ul li a {
margin-bottom: 0;
}
Or provide the rest of your style sheet.
It's most likely because you have your ul as inline-block, that will cause some space after elements. Also you have float on your li without a clearfix on nav.
You can solve this in various ways, here is one where you can use display: flex; and remove the float: left; on li. This is a pretty solid base you can build on with changing the justify-content property. You can find a awesome guide to flexbox over at css-tricks.com
UPDATE
I made some updates to the fiddle to solve the problem. Please note the code on top, also I made some other changes. Write if there is something unclear
* {
box-sizing: border-box;
}
jsfiddle
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 0;
display: flex;
justify-content: space-between;
}
#nav li {
width: 14%;
}
It's caused by the section "External Store", it's too long and it wraps. You can make it shorter or force a "no-wrap".
With the css property white-space with the value nowrap.
You have no classes on your internal tags so I would suggest add a class to the a tags and add the rule to it.
a.listLink{
white-space: nowrap;
}
Or you can just add a style attribute to that specific tag but I don't find that solution cool enough.