Question

我的项目是一个基于内容的网站，供我母亲和她的儿童日托使用您可以在域中看到该项目：Diekleinenfreun.de

现在，正如您在网站上看到的那样，左侧有导航栏我所做的是我使用一个简单的javasyriptcode来设置一个div来显示：block;在mouseOver上，当mouseOut再次出现时为none 我想稍后用内容填充div。作为预览或图像左右。

我对这个div的问题是对齐。正如您在页面登录中已经看到的那样，div在中间的任何其他内容中出现问题我首先将div设置为相对，如果浏览器窗口的大小发生了变化，它会解决问题，但它会在中间推动所有其他项目。

所以我需要的是这个div不会改变中间的任何其他项目，而是如果你明白我的意思，就会把它们弄糊涂并铺设它们。

我使用的代码：

    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<a href="http://www.diekleinenfreun.de/?plid=2"><center><input onMouseOver="toggle_visibility('login');" onMouseOut="toggle_visibility('login');" type="button" class="nav_login" value="Login" /></center></a>

<div id='login' class='login_middle'>a</div>

.login_middle {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 760px;
  height: 70%;
  top:243px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border: none;
  font: normal 16px/1 Georgia, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(18,50,145,0.85);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  display:none;
}

或原始的CSS类，它与中间的项目混淆，但自动调整大小：

.login_middle {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 760px;
  height: 100%;
  position: relativ;
  bottom: 0;
  overflow: hidden;
  border: none;
  font: normal 16px/1 Georgia, serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(18,50,145,0.85);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
  display:none;
}

Answer 1

在我看来，如果你坚持传统的网页设计实践，并为每个内容页面使用一个单独的.html页面，而不是像你一样做这个Javascript鼠标悬停会好得多。

您可以轻松地将此布局转换为响应式三列设计模板，您可以将其用于网站的每个页面。这样做，您的网站可以在移动设备上很好地显示，这现在很重要。事实上，手机上的显示效果不佳。

RGDS

Answer 2

如果我理解了您的问题，那么在调整大小时，您就会遇到中间容器（它位于您网站的TD内部）的问题。

要停止，只需从.login_middle {...}和.home_middle {...}等其他css类中删除width: 760px;，或者您可以设置width: 100%;。

要解决内容推到底部的问题，请按以下方式更改/添加css。

.table_mid{
  ....
  position: relative;
}

以及用于中间内容的每个css类，例如kontakt_middle （根据您撰写本文时的.kontakt_middle类，只需设置位置属性）

.kontakt_middle{
  .....
  position: absolute;
}

另外，我注意到你使用的其他css课程;例如，.links_middle {} - 删除top属性并将高度设置为100％，就像你已经完成的那样.kontakt_middle {}。

我希望这会有所帮助。

隐藏的div出现和backgrounditems消失/不可见

2 个答案: