Why does this menu act screwy in IE? SOS

Why does this menu act screwy in IE? SOS - javascript

I hope someone can help. This is driving me nuts.
You can see the page i'm having problems with at www.jomundayphotography.com/template.html.
The dropdown menu is working everywhere but Internet Explorer (all versions are having problems).
The Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="css/navcss.css" rel="stylesheet" type="text/css"/>
<link href="css/csstest2.css" rel="stylesheet" type="text/css">
<script src="JavaScript/jq.js" type="text/javascript"></script>
<script src="JavaScript/easing.js" type="text/javascript"></script>
<script src="JavaScript/color.js" type="text/javascript"></script>
<script src="JavaScript/navjs.js" type="text/javascript"></script>
<script src="JavaScript/mainTest2.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/Logos/logo.png" id="logo" alt="Sinclairs Solicitors Logo"/>
<img src="images/Logos/conveyancingqualitylogo.gif" id="conveyancingQuality" alt="Conveyancing Quality"/>
<div id="motto">
<p>
<span id="motto1">Professional</span>
<span id="motto2">Experienced</span>
<span id="motto3">Approachable</span>
</p>
</div>
</div>
<div id="nav"><div id="navBar">
<ul>
<li id="aboutUsHeading"class="menuItem">about Us</li>
<li id="teamMenuHeading" class="menuItem">
the team
<ul>
<li class="subMenuItem">Henry Drucker</li>
<li class="subMenuItem">Joanna Yianni</li>
</ul>
</li>
<li id="servicesMenuHeading" class="menuItem">
services
<ul>
<li class="subMenuItem">Residential Property</li>
<li class="subMenuItem">Commercial Property</li>
<li class="subMenuItem">Company Commercial</li>
<li class="subMenuItem">Landlord and Tenant</li>
<li class="subMenuItem">Wills</li>
<li class="subMenuItem">Trust and Probate</li>
<li class="subMenuItem">Family Life</li>
<li class="subMenuItem">Employment</li>
<li class="subMenuItem">General Litigation</li>
<li class="subMenuItem">Personal Injury</li>
</ul>
</li>
<li id="contactMenuHeading" class="menuItem">contact us
<ul>
<li class="subMenuItem"> find us</li>
</ul>
</li>
</ul>
</div></div> <!--end of navBar-->
<div id="content">
<div class="contentBox" id="sideBarLeft">
<div id="miniMenu">
<ul>
<li><nobr>Residential Property</nobr></li>
<li><nobr>Commercial Property</nobr></li>
<li><nobr>Company Commercial</nobr></li>
<li><nobr>Landlord and Tenant</nobr></li>
<li><nobr>Wills</nobr></li>
<li><nobr>Trust and Probate</nobr></li>
<li><nobr>Family Law</nobr></li>
<li><nobr>Employment</nobr></li>
<li><nobr>General Litigation</nobr></li>
<li><nobr>Personal Injury</nobr></li>
</ul>
</div>
</div>
<div class="contentBox" id="galleryBox">
<div id="contentHolder">
<p id="p1">moving House?</p>
<p id="p3">At Sinclairs we have over<br/>25 years experience,<br/>helping our clients<br/>through the moving process,<br/>advising on how to stay<br/>in control of their rented<br/>properties,and in all areas<br/>of legal documentation.</p>
<p id="p4">renting?</p>
<p id="p7">need to make a Will?</p>
<p id="contact">0208 203 3344 <br/>info#sinclairssolicitors.com<button class="myButton" email>email us</button><br/>20 Watford Way, Hendon, NW4 3AD</p>
<div>
</div>
<div class="contentBox" id="galleryBox2">
<!--<img id="image1" src="images/civillitigation2.jpg"class="top"/>-->
</div>
<div class="contentBox" id="galleryBox3"><p></p><img src="images/speechbubble.png"><span>read what our clients have to say about us</span><div id="testimonialTeaser"></div></div>
</div>
</div>
</div>
</div> <!--container end-->
<div id="footertop"></div>
<div id="footer"></div>
</body>
</html>
The CSS
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* #font-face #/ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 2, 2011 04:30:37 PM America/New_York */
/* end reset*/
body {
position:relative;
background: url(../images/Backgrounds/bgtile1.gif);
z-index: -30;
overflow: scroll;
}
#container {
position:relative;
top: 0px;
width: 1002px;
height:850px;
margin: 20px auto 0px auto;
background-color: #fff;
/*border-right: 15px #18c662 solid;*/
}
#header {
position:relative;
display: block;
clear: both;
z-index:10;
margin: 0px;
height: 170px;
background-image: url(../images/Backgrounds/headerbg.gif);
background-repeat:repeat-x;
}
#logo {
clear:both;
padding-top: 20px;
padding-bottom:15px;
padding-left: 30px;
float:left;
height: 140px;
background: none;
}
#conveyancingQuality {
float:right;
height: 95px;
padding-top: 10px;
}
#motto {
clear:both;
position: absolute;
line-height:.9;
left: 470px;
top: 30px;
color: #000;
width: 200px;
font-size: 1.8em;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
margin: 0px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-style: italic;
line-height: 1.3;
}
#motto1 {
display: none;
}
#motto2 {
display: none;
margin-left: 40px;
}
#motto3 {
display: none;
margin-left: 70px;
}
#navBar {
clear:both;
width: 100%;
margin: 0 auto;
}
#navBar a {
display: block;
width: 238.5px;
height: 18px;
/*margin-right: 16.25px;
margin-left: 16.25px;*/
padding: 6px;
border-right:0px #fff solid;
text-decoration:none;
background: url(../images/Buttons/buttona.png);
height: 50px;
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size:1.8em;
}
#aboutUsHeading a {
/*margin-left: 30.25px;*/
}
#contactMenuHeading a{
/*margin-right: 0px;*/
border-right:0px #fff solid;
}
#navBar a:hover {
color: #039;
color: rgba(21, 68, 86, .9);
background: url(../images/Buttons/buttonb.png);
background-repeat: repeat-x;
}
#navBar li.menuItem {
/*z-index:21;*/
margin-top:-6px;
text-align:center;
margin-right:0px;
float:left;
line-height: 1.6;
font-size:100%;
height: 30px;
border-right:0px #fff solid;
}
.subMenuItem {
position:relative;
top: 0px;
display: none;
font-size:80%;
text-indent: 15px;
text-align: left;
border-right:0px #fff solid;
height: 50px;
z-index:30;
}
#navBar ul ul li a {
height:30px;
background: url(../images/Buttons/submenubuttona.png);
background-repeat: no-repeat;
font-size: 95%;
}
#navBar ul ul li a:hover {
background: url(../images/Buttons/submenubuttonb.png)
}
#content {
clear: both;
z-index: 22;
position: absolute;
top: 235px;
}
.contentBox {
position: absolute;
float:left;
border: 1px #154456 solid;
margin: 0px;
height: 600px;
/*background-image: url(../images/Backgrounds/contentbg2.png);
background-repeat: repeat-x;
/*-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;*/
}
#sideBarLeft {
position:relative;
width: 1000px;
}
#miniMenu {
padding: 5px 0px;
margin: 210px 0px 5px 13px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
background: none;
width: 200px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
}
#miniMenu a {
display:block;
text-decoration:none;
font-size:110%;
height: ;
padding: 3px 3px 3px 10px;
margin-top: 0px;
margin-bottom: 3px;
width:90%;
background-image: url(../images/Buttons/submenubuttona.png);
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
text-indent:0px;
}
#miniMenu a:hover {
text-decoration:none;
color: rgba(21, 68, 86, .9);
background-image: url(../images/Buttons/submenubuttonb.png);
font-style:italic;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
}
#articleBox {
left: 210px;
width: 580px;
}
#sideBarRight {
left: 799px;
width: 200px;
}
.contentBox, #container, #content {
-webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
-moz-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
}
#galleryBox {
positioning: absolute;
top: 13px;
left: 10px;
height: 170px;
width: 980px;
background: url(../images/Backgrounds/dep_5272790-London-Skyline.png);
}
#contentHolder{
width: 550px;
height:100%;
background:#fff;
margin-left:250px;
z-index: 10
}
#contentHolder p {
padding: 0;
z-index: 11;
padding-top: 10px;
}
#p1 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p3 {
position: absolute;
top: 0px;
display: none;
margin-left: 320px;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 100%;
text-align:center;
color: #154456;
}
#p4 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p7 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#contact {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 200%;
color: #154456;
margin-left: 0px;
}
#contact a{
color: #154456;
text-decoration:none;
}
#contact a:hover{
text-decoration: underline;
}
#contactBox {
display: block;
width: 200px;
height: 100px;
position:absolute;
top: 76px;
background: #3F3
}
.myButton {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #154456) );
background:-moz-linear-gradient( center top, #ededed 5%, #154456 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#154456');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #154456;
display:inline-block;
color:#f5f5f5;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #154456), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #154456 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#154456', endColorstr='#ededed');
background-color:#154456;
}.myButton:active {
position:relative;
top:1px;
}
#galleryBox2 img {;
position:absolute;
width: 100%;
height:100%;
margin: 0 auto;
}
#image2 {
display: block;
}
#image1 {
display: block;
}
#galleryBox2 img:hover {
}
#galleryBox2 {
positioning: absolute;
top: 190px;
left: 215px;
height: 375px;
width: 210px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#galleryBox3 {
positioning: absolute;
top: 190px;
left: 440px;
height: 375px;
width: 538px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#testimonialTeaser {
position: relative;
top: 12px;
background:none;
/*background: #18c662;*/
width: ;
height: 100px;
margin: 0 auto;
}
#footertop {
margin: 40px 0px 0px 0px;
background: url(../images/Backgrounds/footerbg.png);
background-repeat: repeat-x;
position:relative;
top:0px;
height:75px;
}
#footer {
background:#FFFFFF;
position:relative;
top:75px;
height:auto;
}
The JavaScript
// JavaScript Document
$(document).ready(function() {
var teamMenuHeading = $('#teamMenuHeading');
var teamSubMenu = $('#teamMenuHeading li');
var teamSubMenuLinks = $('#teamMenuHeading a');
var buttonb = ['images/buttonb.gif'];
//alert (teamSubMenu.length)
teamMenuHeading.hover(
function(){
teamSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
teamSubMenu
.stop(true,true).slideUp(200, 'easeOutSine'//, function() {
)
}); //end teamMenuHeading hover
var servicesMenuHeading = $('#servicesMenuHeading')
var servicesSubMenu = $('#servicesMenuHeading li');
var servicesSubMenuLinks = $('#servicesMenuHeading a');
//alert (servicesSubMenu.length)
servicesMenuHeading.hover(
function(){
servicesSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
servicesSubMenu
.stop(true,true).slideUp(200, 'easeOutSine'//, function() {
)
}); //end servicesMenuHeading hover
var contactMenuHeading = $('#contactMenuHeading')
var contactSubMenu = $('#contactMenuHeading li');
var contactSubMenuLinks = $('#contactMenuHeading a');
//alert (servicesSubMenu.length)
contactMenuHeading.hover(
function(){
contactSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
contactSubMenu
.stop(true,true).slideUp(500, 'easeOutSine'//, function() {
)
}); //end contactMenuHeading hover
}); //end ready

