|
|
| (149 intermediate revisions not shown) |
| Line 6: |
Line 6: |
| | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| | <style media="screen" type="text/css"> | | <style media="screen" type="text/css"> |
| - | .cal { | + | |
| - | float:left;
| + | .navleft { |
| | + | position:fixed; |
| | + | color: #ffffff; |
| | + | margin-left:2.5%; |
| | + | margin-top:10%; |
| | + | text-align:center; |
| | + | font-size:3em; |
| | } | | } |
| | | | |
| - | .cal table { | + | .navleft table td { |
| - | text-align: center;
| + | padding:20px; |
| - | margin: 50px;
| + | font-color:#ffffff; |
| | } | | } |
| | | | |
| - | .rightnb {
| + | #lapr td:hover { |
| | + | font-color: #0000ff; |
| | + | } |
| | + | |
| | + | a { |
| | + | font-color:#000000; |
| | + | } |
| | + | |
| | + | #rightnb { |
| | float:right; | | float:right; |
| | + | width:70%; |
| | + | color:#fff; |
| | + | margin-top:-5%; |
| | } | | } |
| | | | |
| - | #demo_top_wrapper { margin:0 0 20px 0; }
| + | .day { |
| - | #demo_top { height:100px; padding:20px 0 0 0; }
| + | z-index:100; |
| - | #my_logo { font:70px Georgia, serif; }
| + | color:#fff; |
| - |
| + | margin:5%; |
| - | /* our menu styles */
| + | } |
| - | #sticky_nav_wrap { width:100%; height:50px; }
| + | |
| - | #sticky_cal { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
| + | |
| - | #sticky_navigation ul { list-style:none; margin:0; padding:5px; }
| + | |
| - | #sticky_navigation ul li { margin:0; padding:0; display:inline; }
| + | |
| - | #sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
| + | |
| - | #sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; }
| + | |
| | | | |
| - | </style>
| + | .day h2 { |
| - | <script>
| + | color:#fff; |
| - | $(function() {
| + | } |
| - |
| + | |
| - | // grab the initial top offset of the navigation
| + | |
| - | var sticky_cal_offset_top = $('#sticky_cal').offset().top;
| + | |
| - |
| + | |
| - | // our function that decides whether the navigation bar should have "fixed" css position or not.
| + | |
| - | var sticky_navigation = function(){
| + | |
| - | var scroll_top = $(window).scrollTop(); // our current vertical position from the top
| + | |
| - |
| + | |
| - | // if we've scrolled more than the navigation, change its position to fixed to stick to top,
| + | |
| - | // otherwise change it back to relative
| + | |
| - | if (scroll_top > sticky_cal_offset_top) {
| + | |
| - | $('#sticky_cal').css({ 'position': 'fixed', 'top':0, 'left':0 });
| + | |
| - | } else {
| + | |
| - | $('#sticky_cal').css({ 'position': 'relative' });
| + | |
| - | }
| + | |
| - | };
| + | |
| - |
| + | |
| - | // run our function on load
| + | |
| - | sticky_navigation();
| + | |
| - |
| + | |
| - | // and run it again every time you scroll
| + | |
| - | $(window).scroll(function() {
| + | |
| - | sticky_cal();
| + | |
| - | });
| + | |
| - |
| + | |
| - | });
| + | |
| - | </script>
| + | |
| | | | |
| | + | .day h1 { |
| | + | color:#fff; |
| | + | } |
| | | | |
| | + | .obj { |
| | + | text-transform:uppercase; |
| | + | } |
| | + | |
| | + | .ppl { |
| | + | } |
| | + | |
| | + | .lab { |
| | + | } |
| | + | |
| | + | .lab img { |
| | + | width:100px; |
| | + | height:100px; |
| | + | } |
| | + | |
| | + | .month { |
| | + | font-size:3em; |
| | + | float: center; |
| | + | padding:2.5%; |
| | + | text-align: center; |
| | + | } |
| | + | |
| | + | </style> |
| | | | |
| | | | |
| | </head> | | </head> |
| | <body> | | <body> |
| | + | |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
"
