个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在建立一个网站来托管 Crysis Wars 游戏的在线游戏服务器列表，并且刚刚发现在 Adobe Fireworks 中开发设计并在之后添加相关代码要容易得多。
我正在设计的当前网页在页面中央有一个登录框，而且效果很好。也就是说，直到我们更改浏览器窗口的大小。
这是正常情况下的网页: 
它显示正确，但这是调整浏览器窗口大小时的屏幕截图:
可以看出，这是页面的问题，因为访问者的屏幕分辨率不同，而且这个问题很容易再次发生。
我的问题是，我怎样才能强制这两个 CSS 对象保持它们的位置，并且永不重叠？这很麻烦，因为登录框在网页上居中。
网页可见crysis-or.eu (请不要因为我在实时网站上开发而责备我)。
HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
</div>
<div class="loginui">
</div>
</body>
</html>
CSS:
body {
width:100%;
margin-left:-0px;
background-color:07080A;
}
body > .loginui {
width:400px;
height:400px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background:url("http://crysis-or.eu/img/login_b_bg.png") repeat-x;
}
body > .navbar {
width:500px;
height:100px;
position: absolute;
margin-top:50px;
margin-left:100px;
background:url("http://crysis-or.eu/img/navbar.png") repeat-x;
}
最佳答案
我会推荐以下内容:
将导航栏和登录窗口放在单独的 wrapper-div 中，以防止它们重叠。您可以将 HTML 更改为:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title>Server Portal | Login</title>
<link href="./css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="top-bar">
<div class="navbar">
</div>
</header>
<section id="main">
<div class="loginui">
</div>
</section>
</body>
</html>
Header 和 Section 就像 Div 一样，唯一的区别是它们的语义意义。
因为 .top-bar 和 .loginui 不再是主体的直接子项，所以您的选择器将不再起作用。将 CSS 选择器更改为 .top-bar 和 .loginui 而不是 body > .top-bar 和 body > .loginui 。
标题需要指定的高度，并且需要其位置为“相对”或“绝对”。一个绝对定位的子元素将被绝对定位到任何最近的父元素，它也是绝对的，或者显式相对的。背景颜色仅用于说明目的，将在生产中移除。
header {
position: relative;
height: 200px;
background-color: red;
}
您希望该部分尽可能多地填充，因此需要绝对定位。 这里的技巧，可以解决您的问题，是添加一个 min-height 属性以防止该部分变得小于其内容，从而允许重叠。
section {
position: absolute;
top: 200px;
left: 0;
right: 0;
bottom: 0;
min-height: 400px;
background-color: blue;
}
这应该适合您。此解决方案的一个问题是登录窗口将相对于其容器而不是整个窗口居中。它将比您当前的设计低 100 像素(标题高度的一半)。为了解决这个问题，如果这对您很重要，您需要使用不同的方法将其垂直居中。将顶部设置为 50%，然后使用负顶部边距来补偿一半高度加上标题高度的一半。因为它有固定的高度，所以很简单:(400px + 200px)/2 = 300px。
.loginui {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 0;
right; 0;
margin: -300px auto 0;
background: url('path/to/login_b_bg.png');
}
关于html - 停止两个对象重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24440152/
26
4
0
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下，我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲，这是那个包含标题，以及转到其他窗口和内容的按钮... 所以问题
我有一个 Azure WebJob，它在一个非常简单的应用服务标准:1 Small(计划)上运行。 现在，我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时，我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后，XCod
我刚刚下载了android开放源代码项目，并尝试使用make来构建它，我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
我以前从未制作过 makefile，但我们已经收到了这个，但是，如果我尝试运行它，它只会说， missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
好吧，这段代码非常基本。用户将答案输入文本框，如果等于“第一+第二”，他们就得到一分。然后，他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了，函数“doCalculation”将再次运行，他
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时，我的 viewController 出现问题。 有什么方法可以停止该
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc，swc 将作为库在 flashdevlop 中使用。 一
我在线程中有一个连接，因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
你好，我做了一个 php 套接字服务器来从 plc 获取数据，plc 被配置为 tcp 套接字客户端。 我有一个严重的问题，如果本地网络出现故障，似乎功能 socket_accept 停止，plc 无
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。 请帮助获得正确的函数或方法来停止 setTimeout 函数。 我一直在尝试
我正在运行一个多项目SBT(v0.13)构建，并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。 当前的行为是，当某项无法在子项目中进行编译时，构建将继续(以编译所有其他子项目)。 一旦
我有播放.wav文件中声音的代码，但是我无法停止播放歌曲，甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲，所以这是一个问题。这是我如何播放wav的代码: public class EasySo
我正在寻找一种解决方案，该如何控制从JSF应用程序播放音频文件。 我不需要完整的解决方案，只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。 我尝试搜索过去的问题，但没有成功。 我
我已经在test.ps1中编写了以下函数，在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
我必须设置一个 10 分钟的计时器，它会重定向到主屏幕。此外，它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
我正在制作一个聊天应用程序，功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时，“自动播放”效果很好。因此，现在我
我基本上希望页面能够接受用户输入的时间(以秒为单位)。 之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮，以便用户可以从头开始倒计时。 这是我到目前为止得到的:
我需要停止 $.each 循环，加载图像，然后继续循环。我有 Canvas ，可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在，当我尝试从数组加载对象时，存在一个问题:由于尺寸不同，并且它们
我是一名优秀的程序员,十分优秀！