Number 1 rule for styling lists:
Reset your lists: ul, li { margin:0;padding:0 }
Do not style LIs, other than display:, position: and float:.
Use display:block and put all styling on your A-tag.
This will clear up 99% of list layout problems.
See my tutorial: http://preview.moveable.com/JM/ilovelists/

Related

I can't get rid of this gap above HTML5 video (On mobile devices)

HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott

Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.

Trying to implement a simple slideshow - Wont work

I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
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);
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: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
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 {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.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: cover;
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 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
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="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.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">
<script src="js/slider.js"></script>
<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>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</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>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
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>
</body>
</html>

I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
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);
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: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
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 {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.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: cover;
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 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
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/prefixfree.min.js"></script>
<script src="js/fixedbar.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">
<script src="js/slider.js"></script>
<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>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</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>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
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>
</body>
</html>

My CSS broke when I fixed another issue, how do I fix my header?

Edit:
http://imgur.com/a/2Zwvq#0
Picture 1 code:
main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -o-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -moz-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -webkit-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -ms-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 60%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.15, rgb(200,225,245)),
color-stop(0.58, rgb(240,240,240))
);
}
header {
width: 950px;
height: 60px;
}
header img{
float: left;
left: -185px;
margin-top: 10px;
position: absolute;
}
header h2 {
text-align: left;
font-size: 16px;
top: 85px;
margin-left: -200px;
font-weight: thin;
position: absolute;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
}
h1 {
font-size: 48px;
text-align: center;
top: 0;
position: relative;
line-height: 1;
margin-top: 50px;
min-width: 650px;
}
h2 {
font-size: 24px;
top: -10px;
text-align: center;
position: relative;
min-width: 650px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding: 0;
margin: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
body {
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 13px;
line-height: 1.5;
color: #000;
}
a {
font-weight: bold;
color: #d5000d;
}
header {
padding-top: 35px;
padding-bottom: 10px;
}
header h1 {
font-size: 48px;
font-weight: bold;
line-height: 1.2;
color: #303030;
letter-spacing: -1px;
}
header h2 {
font-size: 24px;
font-weight: normal;
line-height: 1.3;
color: #aaa;
letter-spacing: -1px;
}
code, pre {
margin-bottom: 30px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
font-size: 12px;
color: #222;
}
code {
padding: 0 3px;
}
pre {
padding: 20px;
overflow: auto;
border: solid 1px #ddd;
}
pre code {
padding: 0;
}
ul, ol, dl {
margin-bottom: 20px;
}
/* COMMON STYLES */
table {
width: 100%;
border: 1px solid #ebebeb;
}
th {
font-weight: 500;
}
td {
font-weight: 300;
text-align: center;
border: 1px solid #ebebeb;
}
form {
padding: 20px;
background: #f2f2f2;
}
/* GENERAL ELEMENT TYPE STYLES */
h1 {
font-size: 2.8em;
}
h2 {
margin-bottom: 8px;
font-size: 22px;
font-weight: bold;
color: #303030;
}
h3 {
margin-bottom: 8px;
font-size: 18px;
font-weight: bold;
color: #d5000d;
}
h4 {
font-size: 16px;
font-weight: bold;
color: #303030;
}
h5 {
font-size: 1em;
color: #303030;
}
h6 {
font-size: .8em;
color: #303030;
}
p {
margin-bottom: 20px;
font-weight: 300;
}
a {
text-decoration: none;
}
p a {
font-weight: 400;
}
blockquote {
padding: 0 0 0 30px;
margin-bottom: 20px;
font-size: 1.6em;
border-left: 10px solid #e9e9e9;
}
ul li {
padding-left: 20px;
list-style: disc inside;
}
ol li {
padding-left: 3px;
list-style: decimal inside;
}
dl dd {
font-style: italic;
font-weight: 100;
}
footer {
padding-top: 20px;
padding-bottom: 30px;
margin-top: 40px;
font-size: 13px;
color: #aaa;
}
footer a {
color: #666;
}
/* MISC */
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: '.';
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.type-csharp .highlight .s { color: #A31515 }
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
mark {
color: #000;
background: #ff0;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
height: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 3 */
font: inherit; /* 2 */
color: inherit; /* 1 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box; /* 2 */
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield; /* 1 */
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
padding: 0.35em 0.625em 0.75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
legend {
padding: 0; /* 2 */
border: 0; /* 1 */
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
/* LAYOUT STYLES */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #666;
background: #fafafa url(../pictures/body-bg.jpg) 0 0 repeat;
}
p {
margin-top: 0;
}
a {
color: #2879d0;
}
a:hover {
color: #2268b2;
}
header {
padding-top: 40px;
padding-bottom: 40px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
background: #2e7bcf url(../pictures/header-bg.jpg) 0 0 repeat-x;
border-bottom: solid 1px #275da1;
}
header h1 {
width: 540px;
margin-top: 0;
margin-bottom: 0.2em;
font-size: 72px;
font-weight: normal;
line-height: 1;
color: #fff;
letter-spacing: -1px;
}
header h2 {
width: 540px;
margin-top: 0;
margin-bottom: 0;
font-size: 26px;
font-weight: normal;
line-height: 1.3;
color: #9ddcff;
letter-spacing: 0;
}
.inner {
position: relative;
width: 940px;
margin: 0 auto;
}
#content-wrapper {
padding-top: 30px;
border-top: solid 1px #fff;
}
#main-content {
float: left;
width: 690px;
}
#main-content img {
max-width: 100%;
}
aside#sidebar {
float: right;
width: 200px;
min-height: 504px;
padding-left: 20px;
font-size: 12px;
line-height: 1.3;
background: transparent url(../pictures/sidebar-bg.jpg) 0 0 no-repeat;
}
a.button {
width: 134px;
height: 58px;
padding-top: 22px;
padding-left: 68px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 23px;
line-height: 1.2;
color: #fff;
}
a.button small {
display: block;
font-size: 11px;
}
header a.button {
position: absolute;
top: 0;
right: 0;
background: transparent url(../pictures/github-button.png) 0 0 no-repeat;
}
aside a.button {
display: block;
width: 138px;
padding-left: 64px;
margin-bottom: 20px;
font-size: 21px;
background: transparent url(../pictures/download-button.png) 0 0 no-repeat;
}
code, pre {
margin-bottom: 30px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 13px;
color: #222;
}
code {
padding: 0 3px;
background-color: #f2f8fc;
border: solid 1px #dbe7f3;
}
pre {
padding: 20px;
overflow: auto;
text-shadow: none;
background: #fff;
border: solid 1px #f2f2f2;
}
pre code {
padding: 0;
color: #2879d0;
background-color: #fff;
border: none;
}
ul, ol, dl {
margin-bottom: 20px;
}
/* COMMON STYLES */
hr {
height: 0;
margin-top: 1em;
margin-bottom: 1em;
border: 0;
border-top: solid 1px #ddd;
}
table {
width: 100%;
border: 1px solid #ebebeb;
}
th {
font-weight: 500;
}
td {
font-weight: 300;
text-align: center;
border: 1px solid #ebebeb;
}
form {
padding: 20px;
background: #f2f2f2;
}
/* GENERAL ELEMENT TYPE STYLES */
#main-content h1 {
margin-top: 0;
margin-bottom: 0;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 2.8em;
font-weight: normal;
color: #474747;
text-indent: 6px;
letter-spacing: -1px;
}
#main-content h1:before {
padding-right: 0.3em;
margin-left: -0.9em;
color: #9ddcff;
content: "/";
}
#main-content h2 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 22px;
font-weight: bold;
color: #474747;
text-indent: 4px;
}
#main-content h2:before {
padding-right: 0.3em;
margin-left: -1.5em;
content: "//";
color: #9ddcff;
}
#main-content h3 {
margin-top: 24px;
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 18px;
font-weight: bold;
color: #474747;
text-indent: 3px;
}
#main-content h3:before {
padding-right: 0.3em;
margin-left: -2em;
content: "///";
color: #9ddcff;
}
#main-content h4 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 15px;
font-weight: bold;
color: #474747;
text-indent: 3px;
}
h4:before {
padding-right: 0.3em;
margin-left: -2.8em;
content: "////";
color: #9ddcff;
}
#main-content h5 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 14px;
color: #474747;
text-indent: 3px;
}
h5:before {
padding-right: 0.3em;
margin-left: -3.2em;
content: "/////";
color: #9ddcff;
}
#main-content h6 {
margin-bottom: 8px;
font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: .8em;
color: #474747;
text-indent: 3px;
}
h6:before {
padding-right: 0.3em;
margin-left: -3.7em;
content: "//////";
color: #9ddcff;
}
p {
margin-bottom: 20px;
}
a {
text-decoration: none;
}
p a {
font-weight: 400;
}
blockquote {
padding: 0 0 0 30px;
margin-bottom: 20px;
font-size: 1.6em;
border-left: 10px solid #e9e9e9;
}
ul {
list-style: disc inside;
padding-left: 20px;
}
ol {
list-style: decimal inside;
padding-left: 3px;
}
dl dd {
font-style: italic;
font-weight: 100;
}
footer {
padding-top: 20px;
padding-bottom: 30px;
margin-top: 40px;
font-size: 13px;
color: #aaa;
background: transparent url('../pictures/hr.png') 0 0 no-repeat;
}
footer a {
color: #666;
}
footer a:hover {
color: #444;
}
/* MISC */
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: '.';
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) { }
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.inner {
width: 740px;
}
header h1, header h2 {
width: 340px;
}
header h1 {
font-size: 60px;
}
header h2 {
font-size: 30px;
}
#main-content {
width: 490px;
}
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
.inner {
width: 93%;
}
header {
padding: 20px 0;
}
header .inner {
position: relative;
}
header h1, header h2 {
width: 100%;
}
header h1 {
font-size: 48px;
}
header h2 {
font-size: 24px;
}
header a.button {
position: relative;
display: inline-block;
width: auto;
height: auto;
padding: 5px 10px;
margin-top: 15px;
font-size: 13px;
line-height: 1;
color: #2879d0;
text-align: center;
background: #9ddcff none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
header a.button small {
display: inline;
font-size: 13px;
}
#main-content,
aside#sidebar {
float: none;
width: 100% ! important;
}
aside#sidebar {
min-height: 0;
padding: 20px 0;
margin-top: 20px;
background-image: none;
border-top: solid 1px #ddd;
}
aside#sidebar a.button {
display: none;
}
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) { }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) { }
http://imgur.com/a/2Zwvq#1
Picture 2 code:
Main.css
body {
font-family: arial;
font-size: 14px;
color: #1D2130;
background-image: linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -o-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -moz-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -webkit-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -ms-linear-gradient(top, rgb(200,225,245) 15%, rgb(240,240,240) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.15, rgb(200,225,245)),
color-stop(0.58, rgb(240,240,240))
);
}
#main-body {
height: 1000px;
width: 60%;
border-top: 0;
text-align: center;
margin-right: auto;
margin-left: auto;
position: relative;
}
header {
width: 950px;
height: 60px;
}
header img{
float: left;
left: -185px;
margin-top: 10px;
position: absolute;
}
header h2 {
text-align: left;
font-size: 16px;
top: 85px;
margin-left: -200px;
font-weight: thin;
position: absolute;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
}
h1 {
font-size: 48px;
text-align: center;
top: 0;
position: relative;
line-height: 1;
margin-top: 50px;
min-width: 650px;
}
h2 {
font-size: 24px;
top: -10px;
text-align: center;
position: relative;
min-width: 650px;
}
#meter {
margin-top: 0;
float: left;
width: 72%;
margin-left: auto;
margin-right: auto;
padding-left: 30px;
}
#gauge {
position: absolute;
width: 259px;
opacity: 1;
}
.arrow {
position: absolute;
}
#right-arrow {
width: 192px;
margin-top: 125px;
margin-left: 20px;
}
#hot-arrow {
width: 41px;
margin-top: 32px;
margin-left: 114px;
display: none;
}
#cold-arrow {
width: 77px;
margin-top: 129px;
margin-left: 117px;
display: none;
}
#outputSpace {
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 24px;
position: relative;
margin-top: 320px;
color: #1C2130;
opacity: .5;
min-width: 942px;
height: 75px;
}
.output-message {
display: none;
width: 720px;
text-align: center;
float: center;
position: relative;
margin-left: 0;
}
#buttonArea {
margin-top: -35px;
width: 80%;
margin-right: auto;
margin-left: auto;
min-width: 700px;
}
#numberField {
margin: 25px;
width: 60%;
height: 40px;
border-radius: 5px solid gray;
display: inline-block;
left: 0;
color: black;
}
#Button1 {
height: 50px;
width: 15%;
margin-left: 10px;
border-radius: 20px;
border: none;
background-color: #c1300d;
display: inline-block;
color: white;
font-size: 18px;
margin-top: 10px;
}
.content-current
{
display: block !important;
}
index.html (pretty much the same for both pages)
<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="developerBlog">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="semantic-ui#*" data-semver="0.9.6" rel="stylesheet" href="https://raw.github.com/Semantic-Org/Semantic-UI/0.9.6/build/packaged/css/semantic.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="javascripts/modernizr.custom.js"></script>
<script data-require="semantic-ui#*" data-semver="0.9.6" src="https://rawgit.com/Semantic-Org/Semantic-UI/0.9.6/build/packaged/javascript/semantic.min.js"></script>
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
<script src="myDirectives.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Danieboy.GitHub.io by Dan Andersson</title>
</head>
<body ng-controller="BlogController as blog">
<svg class="hidden">
<defs>
<path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"></path>
</defs>
</svg>
<header>
<div class="inner">
<h1>Danieboy.GitHub.io</h1>
<h2>Developer blog</h2>
<p class="support">Your browser does not support <strong>flexbox</strong>! <br />Please view this demo with a <strong>modern browser</strong>.</p>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<div class="tabs tabs-style-shape">
<nav>
<ul>
<li>
<a href="#section-shape-1">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Start</span>
</a>
</li>
<li>
<a href="#section-shape-2">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Resume</span>
</a>
</li>
<li>
<a href="#section-shape-3">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>My Projects</span>
</a>
</li>
<li>
<a href="#section-shape-4">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Reviews</span>
</a>
</li>
<li>
<a href="#section-shape-5">
<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-shape-1">
<start></start>
</section>
<section id="section-shape-2">
<resume></resume>
</section>
<section id="section-shape-3">
<myprojects></myprojects>
</section>
<section id="section-shape-4">
<reviews></reviews>
</section>
<section id="section-shape-5">
<contact></contact>
</section>
</div>
</div>
</section>
</div>
</div>
<script src="javascripts/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
new CBPFWTabs( el );
});
})();
</script>
</body>
</html>
Previous post:
AngularJS - Loading my directives suddenly not working?
Website:
http://danieboy.github.io/
http://danieboy.github.io/bmi-calculator/index.html
So when I fixed so that my tabs would properly show the the information to the corresponding tab thanks to the help of #pankajparkar by adding:
.content-current{display: block !important;}
To my css file - the header broke. I would say that I am terrible at CSS so that's why I'm asking - I am more of a back-end programmer so sorry if this is a very simple question but I'd like to learn more about this. The website got quite a few CSS files so I'm not going to post them all here. But as you probably know you can go on the website in Google Chrome and press F12 -> Sources to see them all.
Thanks in advance!

