-1

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

我下载了一个响应式网站模板并进行了大量更改。我已经很完整了；但是，我还有一个问题。

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

我已在此处上传了该网站，希望能在解决该问题方面提供任何帮助。

4

3 回答 3

0

您的图像相对于表单或包装器 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 的占位符插件而不是内联 JS。

于 2013-01-08T01:43:09.327 回答
0

我将尝试解释为什么会发生这种情况，而不仅仅是给你完成的代码。

所以，当你使用 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; 这可能会干扰您的造型；）

于 2013-01-08T01:48:22.887 回答
0

右边的bat，不应该是指多个元素同一个ID。您的两个字段的 ID 都是 #login。您很可能应该将其更改为 .login 类。

对我来说，? 第一个字段中的图像落在与第二个字段不同的位置。

由于您没有在视口更改时更改字段的大小，因此我建议您移动到一个 div（带有位置：相对集）以包含每个字段。将输入宽度和高度设为 100%，然后使用 top 和 right 绝对定位图像，使其位于输入的末尾。

于 2013-01-08T02:17:48.617 回答