master page does not load css file - javascript

so i referenced css file in master page like this:
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
and it actually shows in visual studio in design view, but for some reason does not show in web browser. why is that? btw the css file and masterpage and the image folder are all in the root directory.
css file:
*
{
padding: 0em;
margin: 0em;
}
body
{
background:url('images/bg1.jpg');
padding: 30px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img
{
border: solid 1px #6F5230;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.divider1
{
position: relative;
background: #fff url('images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}
.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('images/bg2.jpg') repeat-x;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
width: 82%;
border: solid 7px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
height: 8.0em;
background: #2B2B2B url('images/topbg.gif') repeat-x;
margin-bottom: 2px;
}
#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#search
{
position: absolute;
top: 5.5em;
right: 2.0em;
padding-right: 0.0em;
}
#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}
#search input.submit
{
background: #939B00 url('images/buttonbg.gif') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}
#headerpic
{
position: relative;
height: 200px;
background: #fff url('images/hdrpic.jpg') no-repeat top left;
margin-bottom: 2px;
}
#menu
{
position: relative;
background: #7F8400 url('images/menubg.gif') repeat-x top left;
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}
#menu ul
{
position: absolute;
top: 1.1em;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: 0.5em 1.0em 0.9em 1.0em;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover
{
text-decoration: underline;
}
#menu ul li a.active
{
background: #7F8400 url('images/menuactive.gif') repeat-x top left;
}
#menubottom
{
background: #fff url('images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Project3.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Zahra Moradi</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div id="upbg">
</div>
<div id="outer">
<div id="header">
<div id="headercontent">
<h1>
E-Library</h1>
</div>
</div>
<form method="post" action="">
<div id="search">
<input type="text" class="text" maxlength="64" name="keywords" />
<input type="submit" class="submit" value="Search" />
</div>
</form>
<div id="headerpic">
</div>
<div id="menu">
<!-- HINT: Set the class of any menu link below to "active" to make it appear active -->
<ul>
<li>Home</li>
<li>Library</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="menubottom">
</div>
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<div class="left">
© 2015 Zahra Moradi. All rights reserved.</div>
<div class="right">
Design by NodeThirtyThree Design</div>
</div>
</div>
</form>
</body>
</html>
I've already tried other solutions posted on similar questions but didn't work for me. like adding runat="server" and so on...

Same suggestion as #Tyr. Try loading the CSS file as a web link instead of a local file. For example:
<link rel="stylesheet" type="text/css" href="https://example.com/website/css/default.css"/>
That should work. If it doesn't, use the developer tools on your browser (Google Chrome is the best). In Chrome, right click anywhere on the page and click 'Inspect Element'. Are there any errors coming up to do with your CSS file being displayed on the bar on the right? If there is, what are they?

Related

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>
If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>
Try with setValue('') method to reset any element value.

Embeded Twitter Link Showing Up Above Hamburger Dropdown

I am building a website for a college class and I've run into a problem. I can't seem to find the answer when I google it, so I made an account to post it here. I hope that someone is able to identify what is going on.
As you can see, the embedded twitter post is showing up on top of the hamburger menu and I'm not sure how to get it underneath.
Here is the HTML (It's still a work in progress and I'm pretty new so please forgive me for any ugly code):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="images/run.png">
</head>
<body>
<header>
<div id="weatherBar" class="weatherBar">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
<nav class="menu">
<ul>
<li>
About the Events
<ul class="submenu">
<li>Starting Times</li>
<li>Course Details</li>
<li>What to Bring</li>
</ul>
</li>
<li>Upcoming Events</li>
<li>Registration</li>
<li>Packet Pick Up</li>
<li>About Us</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</nav>
<div class="socialLinks">
<img src="images/fb-ico.png" alt="" class="iconHeight">
<img src="images/twit-ico.png" alt="" class="iconHeight">
<img src="images/inst-ico.png" alt="" class="iconHeight">
</div>
</div>
</header>
<main class="wrapper">
<div id="details" class="details lightSub contentFill contentPad">
<h2 class="subHeader">What People are Saying</h2>
<div class="sub_head_line_white"></div>
<div class="socialWrapper centering">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcas222cascade%2Fposts%2F366912850439109&width=350&show_text=true&height=214&appId" width="350" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="socialWrapper centering">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Fantastic weather for training! Can't wait to get in the water for open water swims!</p>— CAS 222 (#pcccas222) May 10, 2018</blockquote>
</div>
</div>
</main>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/ham.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>
Here is the javascript:
$(document).ready(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").show();
$(".hamburger").on("click", function () {
$(".menu").slideToggle("slow");
$(".hamburger").hide();
$(".cross").show();
});
$(".cross").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
$(".menu a").on("click", function () {
$(".menu").slideToggle("slow");
$(".cross").hide();
$(".hamburger").show();
});
});
Here is the CSS:
Menu.css
.hamburger {
background: none;
position: relative;
top: 0;
right: 0;
line-height: 35px;
color: red;
border: 0;
font-size: 1.4em;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.cross {
background: none;
position: relative;
top: 0;
right: 0;
color: red;
border: 0;
font-size: 3em;
line-height: 55px;
font-weight: 700;
cursor: pointer;
outline: none;
z-index: 10;
}
.socialLinks {
background: none;
position: fixed;
top: 8px;
right: 10px;
color: red;
border: 0;
cursor: pointer;
outline: none;
z-index: 10;
}
.iconHeight {
height: 20px;
}
.menu {
/* z-index: 10;*/
font-weight: 700;
width: 100%;
height: 100vh;
background: rgb(0, 0, 0, .85);
position: absolute;
top: 25px;
padding-top: 20px;
right: 0;
text-align: left;
font-size: 2em;
text-decoration: none;
color: white;
font-family: 'Roboto Condensed', sans-serif;
z-index: 10;
}
.menu ul {
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
.menu li {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
}
.menu li:hover {
display: block;
padding: 15px 0;
padding-left: 25px;
padding-right: 25px;
color: red;
}
.menu ul a {
text-decoration: none;
color: white;
margin: 0;
}
.menu ul a:hover {
text-decoration: none;
color: red;
}
.menu ul a:active {
text-decoration: none;
color: white;
}
.menu ul a:visted {
text-decoration: none;
color: gray;
}
.submenu li {
padding-left: 25px;
}
style.css
body {
.grayGradient;
}
main {}
.hero {
background-image: url(../images/run3.jpg);
background-size: auto;
background-position: center;
height: 500px;
width: 100%;
}
.heroBot {
width: 100%;
height: 20px;
background-color: #000;
}
.weatherBar {
position: fixed;
height: 40px;
width: 100%;
background: black;
border-bottom: 3px red solid;
margin-left: auto;
margin-right: auto;
}
footer {
height: 30px;
width: 100%;
background: black;
border-top: 3px red solid;
}
h1 {
.fontOswald;
font-size: 60px;
color: white;
font-weight: bold;
text-align: center;
}
.headerSize {
font-size: 50px;
.fontNarrow;
font-weight: normal;
letter-spacing: 1px;
}
.titleDiv {
padding-left: 15px;
width: 95%;
padding-top: 40px;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
border-bottom: 3px red solid;
}
.titleText {
padding-top: 20px;
padding-bottom: 20px;
}
.disc {
margin-top: 40px;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
.fontBaseText;
font-size: 1.5em;
color: #000;
text-align: center;
font-weight: lighter;
line-height: 30px;
}
.facebookFeed {
margin-left: auto;
margin-right: auto;
display: block;
}
.contentPad {
padding: 20px 20px 45px 20px;
}
.contentFill p {
font-size: 1.2em;
.fontBaseText;
line-height: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.subHeader {
.fontNarrow;
font-size: 1.8em;
}
.subHeaderAlt {
.fontNarrow;
font-size: 1.8em;
color: #fff;
}
.sub_head_line {
height: 5px;
width: 95%;
.grayGradientBtR;
}
.sub_head_line_white {
height: 5px;
width: 95%;
.grayGradientWtR;
}
.darkSub {
background-color: #000;
color: #fff;
}
.lightSub {
background-color: #fff;
color: #000;
}
.tableDay {
text-align: center;
font-size: 1.2em;
.fontNarrow;
}
.timesTable {
margin: 10px;
margin-top: 20px;
align-content: center;
.fontBaseText;
}
.timesTable tr:first-child {
border: none;
}
.timesTable tr {
border-left: 2px #mainRed solid;
border-right: 2px #mainRed solid;
}
.timesTable table,
tr,
td,
th {
border-collapse: collapse;
padding: 3px;
}
.timesTable th {
font-weight: bold;
padding: 10px;
}
.timesTable td {
padding: 10px;
}
.timesTable tr:nth-child(even) {
background-color: #darkGray;
}
.raceName {
width: 180px;
}
.raceTime {
width: 100px;
}
.startingTimeTableWrapper {
width: 100%;
}
.centering {
.marginCenter;
}
.socialWrapper {
width: 350px;
margin-top: 10px;
z-index: -1;
}
.subHeader:before {
height: 25px;
display: block;
content: '';
}
.subHeaderAlt:before {
height: 25px;
display: block;
content: '';
}

how to eliminate the horizontal scrollbar?

I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.

Random movement from slideshow

I got a slideshow on my website but for some reason the slide make a movement that should not be the default one, it jumps from 1st slide for 3rd slide and then back to the 1st.
Then if you use the manual navigation (the circles) and go 1,2,3,4 he makes the correct movement but then he starts to make weird movements, just test by yourself a few times and you will see what i am talking about. My goal is to make 1st slide, to 2, to 3 then 4 and reset, simple.
Site live: http://optential.co.nf/
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function () {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function (i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) { button.addClass('current') }
button.click(function(){
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function () {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function(){
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
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 {
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: 100%;
position: absolute;
}
.controls {
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;
}
.mobile {
min-width: 1300px;
}
.mobile .bar {
background-size: cover;
width: 100%;
background: #F4F4F4;
color: #595B61;
min-width: 700px;
display: flex;
justify-content: space-around;
text-align: center;
}
.mobile .bar img {
width: 100%;
background-size: cover;
display: block;
margin: 0 auto;
}
.mobile .content {
background: radial-gradient(ellipse at 55% 50%, #F9F9F9 40%,#B6B5BD 120%);
position: relative;
}
.mobile .content .mobimg {
padding: 3em;
margin-left:10%;
}
.mobile .content .mob {
position: absolute;
top: 0;
left: 60%;
}
.mobile .content h1 {
color: #D6D6D4;
font-size: 120px;
margin-bottom: 0;
}
.mobile .content p {
margin-left: 15px;
width: 410px;
color: #929584;
font-size: 12px;
margin-bottom: 18px
}
.mobile .content .sep {
height: 15px;
border-bottom: 1px solid #C24147;
text-align: center;
}
.mobile .content .sep img {
padding: 0 8px;
background: #F9F9F9;
}
.mobile .content h2 {
margin-left: 15px;
color: #929584;
font-size: 15px;
font-weight: 600;
text-align: center;
}
.mobile .content .buttons {
display: flex;
justify-content: space-around;
width: 400px;
margin-left: 20px;
}
.mobile .content .button {
display: block;
background: #010101;
color: #F8F8F8;
text-decoration: none;
width: 160px;
height: 50px;
border-radius: 6px;
position: relative;
}
.mobile .content .button:hover {
background: #222;
}
.mobile .content .button.apple img {
margin: 10px 0 0 10px;
}
.mobile .content .button.apple span {
font-size: 11px;
font-weight: 400;
position: absolute;
top: 4px; left: 42px;
}
.mobile .content .button.apple h3 {
font-size: 22px;
font-weight: 600;
position: absolute;
top: 14px; left: 42px;
margin: 0;
}
.mobile .content .button.google img {
margin: 18px 0 0 8px;
}
.mobile .content .button.google span {
font-size: 10px;
font-weight: 600;
position: absolute;
top: 4px; left: 40px;
text-transform: uppercase;
}
.mobile .content .button.google h3 {
font-size: 20px;
font-weight: 300;
position: absolute;
top: 16px; left: 38px;
margin: 0;
}
.mobile .content .button.google h3 b {
font-size: 22px;
font-weight: 400;
font-family: 'Cardo', serif;
margin: 0;
margin-right: 4px
}
.contact {
min-width: 1100px;
background-image: url("img/fundo2es.jpg");
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:750px;
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="mobile">
<div class="bar">
<img src="img/barra2.png">
</div>
<div class="content">
<img class="mobimg" src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/mob.png">
<div class="mob">
<h1>Mobile</h1>
<p>Optential combines the best of responsive software with native IOS and Android apps to provide the best experience and optimal results!</p>
<p>On laptops, desktops, tablets and phones, always get the best experience on the most intuitive project management set of tools in the world!</p>
<p class="sep">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/a1.png">
</p>
<h2>Get the app!</h2>
<div class="buttons">
<a class="button apple" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/apple.png">
<span>Download on the</span>
<h3>App Store</h3>
</a>
<a class="button google" href="">
<img src="https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/google.png">
<span>Get it on</span>
<h3><b>Google</b>play</h3>
</a>
</div>
</div>
</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" id="contactos_form" action="form/contactengine.php" onsubmit="return submit_form(this);">
<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>
<script>
function submit_form(form){
formulario=$("#contactos_form");
$.ajax({url: formulario.attr("action"), method:formulario.attr("method"), data:formulario.serialize(), success: function(result){
alert(result);
}});
return false;
}
</script>
</body>
</html>
Site live: http://optential.co.nf/
Slideshow: slider and controls on css.

Fixed bar script makes slideshow "jump" - How to remove?

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.

Categories