I am making a website for my friend, and I am currently having two problems that I can't seem to solve:
I can't seem to get rid of the white space that exists between the main container and the footer. There is a small strip of white that runs from the bottom of the background image to the footer.
When the browser window is shrunk (especially to half the width of the screen) white space appears after the footer.
Can anyone help me please? Thanks!
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 6.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
line-height: 37px !important;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video_container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
}
#main_container {
background-image: url("../images/background.jpg");
background-size: cover;
margin: 0px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Hyperdog Productions</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home">
<img id="logo" src="images/logo.jpg" alt="logo">
</a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a>
</li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a>
</li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a>
</li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a>
</li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a>
</li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main_container">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016. All Rights Reserved.</p>
</footer>
</body>
</html>
It's probably the default top and bottom margin on the <p> in the footer, reset that and see.
.copyright {
margin: 0;
}
Related
Hello and thank you for every answer.
How can I remove that clickable space that always shows to me as extra to my navbar?
Thank you!
https://codepen.io/danctes/pen/YzZWGZO
* {
padding: 0;
margin: 0;
}
body {
background-color: antiquewhite;
}
nav {
background-image: linear-gradient(to right, darkgreen, limegreen);
border-top: 5px solid darkgreen;
margin-top: 30px;
height: 50px;
position: relative;
width: 100vw;
}
a {
text-decoration: none;
color: AntiqueWhite;
font-family: arial;
font-weight: bold;
}
nav .danctes {
position: absolute;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
}
ul {
float: right;
list-style-type: none;
position: absolute;
right: 10%;
top: 50%;
transform: translate(-50%, -50%);
}
li {
display: inline-block;
}
.danctes {
font-size: 1.75em;
}
ul a {
text-transform: uppercase;
margin: 0 5px;
font-size: 1.25em;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<title>
My first navbar
</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<nav>
<div class="danctes">
<a href="#">danctes
</a>
</div>
<ul>
<li><a href="https://www.digisport.ro/">Home</li>
<li><a href="https://www.reddit.com/">Reddit</li>
<li><a href="https://9gag.com/">9gag</li>
<li><a href="https://www.facebook.com/">Facebook</li>
<li><a href="https://www.instagram.com/">Instagram</li>
</ul>
</nav>
</body>
</html>
You forgot to close the tag.
<ul>
<li>Home</li> <!-- </a> missing in your code -->
<li>Reddit</li>
<li>9gag</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
For more information:
https://www.w3schools.com/tags/tag_a.asp
Here's how my navbar looks like:
<div class="menu" id="menu-toggle">
Menu
</div>
<nav class="manu-nav" id="menu-nav">
<img src="https://www.stickpng.com/assets/images/58b061138a4b5bbbc8492951.png" height="45" />
<a class="nav-a" href="#">Home</a>
<a class="nav-a" href="#">Cats</a>
<a class="nav-a" href="#">Litters</a>
<a class="nav-a" href="#">Toys</a>
<a class="nav-a" href="#">About us</a>
<a class="nav-a" href="#">Contact us</a>
</nav>
I am trying to move the image away from the home button, but if I use padding or margin, the whole thing is changing because the navbar has got justify-content: center; style, Is there a way to keep the navabar option button centered and move just the logo?
jsfiddle
Can add class for image '.site_left_img' then add css.
.site_left_img {
position: absolute;
left: 3%;
top: 0;
}
try this one
* {
margin: 0;
padding: 0;
}
.logo {
width: 10%;
display:inline-block;
}
body {
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display:inline-block;
}
nav ul li a {
text-decoration: none;
float: left;
text-align: center;
font-family: 'Gloria Hallelujah', cursive;
color: #E6E6E6;
}
nav {
overflow: hidden;
background-color: #214569;
position: fixed;
top: 0;
width: 100%;
}
nav ul li:hover {
background-color: #8C9DBF;
}
/*
nav p {
top: 0;
float: right;
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
}
*/
header {
background-color: #214569;
opacity:0.7;
}
.socialMedia {
width: 10%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 9em;
color: #7D0CE8;
text-shadow: 4px 4px 4px #fff;
opacity: .8;
position: relative;
text-align: center;
top: 30%;
}
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
#thirdBackground {
background: url() no-repeat;
background-size: cover;
height: 1000px;
width: auto;
}
<html>
<head>
<title>Restaurant HAYQ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Aurimas Ransys">
<meta name="keywords" content="Armenian Food, Food">
<meta name="description" content="Armenian Food Business">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
</head>
<body>
<section id="navbackground">
<header>
<nav>
<ul>
<img src="img/hayq.png" alt ="logo" class="logo"/>
<li>Home</li>
<li>Drivers</li>
<li>Bolids</li>
<li>about us</li>
<li>Contact us</li>
<img src="img/media.png" alt="social media" class="socialMedia">
</ul>
<!-- Just wanted to add social media on nav bar
<p>Follow us on<br> social media</p>
-->
</nav>
</header>
</section>
<section id="firstdBackground">
<h1>HAYQ</h1>
<h2>Armenian Specials</h2>
</section>
<section id="secondBackground">
nothing here
</section>
</body>
</html>
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
I'm a complete beginner in programming. Currently working on a Product landing page. I embedded a video from youtube using an iframe and made my navbar fixed at the top. While scrolling down the video is sliding over the navbar. What should I do to make the video scroll down the navbar like the rest of the page content?
Here is the code of HTML file:
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>
CSS code of navbar:
#header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
CSS code for iframe:
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
}
Thanks in advance
z-index on Header And Video
You have missing code <header> in your above code. Also, there is no ID for the header as it's not there, so I've added the missing code and added the header style as the CSS HTML element header.
I've added a z-index of 0 to .videoWrapper iframe and a z-index of 1 to header I also added a light grey background to your header so you can see the result better.
What is a z-index?
The z-index is how you determine the layer order in the box model of HTML. The higher the number, the higher on top it is.
Hope this helps and good luck with your project :)
<style>
header {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
z-index:1;
background:#ddd;
}
#nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #05386B;
color: #EDF5E1;
}
.logo {
margin-left: 25px;
}
.logo #header-img {
float: left;
width: 50px;
height: 50px;
}
.logo h1 {
font-family: 'Pacifico', cursive;
font-size: 30px;
float: right;
position: relative;
top: 5px;
left: 10px;
}
.menu {
display: flex;
align-items: center;
}
.menu ul {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.menu li {
padding: 15px;
margin-right: 30px;
font-size: 25px;
}
.videoWrapper {
position: relative;
padding-bottom: 35%;
height: 0;
padding-top: 20px;
overflow: hidden;
}
.videoWrapper iframe {
border: 5px solid #05386B;
position: absolute;
top: 5em;
bottom: 2em;
left: 0;
right: 0;
margin: auto;
z-index:0;
}
</style>
<header>
<div class="logo">
<img id="header-img" src="http://www.logodust.com/img/free/logo2.png" alt="Company Logo" title="comapany logo">
<h1>
Pilot - Capless Since 1984
</h1>
</div>
<div class="menu">
<ul>
<li>
<a class="nav-link" href="#container">Home</a>
</li>
<li>
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li>
<a class="nav-link" href="#products">Products</a>
</li>
<li>
<a class="nav-link" href="#contact-info">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="videoWrapper">
<iframe id="video" width="600" height="340" src="https://www.youtube.com/embed/l__LJ8NF6eQ" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen ></iframe>
</section>
</div>
In your CSS, add z-index property. Here is a reference for this proprety.
#header {
position: fixed;
top: 0;
left: 0;
z-index: 99;
margin: auto;
width: 100%;
}
If you take the code and shrink your browser window you'll notice that the list items overlap the site title in the navigation bar which is annoying. Does anybody know how to fix this please?
HTML Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hyperdog Productions</title>
<link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="navigation_bar">
<p>Hyperdog Productions</p>
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAV-->
<main id="container">
<div id="container_wrapper">
<img class="container_background" src="images/bg.png" alt="Background" />
</div>
<div id="footer">
</div>
</main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->
</body>
</html>
CSS Code:
#font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}
#font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Margin: 0; */
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 1500px;
overflow-x: none;
font-size: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
height: 1500px;
}
#navigation_bar {
width: 100%;
height: 90px;
background-color: #1d1d1d;
}
main {
height: 1300px;
}
#container_wrapper {
width: 100%;
height: 865px;
background-image: url("../images/bg.png");
background-repeat: repeat;
}
#footer {
width: 100%;
height: 435px;
background-color: blue;
}
#copyright {
width: 100%;
height: 110px;
background-color: black;
}
.nav_link:link {
margin: 0;
padding: 10px;
text-decoration: none;
text-align: center;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
color: #ffffff;
}
.nav_link:hover {
color: grey;
}
.navbar_list {
float: right;
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
}
.navbar_list li {
float: left;
list-style-type: none;
list-style: none;
padding: 9px 12px;
margin: 0;
font-size: 10px;
display: inline;
}
.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
color: #AF7817; /* #2C3539 */
margin: 0;
padding: 9px 12px;
float: left;
left: 20%;
position: absolute;
text-transform: uppercase;
letter-spacing: 10px;
top: 25px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
}
Thanks!
Add the following at the bottom of your CSS to drop the menu links lower down on the page and to center your title on the screen for smaller screen sizes. This is how I'd organize the page.
#media (max-width: 1750px) {
.navbar_list {
position: relative;
display: inline-block;
float: inherit;
right: inherit;
padding-left: 0px;
}
.logo {
position: relative;
left: inherit;
float: inherit;
margin-left: 15px;
}
}
#navigation_bar {
text-align: center;
}
It will look like this on smaller screens:
If you want to make them disappear
#media (max-width: 1530px) {
.navbar_list {
display: none;
}
}
Something like this WITH bootstrap.css
<div class="container">
<div id="navigation_bar" class="row">
<div class="col-md-8">
<p>Hyperdog Productions</p>
</div>
<div class="col-md-4">
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAV-->
<main id="container">
<div id="container_wrapper">
<img class="container_background" src="images/bg.png" alt="Background" />
</div>
<div id="footer">
</div>
</main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->