This is what I am trying to code. I am having trouble with positioning elements on the page. To get an idea of where some of what I gave created in the HTML is, I am trying to put a border around a div. This div (id="container") in the end will actually need a border. However, I cannot get one to show up at all.
Here is my full HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>The Pantry</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li>HOME</li>
<li>MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li>CONTACT</li>
<li id="last">ABOUT</li>
</ul>
</div>
</div><!--end header-->
<div id="container">
<div id="slider">
<figure>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
<img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Lasagne al Forno"/>
<img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Svickova"/>
<img src="Images/pork shoulder.jpg" width="600" height="400" alt="Pork Shoulder with Dumplings"/>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
</figure>
</div><!--end slider-->
<div id="menu ad">
</div><!--end menu ad-->
<div id="hours">
</div><!--end hours-->
</div><!--end container-->
<footer>
</footer>
And my CSS
#charset "UTF-8";
body {
background: #f8f8f1;
line-height: 1.5;
}
/*header*/
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
div ul li {
display: inline-block;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
vertical-align: middle;
}
.nav ul li {
margin-right: 70px
}
.nav ul li:nth-child(5) {
margin: 0;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
/*End Header*/
/*Container*/
div.container {
margin: auto 0;
position: relative;
width: 960px;
heigth: 438px;
border: 10px solid red;
}
/*slider*/
#-webkit-keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider { position: relative; overflow: hidden; width: 80%; max-width: 600px; height: auto; max-height: 400px;
margin: 0 auto}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slidy infinite;
margin: 0; top: 0; left: 0;
-webkit-animation: 20s slidy ease-in-out infinite;
animation: 20s slidy ease-in-out infinite;
}
Please visit the site here to see what is happening.
Thanks for your help.
Your selector:
div.container
Should be:
div#container
Related
I have some issues, when I put some paragraph or anything like that... the navbar covered up. can someone help me what actually wrong with my code? thanks...
this is my html Code
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
</body>
</html>
this my CSS code.
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover{
background-color: #009cff;
}
.wrap{
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox{
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px){
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu{
display: none;
}
.tblmenubox{
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
I have been try to add some padding top to 65px like another but, i doesn't work. i hope i can found the solution, thanks guys...
The problem is that position: fixed, just like position: absolute, pulls the element out of the document flow, so the area it takes up no longer occupies any space. You can see this in the example below, where the first paragraph is occluded by the <nav />:
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div>
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
</div>
</body>
</html>
If the position: fixed approach is your desired approach, you could put a wrapper around all content that follows it, and give it a margin-top that is the same height of the <nav /> (if this is a known, fixed quantity):
$(".togel.tblmenu").click(function() {
$(".menu").toggleClass("sh");
});
body {
margin: 0;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<p>ONE: The quick brown fox jumped over the lazy dog.</p>
<p>TWO: Mary's violet eyes made John stay up nights proposing.</p>
<p>THREE: Roy G Biv</p>
<p>FOUR: Please Excuse My Dear Aunt Sally</p>
<p>FIVE</p>
<p>SIX</p>
<p>SEVEN</p>
<p>EIGHT</p>
<p>NINE</p>
<p>TEN</p>
<p>ELEVEN</p>
<p>TWELVE</p>
<p>FOURTEEN (FOR LUCK)</p>
</div>
</body>
</html>
As you can see, the content still scrolls fine behind the <nav />. There are other ways to achieve this, using flex or grid, but for the position: fixed approach this will work.
I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...
Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>
This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Trying to make logo/image become larger when cursor on it - however it enlarges when your are on areas where the image is not even there - https://gyazo.com/a505f013f6f18a16c13514458cf95f12
I watched a youtube tutorial to do the enlarging - im not sure if it is the image that for some reason is too wide but i have specified the width? The dimensions of the logo/image as per the file is 1024x1024
HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img{
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
It happen because your .logo div is taking a width at that place of the screen.
You can read about How to make a div not larger than its contents.
The solution I used was to define max-width to the logo div and that's it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
max-width: 300px;
}
.logo img {
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img {
transform: scale(1.35)
}
.navigation-links {
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a {
color: #fff;
text-decoration: none;
}
.gift img {
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main {
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
Note: in order to spot problems like this, just inspect the page's elements and check their sizes on the screen. Good Luck!
This is because you didn't give your Image hover, but the Parent div.
you need to change it like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{ /* <<<<--- You need to change here */
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
The blue and red background you see in the images is a parallax scroll background. In front of that, I would like to add text with a white background. I need the white background to have around a 150px margin on either side, so that viewers still get to take a look at the parallax background. I have tried a lot of stuff and none has worked. Any ideas? (What it looks like now) (A crude drawing of what I want it to look like)
body {
margin: 0;
background: #FFF;
font-family: 'Alata', sans-serif;
font-size: 24px;
font-weight: 300;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #111;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
float: left;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 50px;
position: relative;
}
nav a {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #FFF;
font-weight: 600;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms
}
nav a:hover::before {
width: 100%
}
.parallax {
width: 100%; height: 100%;
position: relative; top: 0; left: 0;
background-image: url('parallax.jpg');
}
.main {
width: 50%; height: 100%;
position: relative; top: 0; left: 50%;
transform: translate(-50%, 0%);
background-color: RGBA(255, 255, 255, 1);
}
h1 {
width: 700px; height: 100%;
margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;
padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;
text-align: center;
margin: 0px auto !important;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Alata&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<header>
<div class="container">
<img src="logo.jpg" alt="logo" style="width:175px;height:140px;" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Shop</li>
<li>My Story</li>
<li>Other Info</li>
<li>Terms Of Service</li>
</ul>
</nav>
</div>
</header>
</head>
<body>
<style>
.parallax {
background-image: url("parallax.jpg");
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div class="main">
<h1>
PCs Built By A Fellow Gamer
</h1>
</div>
<div class="parallax"></div>
</body>
</html>
You don't need to use a div for the parrelax, just add the class to body and then make the following changes to .main
HTML
<body class="parallax">
CSS
height: 100%;
width:50%; /** Width of your white body **/
margin:0 auto;
background-color: RGBA(255, 255, 255, 1);
You can dictate the sizes of your margin with the width rule.
I have centered an image and made it a specific height and width, but when the browser dimension size is about 500px (in width), I would like the image to start resizing itself to fit the screen so scrolling is not necessary. How do I do this?
I will include all my code for the entire webpage in case this makes a difference.
#charset "utf-8";
/* CSS Document */
body {
background-color: white;
padding: 0px;
margin: 0px;
}
#menu {
font-size: 15px;
font-family: "Gadugi";
color: white;
}
span {
color: #989797;
}
#nav {
position: absolute;
top: 100px;
height: 45px;
width: 100%;
background-color: black;
z-index: -100;
text-align: center;
}
#menu ul {
height: auto;
padding: 8px 0px;
padding-top: 13px;
margin: 0px;
}
#menu li {
/*padding between words */
display: inline;
padding: 15px;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 33em;
padding-top: 2px;
z-index: -100;
padding-left: 4px;
}
#home {
color: #26C6E7;
}
.container {
height: 500px;
width: 850px;
overflow: hidden;
position: absolute;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.photo {
position: absolute;
animation: round 16s infinite;
opacity: 0;
height: 500px;
width: 850px;
min-width: 500px;
}
#orange {
background-image: url(images/pacman.jpg);
width: 100%;
height: 100%;
padding-top: 80px;
position: absolute;
z-index: -99999999999999999999999999;
background-size: cover;
background-repeat: repeat-y;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
img:nth-child(4) {
animation-delay: 0s;
}
img:nth-child(3) {
animation-delay: 4s;
}
img:nth-child(2) {
animation-delay: 8s;
}
img:nth-child(1) {
animation-delay: 12s;
}
a {
text-decoration: none;
color: white;
font-weight: bold;
z-index: 100;
}
a:hover {
color: #26C6E7;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home - CooperTimewell.com</title>
<meta name="description" content="This is where the description is suppose to be." />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="images/anime.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<div id="nav">
<div id="menu">
<ul>
<li id="home"><span>HOME</span>
</li>
<li>THE COOPER TIMES
</li>
<li>ABOUT ME
</li>
<li>CONTACT
</li>
<li>GAMES
</li>
</ul>
</div>
</div>
<a href="http://www.coopertimewell.com">
<img id="logo" src="images/logo.png" />
</a>
<div id="orange"></div>
<div class="container">
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
<img class='photo' src="images/slide1test.png" alt="" />
</div>
</body>
</html>
You can do this with CSS media queries
#media (max-width: 500px) {
.container, .photo {
width: 100%;
}
}