|
|
| Line 26: |
Line 26: |
| | #top_menu_inside { | | #top_menu_inside { |
| | margin-left: 20px;*/ | | margin-left: 20px;*/ |
| − | }*/ | + | } |
| | | | |
| | | | |
| − | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | font-size: 100%;
| |
| − |
| |
| − | }
| |
| − | html { height: 101%; }
| |
| − | body { font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 62.5%; line-height: 1; padding-bottom: 65px; background-color: #fff ; }
| |
| − |
| |
| − | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
| |
| − | ol, ul { list-style: none; }
| |
| − |
| |
| − |
| |
| − |
| |
| − | h2 {
| |
| − | font-family: 'Capriola', Tahoma, Arial, sans-serif;
| |
| − | font-weight: normal;
| |
| − | font-size: 2.95em;
| |
| − | line-height: 1.2em;
| |
| − | letter-spacing: -.0.03em;
| |
| − | color: #383838;
| |
| − | margin-bottom: 16px;
| |
| − | }
| |
| − |
| |
| − | p { font-size: 1.7em; line-height: 1.45em; margin-bottom: 15px; color: #434343; }
| |
| − |
| |
| − | a { color: #5b77a4; text-decoration: underline; }
| |
| − | a:hover { color: #7d94bb; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | #content {
| |
| − | display: block;
| |
| − | background: #fff;
| |
| − | padding: 14px 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* top navigation */
| |
| − | #navigation {
| |
| − | width:100%;
| |
| − | display: block;
| |
| − | height: 35px;
| |
| − | background-color: #131313;
| |
| − | }
| |
| − |
| |
| − | #navigation ul { list-style: none; padding: 0px 7px; }
| |
| − |
| |
| − | #navigation ul li { display: inline; float: left; }
| |
| − | #navigation ul li a {
| |
| − | display: block;
| |
| − | padding: 0 8px;
| |
| − | color: #fff;
| |
| − | font-size: 1.1em;
| |
| − | text-decoration: none;
| |
| − | line-height: 35px;
| |
| − | font-weight: bold;
| |
| − | margin-right: 6px;
| |
| − |
| |
| − | }
| |
| − | #navigation ul li a:hover { color: #a8d6e7; }
| |
| − |
| |
| − | /* hidden fixed navigation */
| |
| − | #fixedbar {
| |
| − | display: none;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | width: 100%;
| |
| − | height: 80px;
| |
| − | background: rgba(0,0,0,0.85);
| |
| − | }
| |
| − |
| |
| − | #fixednav {
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | margin: 0 auto;
| |
| − | padding: 0px 25px;
| |
| − | }
| |
| − |
| |
| − | #fixednav li { }
| |
| − |
| |
| − | #fixednav li a {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | font-size: 1.25em;
| |
| − | font-weight: bold;
| |
| − | color: #96aed8;
| |
| − | line-height: 80px;
| |
| − | text-decoration: none;
| |
| − | padding: 0px 8px;
| |
| − | margin-right: 6px;
| |
| − | -webkit-transition: all 0.2s linear;
| |
| − | -moz-transition: all 0.2s linear;
| |
| − | transition: all 0.2s linear;
| |
| − | }
| |
| − |
| |
| − | #fixednav li a:hover {
| |
| − | color: #fff;
| |
| − | background: rgba(0,0,0,0.3);
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <div style="height:100px; background-color:red;">
| |
| − | header
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <nav id="fixedbar">
| |
| − | <ul id="fixednav">
| |
| − | <li><a href="#">Homepage</a></li>
| |
| − | <li><a href="#">About Us</a></li>
| |
| − | <li><a href="#">Community</a></li>
| |
| − | <li><a href="#">Staff Members</a></li>
| |
| − | <li><a href="#">Contact</a></li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − |
| |
| − | <div id="content">
| |
| − | <h2>Content headline</h2>
| |
| − | <p>Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>. Logo Icon freebie released by <a href="http://365psd.com/day/176/">Pontus Johansson</a>.</p>
| |
| − |
| |
| − | <p>I've used one adjective to describe myself. What is it? Professional. Yeah, like I'm going to spill coffee all over this $3,000 suit? Come on! It's not like envy, or even hungry!</p>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <nav id="navigation">
| |
| − | <ul>
| |
| − | <li><a href="#">Homepage</a></li>
| |
| − | <li><a href="#">About Us</a></li>
| |
| − | <li><a href="#">Community</a></li>
| |
| − | <li><a href="#">Staff Members</a></li>
| |
| − | <li><a href="#">Contact</a></li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − |
| |
| − | <p>It's so watery. And yet there's a smack of ham to it. George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the "OC Disorder." Dad would stage elaborate situations using a one-armed man to teach us lessons. I'd want to get in there and find some answers.</p>
| |
| − |
| |
| − | <h3>Another Top Heading</h3>
| |
| − | <p>These are my awards, Mother. From Army. The seal is for marksmanship, and the gorilla is for sand racing. I run a pretty tight ship around here. With a pool table? It's a gaming ship.</p>
| |
| − |
| |
| − | <p>Absolutely. And we're going to be here every day. I don't care if it takes from now till the end of Shrimpfest. Look at us, crying like a bunch of girls on the last day of camp.</p>
| |
| − |
| |
| − | <p>No borders, no limits… go ahead, touch the Cornballer... you know best? I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block! She wanted to look 48. I nearly airbrushed her into oblivion. Ended up checking "albino" on the form. I am going to my spin class. I thought you had vertigo.</p>
| |
| − |
| |
| − | <p>Well, obviously, I'm not a big guy. I'm not a Carl Weathers, par example. Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p>
| |
| − |
| |
| − | <h1>Last Section</h1>
| |
| − | <p>She calls it a Mayonegg. So Ann, the question is, do you want a man or a boy? I know how I would answer. No, she's in it. She's a contestant. It's sorta like an inner beauty pageant. Ah, there it is. I think I might have someone who's going to circumvrent the law.</p>
| |
| − |
| |
| − | <p>Perhaps an attic, shall I seek.</p>
| |
| − |
| |
| − | <p>George Michael I'm sure Egg is a very nice person. Buster's in what we like to call a light to no coma. In layman's terms, it might be considered a very heavy nap. There's unlimited juice? This party is gonna be off the hook.</p>
| |
| − | </div>
| |
| | | | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| − | $(document).ready(function(){
| |
| − | $('#navigation a, #fixedbar a').on('click', function(e) {
| |
| − | e.preventDefault();
| |
| − | });
| |
| − |
| |
| − | $(window).on('scroll',function() {
| |
| − | var scrolltop = $(this).scrollTop();
| |
| − | var topOfDiv = $('#navigation').position().top;
| |
| − | var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
| |
| | | | |
| − | if(scrolltop >= bottomOfDiv) {
| |
| − | $('#fixedbar').fadeIn(250);
| |
| − | }
| |
| − |
| |
| − | else if(scrolltop <= topOfDiv) {
| |
| − | $('#fixedbar').fadeOut(250);
| |
| − | }
| |
| − | });
| |
| − | });
| |
| | </script> | | </script> |
| | </html> | | </html> |