I've got a problem with my sticky header not sticky in the fullpage.js environment.
I've got a site where I did get it to work but the way it worked can't be correct because it's full of errors and bad coded pieces.
Now Question is do I look at the css part for the fixed position or does my problem finds itself in the javascript.
Code:
<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
nav.addClass('fixed-header');
}
else {
nav.removeClass('fixed-header');
}
});</script>
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var scrolldiv = $(this).attr('href');
$(scrolldiv).animatescroll({padding:50});
});
});
</script>
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: fixed;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
/*StickyHeaderNavigationMenu*/
header{position:fixed;bottom:0;z-index:99900; width:100%;
}
.fixed{
position: fixed;
bottom:0; left:0;
width: 100%;
z-index:10000; }
.fixed-header {
position:fixed;
top:0px; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background:#36A8B5;
postion:fixed;
z-index:10000;
bottom:0px;
left:0;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:center;
width:100%;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 35px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
<header>
<div class="header">
<nav id="main-navigation">
<ul>
<li>Schools</li>
<li>Gallery</li>
<li>About Us</li>
<li>About Us</li>
<li>Snorkeling</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="fullpage">
<div class="section " id="section0">
<div class="layer2"></div>
<div class="layer">
<h1>Fixed elements</h1>
<p>Create your own headers and footers</p>
</div>
<video autoplay loop muted controls id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1"> <h1>We provide the best high level snorkel gear for great value!</h1></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"><h1>Make your own great experience and enjoy New Zealand’s unique underwater Sea Life!</h1></div>
<div class="slide" id="slide4"><h1>After a day on the beach, relax in our Garden Café and Restaurant and recharge your batteries with some awesome food to your liking.
Your adventure starts here!</h1></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"><h1>
Not a strong swimmer? – No worries, we offer:<br/>
<ul style:"list-style-type:none">
<li> 5 mm wetsuits – fitted to your needed size</li>
<li> masks, snorkels, weight belts, fins</li>
<li> optical masks available</li>
</div>
<div class="slide" id="slide7"></div>
<div class="slide" id="slide8"></div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
I've added other pieces of the side to show the hierarchy in the section and to make it scrollable.
Related
I would like to know how to change the content of a div when I click on the menu
Currently it looks like this :
There is my css and html code :
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
#div_profil {
display: block;
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
display: none;
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script type="text/javascript" src="javascript/script.js"></script>
</body>
</html>
I would like that when I click on one of the tabs of the menu, the div displayed be replaced by another div.
I tried to use some javascript code but this doesn't work.
What should I use to achieve what I want?
Thanks for your reply, have a good day.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css"/>
<style>
body{
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global{
}
/* CADRE 1 */
#cadre1{
float: left;
width: 250px;
}
#cadre1 span{
color : #33A7FF;
}
/* CADRE 2 */
#cadre2{
color : #2370AB;
}
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu li{
display:block;
position:relative;
background-color: #2370AB;
}
#menu li ul li{
background-color: white;
text-align:center;
}
#menu ul li{
display:inherit;
border-radius:0;
}
#menu ul li:hover{
border-radius:0;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul{
max-height:15em;
}
#menu a{
display:block;
padding:8px 32px;
color:#fff;
}
#menu ul a{
padding:8px 0;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
/* CADRE 3 */
#div_profil{
display: block;
height: 625px;
background-color : white;
overflow: auto;
}
#div_experience{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_projet{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
#div_contact{
display: none;
height: 625px;
background-color : white;
overflow: auto;
}
/* FOOTER */
#footer{
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
</style>
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar"/>
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" onclick="div2('div_experience')">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5" id="div_profil" >
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
<script>
function div2(name)
{
document.getElementById("div_profil").style.display="none";
document.getElementById("div_experience").style.display="none";
document.getElementById("div_projet").style.display="none";
document.getElementById("div_contact").style.display="none";
document.getElementById(name).style.display="block";
}
</script>
</body>
</html>
Here a quick answer I made up... jsfiddle
HTML
<a id='1' onclick='myFunction("1");'>Click me 1</a><br/>
<a id='2' onclick='myFunction("2");'>Click me 2</a><br/>
<a id='3' onclick='myFunction("3");'>Click me 3</a><br/>
<a id='4' onclick='myFunction("4");'>Click me 4</a><br/>
<div id='addText'>
</div>
Javascript
<script>
function myFunction(id){
x = document.getElementById("addText");
if(id == 1){
x.innerHTML = 'Hello'
x.style.color = "red";
} else if(id == 2){
x.innerHTML = 'Hi'
x.style.color = "red";
} else if(id ==3){
x.innerHTML = 'Option 3'
x.style.color = "red";
}else{
x.innerHTML = 'Goodbye'
x.style.color = "red";
}
}
</script>
I left all the styling for you, if you dont plan on having many options this solution will work fine.
You almost there, now you need to add some flag related to any container div with any link that should point to corresponding div, so eg:
// if you have you markup html with multiple links try this
<ul>
<li>My Profile</li>
<li>My Experience</li>
</ul>
<div>
<div class="content active" id="div_profile">Show you profile here</div>
<div class="content" id="div_experience">Show your experience here</div>
</div>
So then you need to add some JS code to do the trick, this code will do the trick
var links = document.getElementById('menu').getElementsByTagName('a');
var lastShownDiv = getActiveDiv();
for(var i = 0; i < links.length; i++) {
var currentLink = links[i];
currentLink.addEventListener('click', function(event){
var link = this;
var targetDiv = link.getAttribute('data-url');
if (lastShownDiv) {
removeClassName(lastShownDiv, 'active');
}
lastShownDiv = document.getElementById(targetDiv);
addClassName(lastShownDiv, 'active');
}, false);
}
function addClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
classlists.push(classname);
element.className = classlists.join(' ');
}
function removeClassName(element, classname) {
if (!element) {
return;
}
var classlists = element.className.split(' ');
var indexOfClassName = classlists.indexOf(classname);
if (indexOfClassName > -1) {
classlists.splice(indexOfClassName, 1);
}
element.className = classlists.join(' ');
}
function getActiveDiv() {
var actives = document.getElementsByClassName('active');
for(var i = 0; i < actives.length; i++) {
return actives[i];
}
}
body {
background-color: #555657;
margin: 20px;
}
/* CADRE PARENT */
#global {}
/* CADRE 1 */
#cadre1 {
float: left;
width: 250px;
}
#cadre1 span {
color: #33A7FF;
}
/* CADRE 2 */
#cadre2 {
color: #2370AB;
}
#menu,
#menu ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
#menu li {
display: block;
position: relative;
background-color: #2370AB;
}
#menu li ul li {
background-color: white;
text-align: center;
}
#menu ul li {
display: inherit;
border-radius: 0;
}
#menu ul li:hover {
border-radius: 0;
}
#menu ul li:last-child {
border-radius: 0 0 8px 8px;
}
#menu ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu li:hover ul {
max-height: 15em;
}
#menu a {
display: block;
padding: 8px 32px;
color: #fff;
}
#menu ul a {
padding: 8px 0;
}
#menu li:hover a,
#menu li li:hover a {
color: #000;
}
/* CADRE 3 */
.content {
display: none;
}
.content.active {
display: block;
}
#div_profil {
height: 625px;
background-color: white;
overflow: auto;
}
#div_experience {
height: 625px;
background-color: white;
overflow: auto;
}
#div_projet {
height: 625px;
background-color: white;
overflow: auto;
}
#div_contact {
height: 625px;
background-color: white;
overflow: auto;
}
/* FOOTER */
#footer {
position: fixed;
bottom: 20px;
background-color: #2370AB;
text-align: center;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>portfolio FIEVEZ Clément</title>
<link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!--CADRE PRINCIPAL-->
<div class="row" id="global">
<!--INFO BASIQUE-->
<div class="col-sm-3" id="cadre1">
<img src="images/myAvatar.png" alt="avatar" id="avatar" />
<p><span>Nom :</span> FIEVEZ</p>
<p><span>Prénom :</span> Clément (René)</p>
<p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
<p><span>Lieu de naissance :</span> DENAIN (059)</p>
<p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
</div>
<!--MENU-->
<div class="col-sm-3" id="cadre2">
<ul id="menu">
<li>Profil
</li>
<li><a id="btn_experience" href="#Experience" data-url="div_experience">Expérience</a>
</li>
<li>Projets
<ul>
<li>Projet 1</li>
<li>Projet 2</li>
<li>Projet 3</li>
<li>projet 4</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<!--CADRE CHANGEANT-->
<div class="col-sm-5 content active" id="div_profil">
<p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
</p>
</div>
<div class="col-sm-5 content" id="div_experience">
<p>div experience</p>
</div>
<div class="col-sm-5 content" id="div_projet">
<p>div projet</p>
</div>
<div class="col-sm-5 content" id="div_contact">
<p>div contact</p>
</div>
</div>
<footer class="col-sm-12 content" id="footer">
<div>
<p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
</div>
</footer>
</body>
</html>
The code above, is your code with some updates, I hope this help you to solve your problem.
You could avoid to use Javascript and try a pure css approach using the :target pseudoclass
As you can see, all the content is already inside the document and the main functionality is preserved even if you don't rely on Javascript and /or CSS (without them the page would still work, thanks to the navigation links with a fragment identifier as their href attributes.
Codepen demo
Markup
<nav role="complementary">
<ul role="tablist">
<li role="tab" aria-controls="cnt1" id="tab1" aria-selected="true">
Content 1</li>
<li role="tab" aria-controls="cnt2" id="tab2" aria-selected="false">
Content 2</li>
<li role="tab" aria-controls="cnt3" id="tab3" aria-selected="false">
Content 3</li>
<li role="tab" aria-controls="cnt4" id="tab4" aria-selected="false">
Content 4</li>
</ul>
</nav>
<main>
<section id="cnt1" aria-hidden="false" role="tabpanel" aria-labelledby="tab1">
<h2>Content 1</h2>
<p>This is a lorem ipsum</p>
</section>
<section id="cnt2" aria-hidden="true" role="tabpanel" aria-labelledby="tab2">
<h2>Content 2</h2>
<p>I am the content of link #2</p>
</section>
<section id="cnt3" aria-hidden="true" role="tabpanel" aria-labelledby="tab3">
<h2>Content 3</h2>
<p>Here's another content</p>
</section>
<section id="cnt4" aria-hidden="true" role="tabpanel" aria-labelledby="tab4">
<h2>Content 4</h2>
<p>And that's all folks!</p>
</section>
</main>
CSS (relevant)
body { display: flex; }
main {
flex: 1;
align-self: stretch;
position: relative; }
ul { list-style: none; }
nav { align-self: flex-start; }
[role="tabpanel"] {
position: absolute;
transition: .25s opacity;
background: #fff;
padding: 0 20px;
left: 0; right: 0; top: 0; bottom: 0;
opacity: 0; }
[role="tabpanel"]:first-of-type { opacity: .99; }
[role="tabpanel"]:target { opacity: 1; }
With a simple CSS transition you can switch the content appearance.
Note that I've inserted some role and aria-* attributes: in fact this kind of navigation is really close to a tab/tabpanels widget.
Even if javascript is not used here, it could help a lot anyway to increase the accessibility of the content: e.g. you could attach a transitionend event, detect the visible section (just look at its opacity value) and change some aria-* attributes so to make the life easier for people who use assistive technology.
Javascript
(only for accessibility purpose)
var _gcs = window.getComputedStyle;
var _sections = document.querySelectorAll('[role="tabpanel"]');
var _tabs = document.querySelectorAll('[role="tab"]');
var _setARIAAttributes = () => {
var currentHash;
/* set aria-hidden on panels */
[..._sections].forEach( ( s ) => {
var hidden = +( _gcs( s ).getPropertyValue( 'opacity' ) ) < 1;
s.setAttribute( 'aria-hidden', hidden);
if (!hidden) currentHash = s.id;
});
/* set aria-controls on tabs */
[..._tabs].forEach( ( t ) => {
var selected = t.getAttribute( 'aria-controls' ) === currentHash;
t.setAttribute( 'aria-selected', selected );
});
}
if (!!location.hash) { _setARIAAttributes() }
window.addEventListener('transitionend', () => { _setARIAAttributes(); });
I am using a jQuery plugin that enables a smoothscroll effect. However, the problem now is that the mousewheel doesn't move the scroll in the div. On my actual page, it does move but it moves the main page scroll along with it. What could be the causes of this? I'm not well versed with javascript, mainly html and css which is why this is such a pain for me and I end up using jquery stuff.
http://codepen.io/jzhang172/pen/dGpmoj
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
#import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
background: url('img/congruent_pentagon.png');
}
body{
margin:0px;
}
#wrapper{
height: auto;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
margin-top: 2em;
margin-bottom: 2em;
height: 700px;
background: transparent;
font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
}
a{
text-decoration: none;
}
.social{
display: inline-block;
position: relative;
width: 100%;
padding: 16px;
margin-bottom: 16px;
margin-right: 16px;
background-color: rgba(231, 231, 231, 0.6);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
}
nav{
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
}
nav ul li a:hover{
opacity: 0.7;
}
nav ul li a.email{
border-left: 50px solid #c9182c;
color: #c9182c;
}
nav ul li a.twitter{
border-left: 50px solid #00a0d1;
color: #00a0d1;
}
nav ul li a.facebook{
border-left: 50px solid #365998;
color: #365998;
}
nav ul li a.github{
border-left: 50px solid #4183c4;
color: #4183c4;
}
nav ul li a.google{
border-left: 50px solid #db4a39;
color: #db4a39;
}
nav ul li a.instagram{
border-left: 50px solid #634d40;
color: #634d40;
}
nav ul li a.tumblr{
border-left: 50px solid #34526f;
color: #34526f;
}
nav ul li a.scriptogram{
border-left: 50px solid #0088cc;
color: #0088cc;
}
nav ul li a.linkedin{
border-left: 50px solid #0e76a8;
color: #0e76a8;
}
.container{
width:100%;
text-align:center;
padding-top:20px;
padding-bottom: 20px;
}
.container h1{
font-family: 'EB Garamond', serif;
font-size:55px;
width:500px;
margin:0 auto;
border-top:1px solid black;
border-bottom:1px solid black;
font-weight:0px;
}
.container span{
width:100px;
height:300px;;
}
h2{
font-family: 'Lora', serif;
text-align:center;
font-size:25px;f
font-weight:normal;
color:#0B437D;
}
#headline{
font-size:10px;
}
span img{
height: 70px;
position: relative;
top: 10px;
}
.announcements{
width:500px;
height:500px;
min-height:500px;
background:rgba(152, 170, 179, 0.44);
border:1px solid #B1F6CB;
border-radius:20px;
padding-top:10px;
margin:0 auto;
}
.announcements h2{
font-size:20px;
font-family: 'Josefin Slab', serif;
font-weight:800;
background:#0B437D;
width:100%;
color:#F9F9F9;;
}
span.date{
font-family: 'Slabo 27px', serif;
}
span.important{
font-size:20px;
font-weight:800px;
color:red;
}
.sectionwrapper{
width:100%;
padding:50px;
margin:0 auto;
height:390px;
overflow:auto;
padding-top:0px;
position:relative;
}
span.new-policy{
background:#2184BF;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.news{
background:#168C4B;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.advisory{
background:#AD2626;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.patches{
background:#6126AD;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.description{
font-family: 'Lato', sans-serif;
font-size:14px;
}
.section a{
color:black;
}
.section a:hover{
color:#23A6D0;
transition:.1s ease;
}
a img{
height:40px;
width:40px;
margin-left:-60px;
margin-right:20px;
}
/*----------------------------------FOOTER ------------------ */
.bodywrapper{
margin:0 auto;
width:100%;
/*height:100vh; Removed for sticky footer*/
min-height:100%;
margin-bottom:-500px;
}
.bodywrapper:after{
content:"";
display:block;
height:500px;
}
#footer{
width:900px;
margin-top:20px;
height:470px;
background:rgb(230, 255, 237);
margin:0 auto;
padding:20px;
max-height:500px;
}
/*----------------------------------FOOTER ------------------ */
.location{
float:left;
height:180px;
max-width:180px;
}
#footer h1{
font-size:13px;
padding-top:5px;
width:100%;
height: 20px;
text-align:left;
font-family: 'EB Garamond', serif;
position:relative;
margin:0 auto;
text-decoration:italics;
font-weight:800px;
color:#06255F;
font:23px normal 'Ubuntu Condensed', sans-serif;
}
#first h1{
margin-left:100px;
}
#third h1{
margin-left:100px;
}
#footer .location ul{
width:100px;
}
#footer ul{
list-style:none;
padding-top:-20px;
font-size:14px;
width:200px;
margin:0 auto;
}
.location ul li{
margin-left:-35px;
}
#footer ul li a{
color:#737373;
font-family: 'Slabo 27px', serif;
font: 14px normal 'Ubuntu Condensed';
}
#footer ul li a:hover{
color:#067DFF;
}
#footer hr{
width:200px;
border-color:#194E54;
}
.footersection{
float:left;
width:100px;
}
.location#veryfirst{
width:150px;
max-width:150px;
height:100%;
}
.footersection#first{
width:400px;
max-width:500px;
}
.footersection#second{
width:200px;
min-width:200px;
}
.footersection#third{
width:400px;
}
.footersection#fourth{
width:160px;
height:220px;;
}
.footersection#fifth{
width: 660px;
font-family: 'Slabo 27px', serif;
padding-left: 100px;
/* font-family: 'EB Garamond', serif; */
font-size: 13px;
border-top: 1px solid black;
margin-top: 10px;
padding-top: 5px;
}
.footersection#sixth{
width:160px;
}
.footersection#second ul{
}
ul.cities{
padding-left: 20px;;
}
li b{
font-family: 'EB Garamond', serif;
font: 15px normal 'Ubuntu Condensed', sans-serif;
}
span.privacy{
color: #005AA9;
font-size: 14px;
margin-left: 10px;;;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bodywrapper">
<div class="container">
<h1><span><img src="img/logo.png"></span>!</h1>
</div>
<h2>!</h2>
<!--<div id="headline">
<p>I'm a message that is flown from left to right by a christmas helicopter</p>
</div>
-->
<div class="announcements">
<h2>!</h2>
<div class="sectionwrapper" id="container">
<div class="section">
<span class="date">12/20/15</span><br><span class="important">!</span>
<span class="new-policy"> New Policy </span>
<span class="description"> <b>Paid Week Time Off each Month</b> <br>Every month, choose any week for paid time off for that entire week. Spend time with your loved ones. Go travel som...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> <b>Merry Christmas and Happy New Year!</b> Daily current events posting will resume on January 11th. Read here about Christmas...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> It's been in the works for a while. We all know about it and it's finally about to happen. <b>We are opening up expansions in Toronto, Tokyo and Hirako.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/30/15</span><br><span class="important">!</span>
<span class="advisory"> Advisory </span>
<span class="description"> Winter Storm Golaith is making it's way across the East Coast. Please stay home if you feel you cannot make it or you don't want to chance it. <b>Stay safe.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/20/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/19/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/18/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/17/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/16/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/15/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
</div>
</div>
</div>
<div id="wrapper">
<nav>
<ul>
<li><a class="social tumblr" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
<li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
<li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
<li><a class="social instagram" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
</ul>
</nav>
</div>
</div>
<footer id="footer">
<div class="location" id="veryfirst">
<h1>LOCATION</h1>
<hr>
<ul>
<li><b>North America</b></li>
<ul class="cities">
<li>California</li>
<li>New York</li>
<li>Vienna</li>
<li>Wyoming</li>
</ul>
<li><b>Canada</b></li>
<ul class="cities">
<li>Montreal</li>
</ul>
<li><b>Asia</b></li>
<ul class="cities">
<li>Bali</li>
<li>Beijing</li>
<li>GuangZhou</li>
<li>Henan</li>
<li>South Korea</li>
<li>Tokyo</li>
</ul>
<li><b>Europe</b></li>
<ul class="cities">
<li>Italy</li>
<li>London</li>
<li>Paris</li>
<li>South Wales</li>
</ul>
<li><b>South America</b></li>
<ul class="cities">
<li>Argentina</li>
<li>Brazil</li>
<li>Peru</li>
</ul>
</div>
<div class="footersection" id="first">
<h1>PRODUCTS</h1>
<hr>
<ul>
<li>A-Class</li>
<li>P-Class</li>
<li>S-Class</li>
<li>Featured</li>
<li>Gear</li>
<li>Hiraku Edition</li>
<li>Limited</li>
<li>Miscellaneous</li>
<li>Network Protection</li>
</div>
<div class="footersection" id="second">
<h1>CONNECT</h1>
<hr>
<ul>
<li>Comments | Concerns</li>
<li>E-mail</li>
<li>Help|Support Articles</li>
<li>Help Desk</li>
<li>Phone (703) 473 4198</li>
</div>
<div class="footersection" id="third">
<h1>DOWNLOADS</h1>
<hr>
<ul>
<li>Wallpaper</li>
<li>Images</li>
<li>Videos</li>
</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li>Terms of Use</li>
<li>Policies</li>
<li>Events</li>
<li>Press Info</li>
<li>Investors</li>
</div>
<div class="footersection" id="fifth">
Copyright © 2015 Traceon Inc. All rights reserved. <span class="privacy">Privacy Policy | Terms of Use | Site Map</span>
</div>
Don't process wheel scroll if it's over that div. Replace this:
event.preventDefault();
... with this:
var target = event.originalEvent.target;
target = target && $(target).parents('.announcements')[0];
if (target)
return true;
event.preventDefault();
Sample here.
You need to handle the scrolling separately for that div. At the minute the issue is that you're calling event.preventDefault(); when you scroll on the window, and it's stopping the scroll event of the div from firing.
The target used on TweenMax.to() was always $window, however when scrolling on #container, the target should be #container itself.
So, determine which element should be used into TweenMax.to() is the key point.
Here is the code:
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
var target = $(event.originalEvent.target).parents('#container')[0];
if(!target) {
target = $window; // not scroll in #container
} else {
target = $(target); // create a jQuery object of #container
}
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = target.scrollTop(); // Replace $window with target
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to(target, scrollTime, { // Replace $window with target
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
Here is the Demo.
Actually my balise section is under my image, or I want to superpose them ?
#demo {
margin: 0;
max-width: 350px;
text-align:center;
}
h2 {
margin: 0px;
padding:0px;
}
section {
border:1px solid #eee;
padding: 20px;
margin-top:-370px;
}
.credit {
margin-top:0px;
}
<img src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 15px auto">
<p>Exclusive / July 15, 2015
<br/>Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
How can I do ?
Here is my jsfiddle: www.jsfiddle.net/kodjoe/ys484rpw/
I have given your image a class and set the image and demo section to position absolute with bottom 0
$('article').readmore({speed: 500});
#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px!important;}
.credit { margin-top:0px; }
.abs, #demo {position:absolute; bottom:0; max-width:350px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive / July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
I think you should watch " z-index " and I think if you round all of the elements in a single div and add 'position: absolute'. Sorry for my english i'm a beginner.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.
my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.