Comperi
closed #676,#666,#665,#681,#677,#687,#685,#684
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
body header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ff00ff;
|
||||
color: #006505;
|
||||
font-weight: 700;
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
transition: all 1s ease-in-out; }
|
||||
body header.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
margin: 0 25%; }
|
||||
body header ul {
|
||||
list-style: none; }
|
||||
body header ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
body section {
|
||||
width: 100%;
|
||||
padding: 200px 25%;
|
||||
box-sizing: border-box;
|
||||
color: #bfffc0;
|
||||
background-color: #00a0d2; }
|
||||
body footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
margin: 0 25%;
|
||||
background-color: white;
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
transition: all 1s ease-in-out; }
|
||||
body footer.relative {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin: 0; }
|
||||
body footer ul {
|
||||
list-style: none; }
|
||||
body footer ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
|
||||
/*# sourceMappingURL=element-position.css.map */
|
||||
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Element-Position</title>
|
||||
<style src="element-position.css"></style>
|
||||
<link rel="stylesheet"
|
||||
href="element-position.css"
|
||||
type="text/css">
|
||||
<script src="../../classes/classes.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="../element-position.js"
|
||||
type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<ul>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<footer id="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="contact"></span>
|
||||
Contact
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="top"></span>
|
||||
Top
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
var height = document.height;
|
||||
|
||||
class_By_Y_Position("header", "fixed", "relative", 0, 0, false);
|
||||
|
||||
class_By_Y_Position("footer", "relative", "fixed", 0, findPos(document.getElementById('footer'))[1], true);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
header {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: #ff00ff;
|
||||
color: #006505;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
width: 50%;
|
||||
margin: 0 25%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
width: 100%;
|
||||
padding: 200px 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
color: #bfffc0;
|
||||
background-color: #00a0d2;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
|
||||
margin: 0 25%;
|
||||
|
||||
background-color: white;
|
||||
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.relative {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user