I'm wondering why my id="subnavigation" won't center vertical, I was using top: xxpx; but since most monitors are different, I have to get it in the vertical center for every monitor.
I tried using:
justify-content: center
align-items: center
line-height: normal
vertical align-middle & also top: 50%,
but it won't move into the right spot, any recommendations ?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>FootDiver!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light"
rel="stylesheet">
</head>
<body>
<header>
<nav id="mainnavigation">
<ul>
<li>Startseite</li>
<li>Über uns</li>
<li>Join Us!
<ul>
<li>LogIn</li>
<li>Registrierung</li>
</ul>
</li>
<li>Forum</li>
<li>FAQ</li>
<li>Newsletter</li>
</ul>
</nav>
</header>
<div id="subnavigation">
<nav id="sub">
<ul>
<li>Olympia</li>
<li>Beef&Beats</li>
<li>Gantero</li>
<li>La Roma</li>
<li>Wok Paradis</li>
</ul>
</nav>
</div>
<footer>
<nav id="foot">
<ul>
<li>Impressum</li>
<li>Datenschutz</li>
<li>AGB</li>
<li>Kontakt</li>
<li>Social Media</li>
<li>Intern</li>
</ul>
</nav>
</footer>
<div id="main">
<h1>Herzlich Wilkommen!</h1>
</div>
</body>
</html>
CSS: (from line 95 to 116)
body, html {
background: #F4A460;
margin: 0;
padding: 0;
font-size: 62.5%;
}
#media screen and (min-width: 1200px) {
html {
font-size: 63%;
}
}
header {
background: #8A4B08;
position: fixed;
top: 0;
width: 100%;
text-align: center;
transition: 200ms all;
height: 7rem;
}
header nav#normal {
color: #000000;
display: inline-block;
}
header nav#normal ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
header nav#normal ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
header nav#normal ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
}
header nav#normal ul li:hover > a {
background: #FFD39B;
}
header nav#normal ul li ul {
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transition: 300ms all;
max-height: 0;
}
header nav#normal ul li:hover > ul {
max-height: 900px;
}
header nav#normal ul li ul li {
border-bottom: 1px solid #8A4B08;
}
div#subnavigation {
background: #8A4B08;
position: fixed;
top: 0;
width: 166px;
text-align: center;
transition: 200ms all;
height: 1200px;
}
div#subnavigation nav#sub {
display: inline-block;
}
div#subnavigation nav#sub ul {
margin: auto;
padding: 0;
float: left;
list-style: none;
position: relative;
top: 375px;
transition: all 300ms;
}
div#subnavigation nav#sub ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
div#subnavigation nav#sub ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
border-bottom: 1px solid #8A4B08;
vertical-align: middle;
}
div#subnavigation nav#sub ul li:hover > a {
background: #FFD39B;
}
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 7rem;
background-color: #8A4B08;
text-align: center;
}
footer nav#foot {
color: #000000;
display: inline-block;
}
footer nav#foot ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
footer nav#foot ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
position: relative;
transition: all 300ms;
}
footer nav#foot ul li a {
display: inline-block;
padding: 2.17rem;
float: left;
min-width: 12rem;
text-align: center;
font-size: 2rem;
color: #000000;
margin: 0 1px 0 0;
text-decoration: none;
background: #deb887;
font-weight: 300;
transition: all 300ms;
font-family: 'Source Sans Pro', sans-serif;
}
footer nav#foot ul li:hover > a {
background: #FFD39B;
}
div#main {
text-align: left;
margin-left: 25rem;
margin-top: 15rem;
}
div#main h1 {
font-size: 6rem;
font-family: 'Shadows Into Light', cursive;
}
Try adding
display: flex;
align-items: center;
to the parent of the element you want to center vertically. justify-content: center only works when you use flex
Example
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I want to make a responsive navigation on my website.
i didn't use a grid
I tried
#media screen and (max-width: 600px) {
.menu{
height: 100%;
width: 15px;
float: top;
}}
but that don't work
I want it to get on the top of my website
So some suggestions:
Send the html code or jsut some of it.
You can also try adding margin: 0; to the body:
body{
margin: 0;
}
You will also need to add a background - color:
.menu {
background-color: red;
}
And more stuff could be added but you can check this:
https://www.w3schools.com/howto/howto_css_style_header.asp
This helps a lot
You can use this codepen which I had made yesterday or may be before that, I don't remember :-
https://codepen.io/CodingPencil/pen/abEWzXp
Or just copy my code here :-
HTML -
<nav>
<div>
Something
</div>
<div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu" id="menu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
CSS -
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--nav-bg: #03000e;
--main-clr: dodgerblue;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
position: fixed;
width: 100%;
background: #03000e;
}
nav .logo {
color: #fff;
text-decoration-color: var(--main-clr);
font-size: 22px;
font-family: "Playfair Display", serif;
font-weight: 100;
}
nav ul {
--padding: 20px;
--font-size: 17px;
list-style: none;
display: flex;
align-items: center;
font-size: var(--font-size);
overflow-y: hidden;
transition: 1s ease;
}
nav ul li {
padding: var(--padding);
}
nav ul li a {
color: #fff;
text-decoration: none;
position: relative;
}
nav ul li a::after {
content: "";
width: 0%;
height: 2.5px;
border-radius: 99px;
background: var(--main-clr);
position: absolute;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
nav .menu {
width: 22px;
height: 16px;
cursor: pointer;
display: none;
align-items: center;
flex-direction: column;
justify-content: space-between;
position: relative;
margin: 20px;
}
nav .menu span {
width: 100%;
height: 2px;
border-radius: 99px;
background: #fff;
transition: 0.3s ease;
transform-origin: left;
}
nav .menu.active span {
background: var(--main-clr);
}
nav .menu.active span:nth-child(1) {
transform: rotate(40deg);
}
nav .menu span:nth-child(3) {
transform-origin: left;
}
nav .menu.active span:nth-child(3) {
transform: rotate(-40deg);
}
nav .menu.active span:nth-child(2) {
transform: scale(0);
}
#media (max-width: 910px) {
nav .menu {
display: flex;
}
nav ul {
--height: 0px;
flex-direction: column;
background: var(--nav-bg);
position: absolute;
width: 100%;
left: 0;
top: 56px;
height: var(--height);
transition: 1s ease;
}
nav ul.active {
--height: calc(
(((var(--padding) * 2) + (var(--font-size) * 1.5))) * var(--childenNumber)
);
transition: 1s ease;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
width: 100%;
text-transform: capitalize;
}
}
And the JAVASCRIPT -
const navigation = document.getElementById("nav");
const menu = document.getElementById("menu");
menu.addEventListener("click", () => {
navigation.style.setProperty("--childenNumber", navigation.children.length);
navigation.classList.toggle("active");
menu.classList.toggle("active");
});
There are many references available on the web you can take references from w3schools.com, bootstrap, codepen etc.
try below one,
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
References:
https://getbootstrap.com/docs/5.0/components/navbar/
https://www.w3schools.com/css/css_navbar.asp
Note: float:top is not working
I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D
Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">
body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
So I'm developing my first ever page after I've studied for about 3-4 months about HTML and CSS.
The problem is that the footer is sticked to the slideshow. Can't really seem to figure out how to stick it to the bottom of the page.
Also, if you find any other errors or you have any other tips for me, please mention them.
index.html
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>x</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<footer class="site-footer">
x
<img src="img/location_1.png" />
</footer>
</div>
</body>
</html>
sshow.css
.mySlides {
display: none;
}
.slideshow-container {
clear: both;
max-width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
.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
}
}
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
css.css
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#container:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
.footer {
clear: both;
margin-top: 4000px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #F28A00;
text-align: center;
}
I've observed that if i delete position:relative from the sshow.css, it works, but the buttons from the slideshow obviously disappear.
Also tried with this css:
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
clear:both;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
Thanks a lot.
try closing div before the footer. the footer is inside the slide show, but i did'nt tested the code.
Try this:
CSS:
.footer {
border-style: groove;
border-width: 0px;
border-top-width: 1px;
border-top-color: white;
background-color: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 25px;
}
It will always have this footer at the bottom, black background and small width above. Height is 25px. You can style this footer in the CSS. Also note that the position is fixed.
EDIT:
I didnt test your code, make sure div's are closed properly.
Use position: fixed for the footer element.