FAB Toggle hamburger to x onclick. HTML/CSS/JScript - css

Am having some trouble with toggling a FAB from hamburger to x.
The FAB has one primary icon, & three secondary icons. Clicking the primary icon will toggle the secondary icons vertically, & it should also toggle the animation from hamburger to x at any click within the primary icon.
Currently, my code does not toggle the animation from hamburger to x if a user were to precisely click on either of the three hamburger lines.
I do hope someone is willing to help explain where I have gone wrong, coz it just feels so close but I'm not able to figure out where my mistake is.
Tutorial Credits:
Tran Anh Tuat
w3newbie
I am new to coding & my codes below are the combination of my efforts from studying tutorials from the above links. Will be grateful for any & all help. Thank you in advance!
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen"></span>
<span class="line middleRed"></span>
<span class="line bottomBlue"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Intention:</h3>
<ol>
<li>Anim1: Toggle <strong>secFabOrange</strong> from <strong>priFabWhite</strong> on click.</li>
<li>Anim2: Hamburger to x.
<li><mark>Anim3: Toggle Anim1 & Anim2 <strong>from any point within priFabWhite</strong> on click.</mark></li>
</ol>
<br>
<h3>Problem with Current Code:</h3>
<ul>
<li>For point 3, my code toggles Anim1 & Anim2 <strong>only when white portion of priFabWhite is clicked</strong></li>
<li>If user <strong>precisely clicks</strong> either of the three hamburger lines (green, red, blue), <strong>only Anim1 is triggered</strong>.</li>
</ul>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>


Managed to find a solution for the problem. Added class avoid-clicks in html and css.
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
.avoid-clicks {
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen avoid-clicks"></span>
<span class="line middleRed avoid-clicks"></span>
<span class="line bottomBlue avoid-clicks"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Solution:</h3>
<ol>
<li>HTML: Added <strong>avoid-clicks</strong> into each span class for priFabWhite button in lines 30-32.</li>
<li>CSS: Defined <strong>avoid-clicks</strong> in lines 123-125.
</ol>
<br>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>

Related

Why is my image not displaying and how could I increase the room given also my animations don't work as well

Project Link
I'm trying to get my background image to be visible but it doesn't appear, Also my css animations don't work as well any information on how to correct this?
.bg-image {
/* The image used */
background-image: url("https://i.postimg.cc/Hn0vxz91/Bridge.jpg");
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
object-fit: cover;
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
body{
background-color:#28282B;
}
/* Style the links inside the pill navigation menu */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Change the color of links on mouse-over */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
pulse a:hover{
animation: pulse 1s infinite;
animation-timing-function: linear;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1);
100% { transform: scale(1); }
}
}
/* Style the container with a rounded border, grey background and some padding and margin */
.container {
border: 1px solid #ccc;
background-color: #eee;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
}
/* Clear floats after containers */
.container::after {
content: "";
clear: both;
display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container img {
float: left;
margin-right: 20px;
border-radius: 50%;
}
/* Increase the font-size of a span element */
.container span {
font-size: 20px;
margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */
#media (max-width: 500px) {
.container {
text-align: center;
}
.container img {
margin: auto;
float: none;
display: block;
}
}
.checked {
color: orange;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: white;
}
#star{
background-color:#28282B;
}
.container{
background-color:#28282B;
}
.center {
background-color:white;
}
<header>
<title> Portfoilo</title>
<nav id="navbar">
<div class="pill-nav">
<div class="pulse">
<a class="active" href="#welcome-section">Home</a>
Projects
Certifications</nav> </div>
</div>
</header>
<main><section>
<div class="bg-image"></div>
<div class="bg-text">
<h1>I Am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</section>
<section id="welcome-section">
<h1 id="practice"> Welcome to My Practice Portfolio</h1></section>
<p>This is my practice portfolio to fune tune my skills when I am readyu to showcase my skills to the web I will link it to the actual one when it's ready and I am ready to share on the web thank you for reading this messgae.</p>
<section id="projects">
Tribute Page
Technical Documentation
</section>
<section id="Certifications">
Certifications</section>
</main>
<body>
<div class="container">
<img src="https://i.pinimg.com/originals/21/45/47/2145477174ea52cd79758af817b905b9.jpg" alt="Avatar" style="width:90px">
<p><span>Julie Jacobs.</span> CEO at Mighty Schools.</p>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="container">
<img src="https://www.byrdie.com/thmb/fLsxKLnkeZWgt54cWlUCw8ya1KE=/1716x1716/smart/filters:no_upscale()/Screen-Shot-2020-08-31-at-2.57.48-PM-ab7152b68d9042838d10c0ff58f8d3bf.jpg" alt="Avatar" style="width:90px">
<p><span >Rebecca Flex.</span> CEO at Company.</p>
<p>No one is better than John Doe</p>
<div id="star">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</body>
<footer>
<!-- Add icon library -->
<div class="card">
<img src="https://i.guim.co.uk/img/media/9bb29e1304526b5aeb6378f485f16bd5310dff9e/0_236_4500_2700/master/4500.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=b87889efa83846281e306c50ef9370db" alt="John" style="width:100%">
<h1 class="contact">John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<i class="fa fa-dribbble"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-facebook"></i>
<p><button>Contact</button></p>
</div>
</footer>
I'm trying to get my image to display while having a shade of the background color add effect to the image and I have css animations that don't work any information on how to fix all that? So they both could become visible also the card section how to make one portion of it white.

