隐藏的div出现和背景项消失/不可见

Question

My project is a content based Website for my mother and her Children-daycare.
You can see the project on the domain: Diekleinenfreun.de

Now, as you see on the Website I have the navbar on the left.
And what I did is I used a simple javasyriptcode to make a div set to display:block; on mouseOver and none when mouseOut again.
I want to fill the div with content later. as a preview or an image or so.

My problem with this div is the alignment. As you can already see on the Page login, the div in making problems with any other content in the middle.
I first had the div set to relativ, wich solves the problem if the browserwindow's size is changed, but it pushes all other items in the middle down obviosly.

So what I need is this div not changing any other item in the middle, but rather blurring them out and laying over them if you understand what i mean.

The code I use:

    <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;
}

Or the original CSS class, which messes with the items in the middle, but is resized automaticly:

.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

If I understood your question, you are having an issue with the middle container (it's located inside a TD in your website) when it's resized.

To stop that just remove width: 760px; from the .login_middle{...} and other css classes such as .home_middle{ ...}, etc. or you could set width: 100%;.

To fix the issue of content pushing to the bottom, change/add css as below.

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

and every css class you use for middle content for example, kontakt_middle (according to your .kontakt_middle class at the time of writing, just set the position attribute)

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

Also, I noticed in other css classes you used; for example, .links_middle{} - remove top attribute and set height to 100% as you have already done to .kontakt_middle{}.

I hope this helps.