As your styling is terrible :P
just do this to header and it's fixed for you..
header {
width: 950px;
height: 150px;
}
or a best solution set height to auto like
header {
width: 950px;
height: auto;
}
Moreover if you want to align your header in center
header {
width: 950px;
height: auto;
margin: 0 auto;
}
and one Last thing :D
apply this for your header bottom text ;)
header h2 {
text-align: left;
font-size: 16px;
top: 38px;
font-family: Impact, Times, arial;
text-transform: uppercase;
margin-top: 15px;
position: relative;
}

On http://danieboy.github.io/ you have fixed height and width for your header (row 30 in main.css). Just remove that and it will work for you.
On http://danieboy.github.io/bmi-calculator/index.html you have to set both width and height to auto for your header and it will work.

CSS sidebar footer detection

I need the sidebar to not go over the footer nav. I can't figure out how to edit the css for this. Here's a preview, with html and css. So what I'm looking for is a "collision" off the footer border-top so the sidebar can interact with it.
http://codepen.io/TheGamingHideout/pen/reayx
HTML:
<html>
<head>
<title>Home - POG</title>
<link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
</div>
<div id="body">
<center>
<h2>Welcome to Possessed Gaming DarkRP!</h2>
<h4>Owned by PossessedGaming</h4>
</center>
<p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
<br>
<h3>Rules</h3>
<ul>
<li>Do NOT RDM</li>
<li>NLR 3 Minutes!</li>
<li>Respect Staff</li>
<li>Do NOT spam chat or mic</li>
<li>Have Fun!</li>
</ul>
<p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
<br>
<p>Click here to apply for staff!</p>
<div id="latest">
<center>
<img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout
<br>We own no rights on any game on this site unless otherwise noted.
<br>All Rights Reserved.
</div>
<div id="footnav">
<script src="footnav.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
float: right;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
#latest {
border: 1px ridge #FFA500;
width: 300px;
height: auto;
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#latest p {
font-family: Times New Roman;
}
#body {
padding-top: 50px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}