Your background image is working fine for me right now.
About the animation; You mean div class pulse right?
Put <nav> inside <body> and see if it works or not.

Parent overflow hidden with absolute children

Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;

I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>

Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ

Vertically aligning content of a div

I know this is a common question but I'm sure I'm just missing something obvious here. I'm trying to get the fontawesome icon to vertically align in the middle of the parent div, but it just keeps sitting at the top.
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>

I'll refer you to here, which explains 1) your common question and 2) how to actually vertically align.
Summary: vertical align doesn't work the way you think it does, and you have to use other methods (easily found online) to vertically align.
You can also look into using flex-box or hacks already posted on SO.

Because the div is hidden using display:none the property needs to be changed to display:table and then the child div should have the property display:table-cell.
function spinner() {
$("#spinner").css("display", "table");
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
border: 10px solid red;
color: yellow;
display: table-cell;
height: 100%;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>

There is two common techniques that I know of.
Use the table method below.
Sometimes making your element to display as table creates a headache in responsive website and in that case you can use the transform:translate technique.
#spinner div {
position: relative;
}
#spinner .fa-spinner{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
function spinner() {
$("#spinner").show();
}
#spinner {
display: none;
height: 100%;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 100%;
z-index: 99999;
}
#spinner div {
color: yellow;
border: 10px solid red;
height: 100%;
vertical-align: middle;
display: table;
width: 100%;
}
#spinner .fa-spinner{
display: table-cell;
vertical-align: middle;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
</head>
<body>
<div id="spinner">
<div>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
</div>
<button type="button" onclick="spinner()">
Spinner
</button>
</body>
</html>

Positioning absolute div below relative div

