I've been struggling with this page for days and I can't figure out where I went wrong. My eyes hurt and I need some help. I've been able to use sticky footer before but for some reason this page is being quite temperamental.
The page: http://isolatedhowl.com/workshop/buckstop/
The html: http://plnkr.co/edit/kpMf8txpBSqEGOwXxE0s
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/buckstop.css" media="screen"/>
<title>Buck Stop</title>
<meta name="description" content="Buck Stop is a classic barbecue and small plate saloon." />
<meta charset="UTF-8"/>
</head>
<body>
<div id="wrapper">
<article id="maininfo">
<header>
<div id="coverimg"><img src="images/buckstop_interior.jpg" alt="Buck Stop Interior" width="560" height="315"/></div>
<figure id="logo"><img src="buckstop_logo.png" alt="Buck Stop Logo"/></figure>
</header>
<nav id="mainnav">
<ul>
<li>Kitchen</li>
<li>Bar</li>
<li>Events</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<div id="maincontent">
<p class="center quote">"Food is like love. It should be entered into with abandon or not at all."</p>
<p class="center">- Harriet Van Horne</p>
</div>
</article>
</div>
<article id="storyinfo" class="infolinks">
<header><h2>Our Story</h2></header>
<p>Find out more about who we are, what makes us unique, and what we're all about...</p>
<p class="right">Read More</p>
</article>
<article id="menuinfo" class="infolinks">
<header><h2>Our Menu</h2></header>
<p>All of our food is prepared in house and sourced locally. Great food, great health...</p>
<p class="right">Read More</p>
</article>
<div id="baroverlay"></div>
</body>
</html>
The CSS: http://plnkr.co/edit/arJTFnQpEmJH7WZtFt72
body {
background-color: #000;
background-image: url('buckstop_background.jpg');
background-attachment: fixed;
background-size: 100%;
color: #FFF;
font-size: 18px;
}
html, body {
height: 100%;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
#wrapper {
width: 600px;
min-height: 100%;
}
#maininfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
overflow: auto;
position: fixed;
top: 0;
left: 50px;
width: 560px;
padding: 20px 20px 170px 20px;
}
#coverimg {
width: 560px;
margin-right: auto;
margin-left: auto;
}
#logo {
position: fixed;
top: 260px;
left: 450px;
z-index: 1;
}
#baroverlay {
width: 100%;
height: 80px;
position: fixed;
top: 248px;
background-color: rgba(66, 17, 24, 0.8);
}
#mainnav {
color: #FFF;
font-size: 24px;
text-align: center;
width: 560px;
word-spacing: 40px;
margin: 10px 0;
}
#maincontent {
margin: 20px 0;
}
#mainnav li {
display: inline;
width: 20px;
text-align: center;
}
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
}
#mainnav a:hover {
color: #892332; /* Burgundy */
text-decoration: none;
}
#storyinfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
font-size: 16px;
width: 255px;
position: relative;
margin-top: -170px;
left: 50px;
height: 170px;
clear: both;
padding: 20px;
}
.infolinks a:link, #storyinfo a:visited {
color: #892332; /* Burgundy */
text-decoration: none;
}
.infolinks a:hover {
color: #892332; /* Burgundy */
text-decoration: none;
font-style: italic;
}
#menuinfo {
background-color: rgba(0, 0, 0, 0.85);
color: #FFF;
font-size: 16px;
width: 255px;
position: relative;
margin-top: -170px;
bottom: 0;
left: 355px;
height: 170px;
clear: both;
padding: 20px;
}
.quote {
color: #FFF;
font-size: 30px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
just change this:
#baroverlay {
width: 100%;
height: 80px;
position: fixed;
top: 248px;
background-color: rgba(66, 17, 24, 0.8);
}
with this:
#baroverlay {
width: 100%;
height: 80px;
position: fixed;
bottom:0;
background-color: rgba(66, 17, 24, 0.8);
}
here's a plunker.
By the way you can create a plunker with multiple files.
Hope this help.
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
I am working on a new site at the moment, and I'm wondering how I would go about making the sidebar responsive, meaning that:
it moves from the left to the top (not sticky);
the links turn into a hamburger icon;
when the hamburger icon is tapped, a full-screen menu appears (transparent colour), withthe available links centered on the screen, and an "X" to dismiss the menu in the top right;
both the hamburger icon and the logo are centered vertically in the nav, with the logo aligned to the left and the hamburger icon to the right;
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<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>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
</body>
</html>
And here's my CSS:
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p, ul, li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {float: left;}
div#content {margin-left: 0; padding: 5px;}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
I have tried everything that I can think of, and just can't get it to work. Any suggestions would be hugely appreciated.
Yours, Antiquis
This is a very basic example of a toggleable menu, but you need at least a little bit of javascript to toggle an .open class on your navigation container. The .open adds display: block, while by default in the mobile css it's display:none so the menu is hidden at first.
Or if you want to animate the appearance of the menu you'd be toggling the visibility and height instead for example - there are different implementations for this, I suggest inspecting other website's menu codes at a small viewport size to see how they've implemented their mobile navs for ideas.
I have not put these styles inside media queries in my example so you can clearly see it in action, and not have to resize the window.
function navToggle() {
document.getElementById('nav-links').classList.toggle("open");
}
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
font-color: #1a1a1a;
}
h1 {
font-size: 24pt;
font-color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 120px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
/*for purposes of demonstration, normally you stick this code in a media query, hide the hamburger toggle on desktop! */
#nav-links {
display: none;
}
#nav-links.open {
display: block;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#nav a {
text-align: center;
float: none;
}
}
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div class="hamburger-cont"><button id="hamburger-toggle" onclick="navToggle()">☰</button></div>
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
#import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
* {
box-sizing: border-box;
font-family: "Share Tech", sans-serif;
}
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #ed15ac;
}
a:hover {
font-weight: bold;
color: #ed1c51;
}
#content {
margin-top: 50px;
margin-left: 310px;
margin-right: 10px;
padding-bottom: 2.5rem;
}
p,
ul,
li {
font-size: 16pt;
}
#nav {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 250px;
height: 100%;
background-color: #dbdbdb;
align-items: center;
z-index: 10;
}
.nav-links {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.nav-links li {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.navigation a:hover,
.navigation a:focus {
color: #f1f1f1;
}
#hamburger {
display: none;
}
.navigation .closebtn {
display: none;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-width: 700px) {
#nav {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
float: right;
}
#nav a {
float: left;
}
div#content {
margin-left: 0;
padding: 5px;
}
}
#media screen and (max-width: 400px) {
#hamburger {
display: block;
}
.navigation {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
#nav a {
text-align: center;
float: none;
}
.navigation a {
font-size: 20px
}
.navigation .closebtn {
display: block;
font-size: 40px;
top: 15px;
right: 35px;
}
li {
padding: 10px;
}
#nav-links {
text-align: center;
margin-top: 40%;
}
#header {
position: relative;
top: 167px;
left: -303px;
}
}
nav img {
display: block;
margin-bottom: 35px;
padding-top: 20%;
max-width: 150px;
}
#nav-links {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 16pt;
}
#nav-links:not(:last-child) {
margin-bottom: 50px;
}
p {
font-size: 16pt;
color: #1a1a1a;
}
h1 {
font-size: 24pt;
color: #000;
}
input {
background-color: #ed15ac;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
input:hover {
background-color: #ed1c51;
color: white;
cursor: pointer;
}
#header {
position: relative;
}
#header-title {
position: absolute;
bottom: 5px;
left: 310px;
color: white;
opacity: 60%;
font-size: 95px;
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
footer {
padding-top: 20px;
bottom: 0;
width: 100%;
height: 2.5rem;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<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>Maestoso Digital</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
</head>
<body>
<nav id="nav">
<img id="logo" src="img/logo.png" alt="Maestoso Digital logo">
<div id="myNav" class="navigation">
×
<ul id="nav-links">
<li id="active">Home</li>
<li>Hosting</li>
<li>Cloud Deployment</li>
<li>System Administration</li>
<li>Contact</li>
</ul>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="hamburger">☰</span>
<form action="customers.html">
<input id="customers-button" type="submit" value="Existing Customers" />
</form>
</nav>
<main>
<div id="header">
<img id="header-img" src="img/header.png" alt="Picture of data centre">
<h1 id="header-title">Welcome</h1>
</div>
<div id="content">
<h1>We are an internet service provider for the modern digital age!</h1>
<p>Maestoso Digital is an internet service provider offering bespoke, enterprise-grade hosting solutions and system administration services for all, but especially for musicians and musical organisations. Our numerous datacenters around the globe offer
ultra-fast performance for whatever your needs may be, and our Network Operations Centre monitor your services 24/7 to ensure that they are always online.</p>
<footer>
<p>© Maestoso Digital. All rights reserved.</p>
</footer>
</div>
</main>
<script>
function openNav() {
document.getElementById("myNav").style.display = "block";
}
function closeNav() {
document.getElementById("myNav").style.display = "none";
}
</script>
</body>
</html>
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
I'm very new to HTML and CSS and have finally created my new website. The site works fine on my laptop and PC, but when I open it on my phone, there is this huge white space covering half my screen in portrait mode. It's perfectly fine in landscape mode.
I want my website to be completely zoomed in when opened in portrait mode, so that you can swipe/scroll to navigate on the site and get rid of the white space. Basically, at the moment, when the site is opened, it zooms out to show 100% of the site, but I only want it to show whatever fits the mobile screen in portrait mode. Hope my question is clear. I've been searching for an answer for over 3 hours now. Please help me guys :(
My css: https://pastebin.com/AeHyczJh
My HTML: https://pastebin.com/N5jV8yqY
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design, professional web design">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header>
<div class="container">
<img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>
<nav>
<ul>
<li class="current">Home</li>
<li class="dropdown">
Registration
<div class="dropdown-content">
Team
Individual
Coach a team
Manage a team
</div>
</li>
<li class="dropdown">
KWSA Women's Soccer League
<div class="dropdown-content">
Match Schedule
Practice Schedule
Pitch Locations
Team Kits
Top Scorers
</div>
</li>
<li class="dropdown">
Sponsors
<div class="dropdown-content">
Sponsors of KWSL
Sponsor a team
</div>
</li>
<li class="dropdown">
Info
<div class="dropdown-content">
Rules
FAQ
</div>
</li>
<li>The Carpool Program</li>
</ul>
</nav>
</div>
</header>
<section id="main_content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div id="main_text">
<h1></h1>
<p></p>
</div>
</section>
<footer>
<div class="foot-container">
<img src="images/fb.png" class="social_fb">
<img src="images/youtube.png" class="social_youtube">
<img src="images/insta.png" class="social_insta">
<img src="images/mail.png" class="social_mail">
</div>
</footer>
</div>
</body>
</html>
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url(''); /*URL to font*/
}
#charset "utf-8";
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
max-height: 5px;
}
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
overflow: scroll;
background: url(images/field.jpg) no-repeat 0 -200px;
}
h1,
p{
margin: 0;
}
#wrap{
}
.container{
margin: auto;
overflow: hidden;
}
header{
padding-top: 30px;
min-height: 70px;
padding-bottom: 0px;
min-width: 1300px;
padding-left: 20px;
}
#logo{
position: absolute;
top: 20px;
left: 20px;
margin: auto;
}
header li{
float:center;
display:inline;
padding: 0 70px 0 0px;
}
nav{
float: right;
}
header a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
}
header a:hover{
font-weight: bold;
}
iframe{
position: static;
top: 300px;
left: 200px;
float:right;
box-shadow: 10px 10px 100px black;
overflow: hidden;
margin: 200px 20px 0px 0px;
}
#main_content{
position: static;
min-height: 700px;
min-width: 1300px;
width: 100%;
z-index: 1;
}
#main_content h1{
position: absolute;
left: -135px;
top: 165px;
text-align: center;
color: #FFFFFF;
font-family:"Bauhaus 93";
font-size: 50px;
min-height: 500px;
min-width: 150px;
}
#main_content p{
color:#FFFFFF;
text-align: center;
height: 10px;
width: 400px;
position: absolute;
left: 410px;
top: 275px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 700ms ease;
border: black 1px solid;
}
li a:hover, .dropdown:hover .dropbtn {
background: black;
color: white;
box-shadow: inset 0 0 0 3px black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
background: rgba(208,208,208,0.8);
box-shadow: 1px 1px 1px black;
}
.dropdown-content a:hover {background-color:black;}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn-2 {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown2:hover .dropbtn-2 {
}
.dropdown-content-2 {
display: none;
position: absolute;
background-color: #1A3C60;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-2 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}
.dropdown2:hover .dropdown-content-2 {
display: inline-block;
position: absolute;
left: 160px;
margin-top: -47px;
}
li.dropdown2 {
display: inline-block;
}
#FAQ{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
height: 100%;
}
#FAQ h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#FAQ ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#FAQ ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
.social_fb{
position: relative;
top: 15px;
left: 500px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_fb:hover{
background: #3b5998;
}
.social_youtube{
position: relative;
top: 15px;
left: 520px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_youtube:hover{
background: #bb0000;
}
.social_insta{
position: relative;
top: 15px;
left: 540px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_insta:hover{
background: #8a3ab9;
}
.social_mail{
position: relative;
top: 15px;
left: 560px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_mail:hover{
background: #e4a805;
}
#carpool{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
z-index: 1;
height: 100%;
}
#carpool h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#carpool ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#carpool ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
#soon{
position: absolute;
left: 550px;
top: 300px;
}
I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).