如何在水平滾動時將菜單和頁腳保留在同一位置？
[英]How do I maintain my menu, and footer in the same place while horizontal scrolling?
問題描述
編輯/更新
我已經更新了代碼並修復了一些錯誤。 現在，我試圖將頁腳固定在底部，菜單不會居中，並且嘗試在頁眉和頁腳之間放置畫廊，而不會被頁眉剪切。 一切正常，直到我添加了水平滾動畫廊。
我正在嘗試實現布局：
- 頁眉頂部
- 一行菜單
- 內容/水平滾動圖庫中間
- 頁腳/社交圖標底部
請幫忙
/********************************** General **********************************/ body { font-family: 'Roboto', sans-serif; } #wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; } a { text-decoration:none; } /********************************** Heading **********************************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; height: 150px; position:fixed; } #logo { text-align: center; margin: 0; } h1 { font-family: 'Passion One', cursive; margin: 15px 0; font-size: 5em; font-weight: normal; line-height: 0.8em; } h2 { font-family: 'Comfortaa', cursive; font-size: em; margin: -5px 0 0; font-weight: normal; } /********************************** Navigatoin **********************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; position: fixed; } nav ul { list-style: none; margin: 0 10px; padding: 0; } nav li { display: inline-block; } nav a { font-weight: 800; padding: 15px 10px; } /********************************** Body **********************************/ #content { height: 100%; margin: 0 0 0 0; top: 0; } /********************************** Footer **********************************/ footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; position: fixed; } .social-icon { width: 20px; height: 20px; margin: 0 5px; } .fttext { text-align: center; } /********************************** Colors **********************************/ /* site body */ body { background-color: #C9BD7C; color: #5B0123; } /* green header */ header{ background: #5B0123; border-color: #5B0123; } /* nav background on mobile devices */ nav { background: #B41C42; } /* logo text */ h1, h2 { color: #fff; } /* links */ a { color: #C86347; } /* nav link */ nav a, nav a:visited { color: #fff; } /* selected nav link */ nav a.selected, nav a:hover { color: #F8D295; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet"> </head> <!-- content goes here--> <body> <header> <a href="index.html" id="logo"> <h1>Natalie Davis</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">Resume</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="content"> <div id="img-container"> <div class="picture_holder" style="width: 573px;"> <div class="picture" style="width: 543px;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt=""> <div class="captioning"> <div class="title"><a href="link">link</a> - Test caption and link</div> <div class="caption">stuff </div> </div> </div> </div> <div class="picture_holder" style="width: 1124px;"> <div class="picture" style="width: 1094px;"> <img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt=""> <div class="captioning"> <div class="caption"><i>CAPTION</i></div> </div> </div> </div> <div class="picture_holder" style="width: 382px;"> <div class="picture" style="width: 352px;"> <img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt=""> <div class="captioning"> <div class="caption"><i>CAPTION</i></div> </div> </div> </div> <div class="picture_holder" style="width: 439px;"> <div class="picture" style="width: 409px;"> <img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt=""> <div class="captioning"></div> </div> </div> <div class="picture_holder" style="width: 752px;"> <div class="picture" style="width: 722px;"> <img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&h=600" width="722" height="600" alt=""> <div class="captioning"></div> </div> </div> <div class="picture_holder" style="width: 1094px;"> <div class="picture" style="width: 1064px;"> <img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt=""> <div class="captioning"> <div class="caption"><i>CAPTION</i></div> </div> </div> </div> <div class="picture_holder" style="width: 1525px;"> <div class="picture" style="width: 1495px;"> <img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt=""> <div class="captioning"></div> </div> </div> <div class="picture_holder" style="width: 560px;"> <div class="picture" style="width: 530px;"> <img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt=""> <div class="captioning"></div> </div> </div> <!-- mousewheel java script --> <script type="text/javascript"> function handle(delta) { if (delta < 0) ScrollSmoothly(10, 10, 'right'); else if (delta > 0) ScrollSmoothly(10, 10, 'left'); else ; } function wheel(event) { var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta / 120; if (window.opera) delta = -delta; } else if (event.detail) { delta = -event.detail / 3; } if (delta) handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } var repeatCount = 0; function ScrollSmoothly(scrollPos, repeatTimes, direction) { if (repeatCount < repeatTimes) if (direction == 'right') window.scrollBy(20, 0); else window.scrollBy(-20, 0); else { repeatCount = 0; clearTimeout(cTimeout); return; } repeatCount++; cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10); } /* Initialization code. */ if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel; </script> <style type="text/css"> #img-container { width: 6450px; } #img-container #text { float: left; width: 675px; } #img-container #text p { width: 600px; } #img-container .picture_holder { float: left; } #img-container .picture { /* padding-top: 100px; */ } #img-container .captioning .title { margin-top: 12px; font-weight: bold; } #img-container .captioning .caption {} </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </section> </div> <footer class="fttext"> <a href="http://twitter.com/NatroseDavis"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a> <a href="https://www.facebook.com/natalierosedavis/"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a> <p>© 2018 Natalie Davis.</p> </footer> </body> </html>
1 個解決方案
解決方案1
0 2018-01-01 03:32:14
查看您在CSS中發布的代碼，您的菜單樣式針對的是ID，而在HTML中，菜單代碼則具有一個類。 將菜單的CSS更改為類而不是ID，然后應用樣式，然后將位置從絕對更改為固定，然后按預期運行。
.menu {
width: 960px;
margin: 0 auto;
position: fixed;
text-align: center;
background-color: darkred;
}
在監視textboxfor / editorfor數組的變化時，如何保持小數點后1位？
[英]How do I maintain 1 decimal place while monitoring the change on an array of textboxfor / editorfor?
如何模擬水平滾動的固定定位但保持正常的垂直滾動？ （表格的粘性列）
[英]How can I mimic fixed positioning for horizontal scrolling but maintain normal vertical scrolling? (Sticky column for a table)
最小化后，如何使網站顯示水平滾動條？
[英]How do I make my website display a horizontal scrolling bar when it is minimized?
在Twitter Bootstrap中如何在滾動時將菜單欄固定在頂部
[英]In Twitter Bootstrap How can I fix my menu bar on the top while scrolling
如何使用slideToggle和響應式設計將水平鏈接保持在適當的位置？
[英]How do I keep horizontal links in place with slideToggle and responsive design?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.