I have created a very simple static webpage with a header. I have pasted the whole source code below, so you can check it out.
I want to add an animation where an airplane with a banner comes in from the left. The banner will have the header text and the airplane stops when the header is centered. I want to create this animation using HTML/CSS and JavaScript.
nav {
padding: 15px;
margin: -8px;
background-color: white;
}
nav a {
color: black;
font-family: Jost;
border-radius: 0px 0px 10px 10px;
text-decoration: none;
}
.nav-links {
padding: 15px;
}
.nav-links:hover {
background-color: white;
color: black;
}
header {
background: url('https://clipground.com/images/flat-mountain-clipart-6.jpg');
background-position: center;
background-size: 1400px 800px;
background-attachment: fixed;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
height: 60vh;
color: white;
text-align: center;
padding-left: 30px;
padding: 100px;
}
header h1 {
font-family: Unbounded;
font-size: 50px;
box-shadow: 0px 0px 40px 10px lightgrey;
padding: 40px;
margin-left: 250px;
margin-right: 250px;
background: linear-gradient(61deg, rgba(63, 164, 255, 1) 0%, rgba(74, 44, 201, 1) 58%, rgba(102, 11, 181, 1) 100%);
}
header h2 {
font-size: 30px;
border-top: solid 2px white;
border-bottom: solid 2px white;
margin-left: 420px;
margin-right: 420px;
padding: 10px;
text-shadow: 2px 2px black;
font-family: Playfair Display;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sample Webpage</title>
</head>
<body>
<nav>
<a style="padding-right:400px; text-decoration:none; ">Lorem Ipsum</a>
<a class="nav-links">Home</a>
<a class="nav-links">About</a>
<a class="nav-links">Services</a>
</nav>
<br>
<header>
<h1>Lorem Ipsum</h1>
</header>
</body>
</html>
I don't know how to do animations since I am only a web developer, and I came across this. I already have the background and I just need a airplane SVG.
Related
I am trying to hide the current page then transition from to the next one but I keep getting this error. Ive tried everything but it keeps saying uncaught typeerror cannot read property of null (reading 'queryselector')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> Tic Tac Toe </title>
<link rel="stylesheet" type="text/css" href="TicTacToe.css" title="style" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="TicTacToe.js"></script>
</head>
<body>
<!---Startpage--->
<div class="content">
<header><h2>Tic Tac Toe</h2>
<div class="Begin">
<h3>Play the game, Click <span>START</span> to begin</h3>
</div>
</header>
<div class="game-board">
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
<div class="options">
<button class="Start">Start Game </button>
<button class="Exit"> Exit Game</button>
</div>
</div>
<!---Select your player--->
<div class="Select-box">
<header> Tic Tac Toe </header>
<div class="main">
<div class="title">Select who you want to play as </div>
<div class="selectoptions">
<button class="playerX">Player X's</button>
<button class="playerO"> Player O's</button>
</div>
</div>
</div>
<!---Select between option--->
<div class="Playerbox">
<header> Tic Tac Toe </header>
<div class="main">
<class class="title">Who are you playing against?</div>
<div class="playoptions">
<button class="Player">Player vs Player</button>
<button class="Machine"> Player vs Computer</button>
</div>
</div>
</div>
</body>
</html>
Here is the css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body {
background: lightcoral;
}
/*Beginning of start page */
h2 {
text-align: center;
color: white;
white-space: nowrap;
}
h3 {
text-align: center;
color: white;
white-space: nowrap;
}
.content{
position: absolute;
top: 25%;
left: 40%;
transform: translate(-25%, -40%);
padding: 20px 25px 25px;
border-radius:5px;
transition: all 0.3 ease;
display: none;
}
.game-board
{
width: 450px;
height: 450px;
margin: 0 ;
padding-top: 50px;
background-color: lightcoral;
color: #fff;
border: 2px solid white;
border-radius: 10px;
border-top: 50px;
border-left: 50px;
border-right: 50px;
display: grid;
grid-template: repeat(3, 2fr) / repeat(3, 2fr);
}
.box
{
border: 2px solid white;
border-radius: 2px;
font-family: Helvetica;
font-weight: bold;
font-size: 4em;
display: flex;
justify-content: center;
align-items: center;
}
.Start {
display: inline-block;
padding: 15px 15px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 19%;
}
.Start:hover {background-color: #3e8e41}
.Start:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.Exit {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 55%;
}
.Exit:hover {background-color: red}
.Exit:active {
background-color: red ;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/*End of start page*/
/*Start of player selection page*/
.Select-box{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
transition: all 0.3 ease;
}
.Select-box .hide{
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%)scale(0.9);
}
.Select-box header{
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
}
.Select-box .title{
font-size: 18px;
font-weight: 500;
margin: 20px 0;
}
.Select-box .selectoptions{
display: flex;
width: 100%;
}
.selectoptions button{
width: 100%;
font-size: 19px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
}
.selectoptions button:hover{
transform:scale(0.96);
}
.selectoptions button.playerX{
margin-right: 7px;
}
.selectoptions button.playerO{
margin-right: 7px;
}
/*End of player selection page*/
/*Start of oponent selection page*/
.Playerbox{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
display: none;
}
.Playerbox header{
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
}
.Playerbox .title{
font-size: 18px;
font-weight: 500;
margin: 20px 0;
}
.Playerbox .playoptions{
display: flex;
width: 100%;
}
.playoptions button{
width: 100%;
font-size: 15px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
}
.playoptions button:hover{
transform:scale(0.96);
}
.playoptions button.Player{
margin-right: 4px;
}
.playoptions button.Machine{
margin-right: 4px;
}
/*End of oponent selection page*/
And the JS code im trying to run
const selectBox = document.querySelector(".Select-box"),
selectXBtn = selectBox.querySelector(".playerX"),
selectOBtn = selectBox.querySelector(".playerO");
window.onload = () =>{// once our window is loaded
selectOBtn.onclick = () =>{
selectBox.classList.add("hide");//hide the select box on playerx
}
}
Any help would be greatly appreciated. Also if you could sort of guide me on creating the sever side of the tic tac toe game that would be really helpful
It looks like you're including your <script src="TicTacToe.js"></script> tag before the DOM has loaded. That means lines like selectXBtn = selectBox.querySelector(".playerX"), which execute immediately, will fail because the DOM has not yet loaded.
You can either move selectXBtn and selectOBtn into the global namespace (and declare them var) and initialize them in the window.onload handler, or just move your <script> tag to just before the </body> tag.
Also, why are you using vanilla JS for DOM manipulation when you're including the jQuery library which makes the syntax simpler?
I have been trying to have bins that show up on the right side but they don't appear to have been placed very well, I'm new to CSS, I have looked through the internet and no luck (or I didn't make sense of it).
The bin seems to be not in proportion with the background, and so if I want to make it fill the tag it will just overflow off the box.
#container {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
width: 360px;
background-color: #f7f7f7;
margin: 100px auto;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #FFAFBD;
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);
background: linear-gradient(to right, #ffc3a0, #FFAFBD);
}
li {
background-color: white;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px ;
box-sizing: border-box;
color: #2980b9;
}
input:focus{
background-color: white;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background-color: #f7f7f7;
}
span {
height: 35px;
width: 40px;
display: inline-block;
margin-right: 20px;
margin: 0 auto;
text-align: center;
color: white;
background-color: #e74c3c;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#plus {
width: 20px;
height: 20px;
float: right;
margin-top: 3px;
}
.remove {
height: 20px;
width: 15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/CSS/todo.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="">
<title>Trello</title>
</head>
<body>
<div id="container">
<h1>To-do List <img id="plus" src="assets/Plus.png" alt=""></h1>
<input type="text" placeholder="Add New Todo...">
<ul>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Go to potions class</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Buy New Robes</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Visit Hagrid</li>
</ul>
</div>
<script src="assets/JS/lib/Jquery.js"></script>
<script src="assets/JS/Custom/todos.js"></script>
</body>
</html>
Thanks for the help in advance.
Use Flexbox! Give to your <li> and to the <span> a display: flex; This way you can have control of the positioning of its children (in this case your <img>).
li {
display: flex;
}
span {
display: flex;
justify-content: center;
align-items: center;
margin: 0 2px 0 0;
}
Here's a working Codepen.
Here's a nice guide to Flexbox.
How about making you span elements the same height as the li so that the red bg fills up completely?
span {
height: 40px;
}
Just like this?
I have a static page with 1 HTML and 1 CSS file.
When I test the page and type into the multiline textarea (last one on the page) until the page should overflow, it doesn't. The div with the id of 'centered' has a height of 'fit-content' and inspecting it shows that it does correcty fit the content and does overflow, but the browser doesn't show me a scrollbar. Also scrollBy doesn't work. And it isn't only one browser (Chrome desktop, android; Firefox desktop, android).
Here is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formr.io</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="index.css">
<script defer>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".long-answer").forEach((el) => {
let offset = el.offsetHeight - el.clientHeight;
el.addEventListener('input', function (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px';
});
});
});
</script>
</head>
<body>
<div id="centered">
<!-- Header -->
<div class="question-container">
<div class="form-header-color-bar"></div>
<div class="form-header-title">Тест върху "Неразделни"</div>
<div class="form-header-desc">Упражнителен тест върху "Неразделни"</div>
</div>
<br>
<!-- Questions -->
<div class="question-container">
<div class="question-title">Име и клас <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Какво мислите за решението на Иво? Прекалил ли е? <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Теза: "Той ме прегърнал с клони, аз съм в него вейки свряла." <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<textarea placeholder="Вашия отговор." class="long-answer"></textarea>
</div>
</div>
</div>
</body>
</html>
And here is index.css:
:root {
--main-color: #d08aff;
/*--background-color: #f8edff;*/
--background-color: rgb(240, 235, 248);
}
body {
background-color: var(--background-color);
margin: 0px;
}
#centered {
margin-top: 15px;
position: fixed;
transform: translate(-50%, 0%);
left: 50%;
width: 90%;
height: fit-content;
min-width: 100px;
max-width: 600px;
}
.question-container {
background-color: white;
padding: 0px 0px 15px 0px;
border-radius: 13px;
border: 1px solid #e6e3e8;
width: 100%;
height: fit-content;
}
.question-container .form-header-title {
font-family: 'Source Sans Pro', sans-serif;
word-break: break-all;
font-size: 24pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
}
.question-container .form-header-desc {
font-family: 'Source Sans Pro', sans-serif;
font-size: 10.5pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .form-header-color-bar {
margin: 0px;
width: 100%;
height: 15px;
background-color: var(--main-color);
border-radius: 13px 13px 0px 0px;
}
.question-container .question-title {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14pt;
text-align: left;
margin-left: 15px;
margin-top: 10px;
margin-bottom: 0px;
word-break: break-all;
}
.question-container .text-answer-container .short-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
height: 25px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
}
.question-container .text-answer-container .short-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
.text-answer-container {
margin-left: 15px;
margin-right: 15px;
}
.question-container .text-answer-container .long-answer {
font-family: 'Source Sans Pro', sans-serif;
padding-left: 7px;
padding-right: 7px;
border: 1px solid var(--main-color);
border-radius: 7px;
min-width: 91px;
max-width: 300px;
width: calc(100% - 14px);
resize: none;
overflow: hidden;
}
.question-container .text-answer-container .long-answer:focus {
transition: 0.2s;
outline: none;
box-shadow: 0px 0px 5px 1px var(--main-color);
}
Thanks for your time.
If the div is fixed it can't scroll.
Try this:
#centered {
position: absolute;
}
instead of
#centered {
position: fixed;
}
I've created a single html page that will be used within a .aspx template. The html code I used is pretty basic and includes an email subscribe form. The form and it's code is taken directly from Mailchimp as they are the email client I'm using. The problem is that the page loads fine in all browsers apart from Internet Explorer, which pushes my whole html code down underneath the page. I have a jquery file included in the form (jquery-1.8.2.min.js) and I'm not sure if that is interfering with my html code or if it's a problem within the code itself that I havent specified correctly for Internet Explorer. I'm not sure also if it has something to do with the Mailchimp form. I've tried everything possible to fix this but nothing seems to work. If anyone could help with this or has any ideas I would really appreciate it. Please see my code and screenshots below. Thanks, Gary
Heres my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" name="EMAIL" class="required email"
id="mce-EMAIL" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response"
style="display:none"></div> <div class="response"
id="mce-success-response" style="display:none"></div> </div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
Heres my CSS
#charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }
Not sure if it is how you pasted into stackoverflow or not, but you need to indent your content.
The days are mainly gone where you need to save that extra overhead for the filesize.
Using notepad++ would have helped you find this error pretty quickly, what file editor do you use?
Some elements are missiong from this code:
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
CLOSE THIS DIV ABOVE mc-field-group. ALSO FORM IS NOT CLOSED, BEST TO DOUBLE CHECK SIGN-UP FORM CODE
</div><!--end form section-->
i couldnt find a better tittle because its a specific error of my site, that i will provide a link to see it and his code.
The issue is when i scroll, there is a script that when the bar touches the top of the browser, the bar will remain there, but that make the slideshow make a little jump and the bars cuts part of the slideshow.
See it here: http://optential.co.nf/
Code:
$(window).bind('scroll', function () {
var h = $('.header').height();
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
} else {
$('.mail2, .optimize').removeClass('fixed');
}
});
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
background-size: cover;
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 100px;
background-repeat: no-repeat;
text-align: right;
}
#btn {
width: 10em;
}
.mail2.fixed {
box-shadow: 10px 6px 15px grey;
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 100px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
position:relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#slider .images {
width: 100%;
position: relative;
transition: left 1s;
left: 0;
}
#slider .images img {
z-index: -1;
width: 100%;
background-size: cover;
position: absolute;
}
.controls {
width:100%;
width: 350px;
margin: 5px auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 5px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: red;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundos.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
#pc {
height: 600px;
width: 50%;
float: left;
background-size: 100%
background-repeat:no-repeat;
background-image: url("img/pc.jpg");
}
#pctexto {
height: 600px;
width: 50%;
float: left;
background-size: cover;
background-color: blue;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: 100%;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 #btn {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 4px;
padding: 10px 0px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/fixedbar.js"></script>
<script src="js/slider.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input name="Email" class="Email" type="text" placeholder="Enter your Email address ...">
<input type="submit" value="Get started for free">
</form>
</div>
</div>
<div class="mail2">
<form action="form/form.php" method="post">
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
<input type="submit" id ="btn" value="Get started for free">
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<div class="controls">
<img src="img/3.png" alt="Image-1" />
<img src="img/2.png" alt="Image-2" />
<img src="img/1.png" alt="Image-3" />
<img src="img/4.png" alt="Image-4" />
</div>
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
<div id="pc">
</div>
<div id="pctexto">
</div>
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form method="POST" action="form/contactengine.php">
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="Name" size="50" placeholder="Name"/>
<input type="text" name="Email" size="50" placeholder="Email"/>
<input type="text" name="Subject" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
<input type="submit" id="btn"value="Send"/>
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
<script src="js/slider.js"></script>
</body>
</html>
The css of the bar is "mail2", of the slideshow is "slider" and "controls".
Hope someone can help.
When you apply .fixed, you are taking the menu element out of the flow. This is because it is changing from position: relative to position: fixed. That's why the elements below it are jumping up 100px . To complete the effect you're after, you will need to compensate for the missing 100px.
OPTION 1
You can apply a margin-top to the #slider element below:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#slider').css('margin-top', '100px');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#slider').css('margin-top', '0px');
}
OPTION 2
You can add an element with 100px of height into the flow.
In your HTML, add this below the .mail2 element
<div id="menu-block" style="height: 100px; display: none;">
And add this to your JS:
if ($(window).scrollTop() > h) {
$('.mail2, .optimize').addClass('fixed');
$('#menu-block').css('display', 'block');
} else {
$('.mail2, .optimize').removeClass('fixed');
$('#menu-block').css('display', 'none');
}
In this particular case, both ways will work the same. In other situations, only one technique will be suitable. Hope this helps!
Considering the bar is a fixed height of 100px, you could add a rule like so:
.fixed + #slider {
padding-top: 100px;
}
or if other pages have more dynamic layouts, you could use .fixed + *
It is because as soon as you make it be position:fixed it no longer takes up space on the page, so the content under it jumps up to fill the space.
I have come across this in the past, and my solution was to put another div under the bar that is going to get fixed. It needs to be the same height as the div that is going to become fixed. Make it display:none and then change it to display:block when you toggle the bar to be fixed, that way it appears right when the fixed bar stops taking up space on the page. This should stop it from jumping.