堆栈内存溢出
  简体   繁体   English

空白和背景移动

[英]White space and background moves

 原文  2014-11-11 14:29:38  3   2    javascript/ jquery/ css/ background/ background-image

问题描述

There is a faq on my website for a school project created with Javascript animations. 我的网站上有一个关于使用Javascript动画创建的学校项目的常见问题解答。

The problem is: 1; 问题是：1； The background moves when 2 or more faqs are opened. 打开2个或更多常见问题时，背景会移动。 2; 2; There is a white space beneath the background. 背景下方有一个空白区域。

The faq on my website (click for the image) 我的网站上的常见问题（点击查看图片）

The javascript JavaScript 

 var main = function() { $('.article').click(function() { $('.article').removeClass('current'); $('.description').hide(); $(this).addClass('current'); $(this).children('.description').show(); }); $(document).keypress(function(event) { if(event.which === 111) { $('.current').children('.description').toggle(); } else if(event.which === 110) { var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); nextArticle.addClass('current'); } }); }; $(document).ready(main); 
 The Css Body { background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png'); } .articles_title { color:white; font-size: 250%; position: fixed; top: 30px; right: 50%; } p { margin: 0; } .row { margin: 0; } .articles { margin-top: 16px; margin-bottom: 16px; } .article { color: #222; background: rgba(255,255,255,.9); border-spacing: 2px; border-color: gray; font-family: arial,sans-serif; border-bottom: 1px #e5e5e5 solid; } .current .item { background: rgba(206,220,206,.9); } .item { cursor: pointer; padding-top: 7px; padding-bottom: 7px; } .item .source { margin-left: 16px; } .item .title { font-weight: bold; } .item .pubdate { margin-right: 16px; } .item .pubdate { text-align: right; } .description { display: none; padding-top: 10px; padding-bottom: 10px; } .description h1 { margin-top: 0px; font-size: 16px; } /* the index.php css */ body { left: 0; margin: 0; overflow: hidden; position: relative; } /* Initial menu */ .menu { background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top; left: -285px; /* start off behind the scenes */ height: 100%; position: fixed; width: 285px; } /* Basic styling */ .jumbotron { background-image: url('http://i.imgur.com/JvdPG8h.png?1'); height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0; } .menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px; } .menu a { color: #fff; font-size: 15px; text-decoration: none; text-transform: uppercase; } .icon-close { cursor: pointer; padding-left: 10px; padding-top: 10px; } .icon-menu { color: #fff; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px; text-decoration: none; text-transform: uppercase; } .icon-menu i { margin-right: 5px; } 
 The index.php in the faq.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles/faq.css"> </head> <body> <div class="articles container"> <div class="article current"> <div class="item row"> <div class="col-xs-3"> <p class="source">FLIGHT</p> </div> <div class="col-xs-6"> <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 23</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1> <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/faq.js"></script> </body> </html>

2 个解决方案

解决方案1
 0 已采纳  2014-11-11 14:54:34

I jsfiddle your question http://jsfiddle.net/wz7eojqp/ 我jsfiddle您的问题http://jsfiddle.net/wz7eojqp/

I couldn't find the problems you described. 我找不到您描述的问题。

but I think that regarding the white space in the bottom of your page the problem is default browser margin. 但我认为，关于页面底部的空白，问题是默认浏览器页边距。 try to body{margin: 0;} or even better reset code. 尝试使用body{margin: 0;} ，甚至更好的方式重置代码。

http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/

解决方案2
 0  2014-11-11 15:04:37

Please close all (!) your html tags. 请关闭所有（！）您的html标记。 It will fix many problems. 它将解决许多问题。

I've created a jsfiddle: http://jsfiddle.net/7ypk522y/ I have deleted your css class .jumbotron because you don't use it and changed it with the following lines. 我创建了一个jsfiddle： http : //jsfiddle.net/7ypk522y/我已经删除了CSS类.jumbotron，因为您没有使用它，并通过以下几行对其进行了更改。 I hope this fixes your problem. 我希望这可以解决您的问题。 

body {
    background: url("http://i.imgur.com/JvdPG8h.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 加载较大的背景图像，从而在等待加载时消除空白 - loading large background images eliminating white space while waiting for load 如何使用CSS缩放基于空白的背景图像 - How to scale background image based on white space with CSS 双图像背景在鼠标悬停时移动 - Double image background moves on mouseover JavaScript中的空白正则表达式 - white space regex in javascript Skrollr添加空白区域 - Skrollr adding white space 页面右侧的空白 - White space on right of page 交互式弹出/空白 - Interactive Popup/White Space 视差效果空白 - Parallax effect white space 文本区域中出现空白 - white space occur in textarea Javascript Unicode空白 - Javascript Unicode White Space
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM