SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tough (?) design question - please help

    Hi all!

    Please have a look at:

    http://www.bogg.at/dev/kwa2/

    You should see a page the way I want it to look like:
    * a horizontal bar on top covering the whole browser width
    * a vertical bar on the left covering the whole browser height

    the horizontal bar is done with a css background image repeating on the x
    axis:

    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    background-image: url(images/hintergrund.gif);
    background-repeat: repeat-x;
    }
    -->
    </style>

    the vertical bar on the left is a layer with background color and a height
    of 100%

    The Problem: the height of the vertical bar

    resize your browser - everything is fine: the vertical bar still covers 100%
    now resize your browser so you get a vertical scrollbar - now scroll down

    the vertical bar is cut off!!!

    I think I understand the problem but I can't think of a solution.

    I want to have a horizontal bar on top covering the whole browser width
    combined with a vertical bar on the left covering the whole browser height

    Thanks for your feedback!

    best regards,
    Kicker Ewald

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternative 1:
    Add this script to the end of the page
    Code:
    <script language="javascript">
      var browser = getBrowser();
      setInterval('pushVertBar()', 100);
      function pushVertBar()
      {
        switch(browser)
        {
          case 'ie4': 
            balkenlinks.style.top = document.body.scrollTop;
            schwarzelinie.style.top = document.body.scrollTop;
            break;
          case 'ns4':
            document.layers['balkenlinks'].pageY = window.pageYOffset;
            document.layers['schwarzelinie'].pageY = window.pageYOffset;
            break;
          case 'ns6':
            document.getElementById('balkenlinks').style.top = window.pageYOffset;
            document.getElementById('schwarzelinie').style.top = window.pageYOffset;
            break;
        }
      }
      function getBrowser()
      {
        if(document.all) return 'ie4';
        if(document.layers) return 'ns4';
        if(document.getElementById) return 'ns6';  
      }
    </script>
    The idea here is checking 10 times / second if the user has scrolled up or down, and then push the layers, making the vertical bar cover the whole browser height

    Alternative 2:
    Add a scrollbar to the inhalt-div
    (and also change width of table, to make room for the vertical scrollbar)
    <DIV id=inhalt style="...;height=300px;overflow=auto;">
    <TABLE cellSpacing=0 cellPadding=0 width=680 border=0>
    No window scrolling => no vertical bar cut off !!

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you

    thank you jofa - I will use alternative 1


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •