Question

我已经在这个网站上得到了一些很好的帮助，所以当我遇到问题时，Stack Overflow当然是我的第一个停靠点！

我下载了一个响应式网站模板，并对LOADS进行了更改。我非常完整;但是，我还有一个问题。

我在我的网站顶部创建了一个登录表单，在另一个SO用户的帮助下，我创建了可点击的相对图像。问题是当显示网站的屏幕变得小于479像素时，相对图像似乎不应该在他们应该的位置。

我上传了网站HERE，非常感谢您解决问题的任何帮助。

Answer 1

您的图像相对于表单或包装器div定位。它们应相对于输入或包含输入的div来定位，例如：

<form name="" action="" method="">
<div style="position: relative; overflow: auto; display: inline-block;">
    <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1">
    <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login">
<div style="position: relative; overflow: auto; display: inline-block;"> 
    <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2">
    <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login">
</div>
<input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit">

如果你这样做，那就把它放在你的登录按钮上......

display: inline-block;
margin-left: 0;
vertical-align: top;

事情看起来很不错。

另一个注意事项......请务必不要为问号按钮链接打开新窗口。您通常不希望破坏正常的浏览器功能和流程。另外，考虑使用jQuery的Placeholder插件而不是内联JS。

Answer 2

我会尝试解释为什么会这样，而不仅仅是给你完成代码。

所以，当你使用position：relative;您将元素相对于其父元素定位。在.forgotten_2图片上，您使用右：226px;并且这样就将它从其父级（右侧）的右边缘 226px定位现在，当表单分成两行时，这种定位并不好。

你应该使用什么：

将图标作为背景图像放在输入字段中（如果它不必在某处链接）

更改HTML以围绕输入及其图标包装div，然后相对定位到

我认为你需要指向“忘记...”的链接，所以你应该选择第二个解决方案。这就是你的HTML应该是这样的：

<form method="" action="" name=""> <div class="input-box"> <img class="forgotten_1" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Username?"> <input type="text" id="login" onfocus="if(this.value=='E-Mail Address') this.value='';" onblur="if(this.value=='') this.value='E-Mail Address';" value="E-Mail Address"> </div> <div class="input-box"> <img class="forgotten_2" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Password?"> <input type="password" id="login" onfocus="if(this.value=='Password') this.value='';" onblur="if(this.value=='') this.value='Password';" value="Password"> </div> <input type="submit" name="submit" value="Log In" class="general_button" style="margin-left:-35px;"> </form>

现在你要为输入框添加一些CSS。

请记住block_login（表单的父级）有float：right;这可能会影响你的造型;）

Answer 3

蝙蝠的权利，不应该指多个元素相同的ID。您的两个字段都具有#login的ID。您最有可能将其更改为.login类。

对我来说，？第一场中的图像落在与第二场不同的位置。

由于在视口更改时您没有更改字段的大小，我建议您移动到div（使用position：relative set）来包含每个字段。使输入宽度和高度为100％，然后使用顶部和右侧绝对定位图像，使其落在输入的末端。

相对图像响应式网页设计

3 个答案: