fixed - FORUM - Ning Creators Social Network
2024-03-28T10:29:50Z
https://creators.ning.com/forum/topics/feed/tag/fixed
Tip: Add a Simple CSS Only Fixed Footer
https://creators.ning.com/forum/topics/tip-add-a-simple-css-only-fixed-footer
2015-03-10T22:49:58.000Z
2015-03-10T22:49:58.000Z
⚡JFarrow⌁
https://creators.ning.com/members/JFarrow
<div><p>What we will be creating is something like this:</p>
<p><a href="http://codepen.io/JFarrow/full/yyRNxV" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558200?profile=original" alt="fixedfooter ning" width="100%" class="align-full"></a></p>
<p><a rel="nofollow" href="http://goo.gl/NDR6rf" target="_self">Download Text File with All Code</a></p>
<p>Add the Following HTML to your Below Footer HTML module(customize however you like with HTML):</p>
<div style="background-color: #ffe4e1; padding: 3px;">
<br>
<div class="arrow animated bounce">
<p><main><br> <div class="arrow animated bounce"><br> </main><br> <footer><br> <h1>Hi, im a fixed-Footer!</h1><br> </footer></p>
<p></p>
</div>
</div>
<p>Add the Following Code to your Design Studio CSS:</p>
<div style="background-color: #ffe4e1; padding: 3px;">
<br>
<br>
<pre>
@import url(<a href="http://fonts.googleapis.com/css?family=Raleway:400,300,700">http://fonts.googleapis.com/css?family=Raleway:400,300,700</a>);html { height: 100%; box-sizing: border-box;}body { height: 100%; font-family: "Raleway", sans-serif; color: #F5F3EC; background: #333; margin: 0px; padding: 0px;}main { z-index: 1; position: relative; height: 100%; background: url("http://goo.gl/87Onyp") no-repeat scroll center center/cover transparent; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8);}footer { position: relative; z-index: -2; height: 300px; background: none repeat scroll 0% 0% #31353A; font-size: 12px; color: #CCC; text-align: center;}footer h1 { position: fixed; z-index: 1; left: 50%; bottom: 110px; margin-left: -400px; width: 800px; list-style: outside none none; text-align: center; font-weight: bold; color: #FFF; font-size: 2.125rem; }@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); transform: translateY(-15px); }}@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }}@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); }}.arrow { position: absolute; bottom: 50px; left: 50%; margin-left: -20px; width: 20px; height: 20px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain;}.bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite;}
</pre>
</div></div>
Tip: Floating Ning Bar
https://creators.ning.com/forum/topics/tip-floating-ning-bar
2012-03-30T01:03:46.000Z
2012-03-30T01:03:46.000Z
Ron
https://creators.ning.com/members/Ron
<div><p>Hi all NCs,</p>
<p>Make your Ning bar follow by fixing it in its position. Similar to the sites here:</p>
<p><a rel="nofollow" href="http://www.factface.me/">http://www.factface.me/</a></p>
<p><a rel="nofollow" href="http://www.iyoume.net/">http://www.iyoume.net/</a></p>
<p>Add this to your CSS Code</p>
<div style="width: 650px; background: #ffffcc; padding: 5px;"><code style="border: none; margin-left: 0px;">#xn_bar { position: fixed !important; top:0;left:0; z-index: 9999; }</code></div>
<p> </p>
<p><strong><br /></strong></p>
<p><strong>Update:</strong>If these changes made your header or ads above overlap or cutoff, apply some top margin to your header CSS:</p>
<div style="width: 650px; background: #ffffcc; padding: 5px;"><code style="border: none; margin-left: 0px;">#xg_head { margin-top:100px !important; }</code></div>
<p> </p>
<p>If you have a layout that has the navigation tabs above header..</p>
<div style="width: 650px; background: #ffffcc; padding: 5px;"><code style="border: none; margin-left: 0px;">#xg_navigation { margin-top:100px !important; }</code></div>
<p> </p>
<p>or if you have an ad above header box</p>
<div style="width: 650px; background: #ffffcc; padding: 5px;"><code style="border: none; margin-left: 0px;"><span>.xj_ad_above_header</span> { margin-top: 100px !important; }</code></div>
<p> </p>
<p>Adjust the margin top value pixel (<strong>100</strong>px) accordingly..</p>
<p>cheers.</p>
</div>