I am trying to develop a HTML5 app for mobile.
The layout is pretty basic header,content.
Header (red rectangle),content (green rectangle) are absolute divs.
The content must be scrollable if the height is bigger than the screen.
My problem begin when I'am trying to have the scrollbar on the orange rectangle div only (and not on orange and blue rectangle).
The orange rectangle div must begin at the end of the blue rectangle div and end at the end of the screen. The height of blue rectangle div is unknow and can change.
Actually blue and orange rectangle divs are correctly placed but the scrollbar is not positionned where I want.
So if I try to move the scrollbar with absolute positionning on orange rectangle div, it's overlap the blue rectangle div, if I use relative div to wrap the orange rectangle, the height of the wrapper equal zero cause of absolute children or the div run out of window and is unscrollable.
If someone has a solution, It will be nice.
EDIT 1 :
Here is the html and css code.
html :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="lib/font-awesome/4.3.0/css/font-awesome.min.css">
<title>YAOSWA</title>
</head>
<body>
<header class="header_no_back_button" id="header" ng-controller="HeaderCtrl" ng-show="getShowHeader()">
<span class="header_icon pull-left ng-hide" ng-show="getShowBackButton()">
<a href="#home">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span id="headertitle" class="pull-left ng-binding">
YAOSWA
</span>
<span class="header_icon pull-right" ng-show="getShowAboutButton()">
<a href="#about">
<i class="fa fa-info-circle"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="getShowSettingsButton()">
<a href="#settings">
<i class="fa fa-cog"></i>
</a>
</span>
</header>
<!-- ngView: -->
<div class="content main_content ng-scope" id="content" ng-view="" afkl-image-container="">
<div class="home_template ng-scope">
<div class="view container">
<div ng-hide="errorOverlay()">
<div class="weather_header" ng-show="currentWeather.city && currentWeather.country">
<div class="weather_header_wrapper">
<div>
<span class="current_weather_location ng-binding">New York / US</span>
</div>
<div class="separator">
<span></span>
</div>
<div class="weather_chooser">
<span class="weather_type ng-binding">Hourly Weather</span>
<span class="header_icon pull-left" ng-show="!isMinTab()">
<a ng-click="prevTab()">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="!isMaxTab()">
<a ng-click="nextTab()">
<i class="fa fa-chevron-right"></i>
</a>
</span>
<div class="clear_both"></div>
</div>
</div>
</div>
<div class="tab_list">
<div class="tab ng-hide" ng-show="isActiveTab(0)">
....
</div>
<div class="tab" ng-show="isActiveTab(1)">
<div class="weather_data_wrapper">
<!-- ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_803 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">11:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">broken clouds</span>
<span class="hourly_weather_temp ng-binding">294.2 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_804 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">14:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">overcast clouds</span>
<span class="hourly_weather_temp ng-binding">297.91 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lazy-image.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css :
#font-face {
font-family: 'UbuntuM'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-M.ttf'); /*URL to font*/
}
#font-face {
font-family: 'UbuntuR'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-R.ttf'); /*URL to font*/
}
#font-face {
font-family: 'ubuntu-light'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/ubuntu-light.woff'); /*URL to font*/
}
* {
font-size:1em;
box-sizing: border-box;
}
*:after, *:before {
box-sizing: border-box;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
color:#5c5c5c;
font-family: 'UbuntuR';
}
.clear_both {
clear:both;
}
.mediumfont {
font-family: 'UbuntuM';
}
header {
box-sizing: border-box;
height:60px;
line-height:45px;
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#5c5c5c;
padding:5px;
border-bottom: 10px solid #d7d7d7;
}
#headertitle,
.weather_header {
font-family: 'ubuntu-light';
padding-left: 10px;
font-size:20px;
line-height:42px;
}
.header_icon > a{
font-size: 25px;
padding: 0 7px;
color: #5c5c5c;
}
#content {
box-sizing: border-box;
position: absolute;
top:60px;
bottom:0px;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#000000;
overflow-y: auto;
padding:5px;
}
#content .tab {
overflow: hidden;
position:relative;
margin:5px;
}
#content .tab_list {
/*
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
*/
}
#content .tab,
.weather_data_wrapper {
/*position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
*/
}
/*
footer {
height:30px;
line-height:30px;
text-align:center;
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:red;
padding:5px;
}
*/
.about_logo_wrapper {
text-align: center;
margin-top:10px;
}
.about_logo_wrapper > img {
width:33%;
height:auto;
display:inline-block;
}
.about_text_wrapper {
text-align:center;
}
.about_title {
display: block;
margin: 10px;
font-size: 1.5em;
margin-bottom: 2px;
}
.about_template ul {
list-style: none;
padding:0;
}
.about_template ul li{
margin:5px;
}
.about_desc {
margin-top:35px 0px;
}
#errorOverlay,
#loadingOverlay {
background-color:rgba(255, 255, 255, 0.5);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:100
}
.error_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100%;
height:10%;
margin-left: -50%; /*half width*/
margin-top: -5%; /*half height*/
}
.loading_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100px;
height:100px;
margin-left: -50px; /*half width*/
margin-top: -50px; /*half height*/
}
img {
max-width:100%;
max-height:100%;
}
/*
.hourly_weather_date_day,
.daily_weather_date_day,
.hourly_weather_desc,
.daily_weather_desc,
.detail_info_weather
*/
.hourly_weather_desc,
.daily_weather_desc {
font-size:0.75em;
}
.weather_data,
.detail_info_weather,
.summary_info_weather {
color: #FFFFFF;
}
.hourly_weather > .detail_info_weather,
.daily_weather > .detail_info_weather
{
display:none;
}
.hourly_weather.show_weather_detail > .detail_info_weather,
.daily_weather.show_weather_detail > .detail_info_weather
{
display:block;
}
.weather_data {
padding: 5px;
}
.hourly_weather.weather_data,
.daily_weather.weather_data
{
margin-bottom:5px;
}
.current_weather_desc,
.hourly_weather_desc,
.daily_weather_desc {
text-transform: capitalize;
}
.detail_temp_min_max_group {
display:inline-block;
}
.detail_icon {
height:1em;
}
.detail_icon_bkg {
background-size: 18px;
padding-left:20px;
background-repeat: no-repeat;
background-position: left center;
}
.detail_icon_sunrise_bkg {
background-image:url(/img/details_icon/icon_sunrise.svg);
}
.detail_icon_sunset_bkg {
background-image:url(/img/details_icon/icon_sunset.svg);
}
.detail_icon_temp_bkg {
background-image:url(/img/details_icon/icon_temp.svg);
}
.detail_icon_temp_min_max_bkg {
background-image:url(/img/details_icon/icon_temp_min_max.svg);
}
.detail_icon_pressure_bkg {
background-image:url(/img/details_icon/icon_pressure.svg);
}
.detail_icon_humidity_bkg {
background-image:url(/img/details_icon/icon_humidity.svg);
}
.detail_icon_cloud_bkg {
background-image:url(/img/details_icon/icon_cloud.svg);
}
.detail_icon_rain_bkg {
background-image:url(/img/details_icon/icon_rain.svg);
}
.detail_icon_wind_orientation_bkg {
background-image:url(/img/details_icon/icon_wind_orientation.svg);
}
.detail_icon_wind_speed_bkg {
background-image:url(/img/details_icon/icon_wind_speed.svg);
}
.summary_info_current_weather {
text-align:center;
}
.current_weather_logo {
width: 50%;
display:inline-block;
}
/*black*/
.weather_data.weather_200,
.weather_data.weather_201,
.weather_data.weather_202,
.weather_data.weather_210,
.weather_data.weather_211,
.weather_data.weather_212,
.weather_data.weather_221,
.weather_data.weather_230,
.weather_data.weather_231,
.weather_data.weather_232,
.weather_data.weather_900,
.weather_data.weather_901,
.weather_data.weather_902,
.weather_data.weather_903,
.weather_data.weather_904,
.weather_data.weather_905,
.weather_data.weather_906,
.weather_data.weather_950,
.weather_data.weather_951,
.weather_data.weather_952,
.weather_data.weather_953,
.weather_data.weather_954,
.weather_data.weather_955,
.weather_data.weather_956,
.weather_data.weather_957,
.weather_data.weather_958,
.weather_data.weather_959,
.weather_data.weather_960,
.weather_data.weather_961,
.weather_data.weather_962
{
background-color:#000000;
}
/*blue*/
.weather_data.weather_300,
.weather_data.weather_301,
.weather_data.weather_302,
.weather_data.weather_310,
.weather_data.weather_311,
.weather_data.weather_312,
.weather_data.weather_321,
.weather_data.weather_500,
.weather_data.weather_501,
.weather_data.weather_502,
.weather_data.weather_503,
.weather_data.weather_504,
.weather_data.weather_511,
.weather_data.weather_520,
.weather_data.weather_521,
.weather_data.weather_522,
.weather_data.weather_531,
.weather_data.weather_600,
.weather_data.weather_601,
.weather_data.weather_602,
.weather_data.weather_611,
.weather_data.weather_621
{
background-color:#55AAFF;
}
/*gray*/
.weather_data.weather_701,
.weather_data.weather_711,
.weather_data.weather_721,
.weather_data.weather_731,
.weather_data.weather_741,
.weather_data.weather_751,
.weather_data.weather_761,
.weather_data.weather_762,
.weather_data.weather_771,
.weather_data.weather_781,
.weather_data.weather_802,
.weather_data.weather_803,
.weather_data.weather_804
{
background-color:#808080;
}
/*yellow*/
.weather_data.weather_800,
.weather_data.weather_801
{
background-color:#E0B000;
}
/*night*/
.weather_data.night {
background-color:#41403b;
}
.daily_weather_logo,
.hourly_weather_logo {
width: 100px;
display:inline-block;
}
.weather_header {
padding:0px;
position: relative;
}
.weather_header_wrapper {
margin:5px;
background-color:#d7d7d7;
}
.weather_header_wrapper > div {
text-align:center;
}
.row_weather > div {
text-align:center;
}
.row_weather {
display: table;
width:100%;
table-layout: fixed;
}
.row_weather > div span {
display: inline-block;
width:100%;
}
.row_weather [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
.align-left {
text-align:left;
}
.weather_data .separator
{
margin-top: 10px;
padding-bottom: 10px;
}
.separator {
text-align:center;
line-height: 1px;
height: 1px;
position: relative;
background-color:transparent;
}
.separator > span {
display: inline-block;
border-top: 1px solid #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 10%;
left: 10%;
}
.weather_type {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.weather_chooser {
position:relative;
}
.container-centered {
height: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container-centered:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.elem-centered {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}

I don't find a correct answer with html and css.
But javascript do the job. Just need to calculate the height of the header and add a "top" to the absolute div.

Positioning problems with internet explorer (basic CSS)

I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.

What version of IE are you using? Your page looks fine on IE10.
I can't help you if you are running an older version, but have a look at this :
Imitate CSS3 transition in IE?
-webkit-transition won't work on IE.

Resources