Adding position: relative to the wrapper and positioning #buttons with position: absolute is a way to fix this. Do keep in mind that you need to know the exact distance between the top and bottom of the #wrap and #buttons.
That said there are probably other solutions as well.
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#buttons {
position: absolute;
right: 0px;
top: 110px;
bottom: 95px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}

use margin-bottom: -648px; padding-bottom: 648px; for #buttons instead of padding-bottom: 2000px; margin-bottom: -2000px; This will fix for your current view.But if you want it dynamic at every page you may need to use javascript to detect the screen height and determine the padding-bottom and margin-bottom.hope it will help you.

like this?
http://codepen.io/mmp1992/pen/bnrvw
#buttons {
height:645px;
}
and remove the padding and margin.

Center website in the middle of the page from top to bottom

Simple question. I want my page to be in the middle, from top to bottom. It's already centered from left to right.
Just point out what I need to add and where, thank you. If you see some error in the css, please correct that too.
#charset "utf-8";
/* CSS Document */
/* Created By CaptainMcMarcus */
/* Heavily customized by Sjokomelk */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
html {
height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}
/* Clearing some default browser settings */
* {border: 0px; margin: 0px; padding: 0px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.clear {clear:both;}
/* These parts can be easily changed to affect the design */
body {color: #FFF; font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: url('images/bg.jpg') no-repeat; background-size: 100% auto; background-size: cover; background-attachment: fixed;}
p {text-align: justify; font-size:16px;}
p a { text-decoration: underline; color: #ea5353; text-decoration: underline;}
p a:hover { text-decoration: none; color: #333;}
/* Core Wrapper which we vertically align */
.wrapper {width: 700px; height: auto; margin: 0 auto;}
.box-wrap {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap h2 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.box-wrap p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; padding: 15px 30px; overflow: hidden;
text-align: justify; width: 640px; height: auto; background: #ffffff; color: #717171;}
.icon-box {width: 210px; height: 210px; background: #FFF; margin: 20px 15px 20px 0; float: left; text-decoration: none;}
.icon-box a {text-decoration: none;}
.icon-box p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; text-align: center; color: #717171; text-decoration: none;}
.icon-box:hover {background: #f1f1f1;}
.wide {width: 700px; margin: 0px;}
.end2 {margin: 0px 0px 0px 0px;}
.end {margin: 20px 0px 0px 0px;}
nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 105px;
margin: 0px 14px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li:last-child a{
margin-right:0;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
code, pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 10px;
color: #333333;
}
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 8.5px;
margin: 0px;
font-size: 11px;
line-height: 18px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
.footer h3 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.footer {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Forside" />
<title>Hjortefjellet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can center the content -->
</head>
<body>
<div class="wrapper"><!-- Opens the wrapper so we can contain and center everything -->
<img src="images/logo.png" width="702" height="87" alt="Your Logo" />
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE
<li>FAQ</li>
<li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
<div class="clear"></div>
<div class="box-wrap">
<h2>Velkommen til Hjortefjellet</h2>
<p class="text-box"><!-- PAGE TEXT -->
Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
<p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>
</div>
<div class="footer">
<h3>© Hjortefjellet.com 2014 | Siden benytter cookies</h3>
</div>
</div><!-- This closes the wrapper -->
</body><!-- Closes off the HTML Document -->
</html>
Thank you.

Like this
$(function() {
$(window).on('resize', function() {
$('.wrapper').css('margin-top', function() {
return ($(document).height() - $(this).height()) / 2;
});
}).trigger('resize');
});
FIDDLE

CSS can help you with display :
html {display:table}
body {
display:table-cell;
vertical-align:middle;/* will center content in middle , what you look for*/
/* vertical-align:top; pushes content to top */
/* vertical-align:bottom; pushes content to bottom */
}
DEMO
If you dislike to use table display , you may want to try the flex display:
html,body {
height:100%;
width:100%;
}
body {
display:flex;
}
.wrapper {
margin:auto;/* because of flex, auto margin is applied on both axis*/
}
DEMO

Develop Reference

JavaScript is the programming language of the Web.

Why does this menu act screwy in IE? SOS - javascript

Related

I can't get rid of this gap above HTML5 video (On mobile devices)

Trying to implement a simple slideshow - Wont work

My CSS broke when I fixed another issue, how do I fix my header?

CSS sidebar footer detection

Center website in the middle of the page from top to bottom

Categories

Resources