8 replies [Last post]
shailend
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

Hi,

I am trying to build a layout using css.
I did use absolute postitioning because the div's would fit perfectly in the different brouwsers. (i'm not a css goeroe, jus beginning)

With a little help I got the container to center in the middle of the page.

Here's a link of the page:http://www.ssgi.nl/test/index.html

The problem is that the scrollbar of the content div doesn't stops at the bottem of the browser.
In FF it does stop at the bottom of the browser.

Is there someone who could help me pleas?

Here's my CSS:

/* CSS Document */
html, body {
    margin: 0;
    padding: 0;
    overflow-y:hidden;
    height: 100%;
}

#container {
    position: relative;
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    padding-top: 291px;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box; 
}

#topanimation {
    background: #5a5a5a;
    position: absolute;
    top: 0px;
    left: 150px;
    width: 452px;
    height: 250px;
    text-align:center;
    }

#navigation {
    background: #aaa;
    position: absolute;
    top: 250px;
    left: 0px;
    width: 150px;
    }

#contenttop {
    background: #FF33CC;
    position: absolute;
    top: 250px;
    left: 150px;
    height: 40px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    }
    
#content {
    background: #5a5a5a;
    margin-left: 150px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    overflow-y:auto;
    overflow-x:none;
    height: 100%; 
    }

#rightanimation {
    background: #ccc;
    position: absolute;
    top: 250px;
    left: 602px;
    width: 148px;
    border-top: 1px solid #000;
    }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

[SOLVED]Scrollbar problem in IE not in FF

There is likely not a worse way to lay out a page than all absolute. To get you by, though do this;

html, body {
	margin: 0;
	padding: 0;
    height: 100%;
    }

#container {
    position: relative;
    width: 760px;
    height: 100%;
    margin: 0 auto;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

shailend
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

[SOLVED]Scrollbar problem in IE not in FF

Hi,

Thanks, but if i do that the top button of the scrollbar dissapears.

see http://www.ssgi.nl/test/index2.html

Why is it worse too use absolute?
I did use it because then i could align all the div's perfect.
Is there an other way to make this layout then?

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

[SOLVED]Scrollbar problem in IE not in FF

AP layouts are brittle; they break easily should content change. The biggest problem with AP elements is that they are completely out of the flow. They have no awareness of other elements, and other elements are oblivious to them. There's no way to force awareness.

Here's a simple version of your page using floats to provide a fixed width page that will accept content changes with little chance of breakage.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 1st July 2003), see www.w3.org">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    }

body {
    font: 100% verdana sans-serif;
    }

p, h1 {
    font-size: 1em;
    }

#container {
    background-color: #5a5a5a;
    position: relative;
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 5px;
    }
 
#topanimation {
    border-bottom: 1px solid #000;
    text-align:center;
    }

#topanimation img {
    vertical-align: bottom;
    }

#navigation {
    border-right: 1px solid #000;
    float: left;
    width: 140px;
    padding: 1px 5px;
    }

#content {
    margin-left: 150px;
    margin-right: 148px;
    padding: 1px 5px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    }

#rightanimation {
    width: 138px;
    float: right;
    padding: 1px 5px;
    border-left: 1px solid #000;
    }

</style>
  </head>
  <body>

    <div id="container">
      <div id="topanimation">
        <img src="test_files/top.jpg" alt="top">
      </div>
      <div id="navigation">
        <ul>
          <li>profiel
          </li>
          <li>impressie
          </li>

          <li>beursagenda
          </li>
          <li>contact
          </li>
          <li>online-store
          </li>
          <li>item1
          </li>
          <li>item2
          </li>
          <li>item3
          </li>

          <li>item4
          </li>
          <li>shopping cart
          </li>
          <li>logged in?
          </li>
          <li>log out
          </li>
        </ul>
      </div>
      <div id="rightanimation">

        <p>
          rightanimation
        </p>
      </div>
      <div id="content">
        <h1>
          content tekst
        </h1>content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>

        content<br>
        content<br>
        content<br>
        content
      </div>
    </div>
  </body>
</html>

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

shailend
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

[SOLVED]Scrollbar problem in IE not in FF

Hi Thank you very much for your nice input your version works like a charm (':D').

The thing is that I hoped to have a scrollbar in the content div so somenone could scroll this div only.
And that this div would strech to the bottom.

When i place this nothing happens:

#content {
    margin-left: 150px;
    margin-right: 148px;
    padding: 1px 5px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
overflow: auto;
    }

The reason why I placed the content tekst in a sepparate div is that when you would scroll this text would always be vissible.
Is here a work arround for also?

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

[SOLVED]Scrollbar problem in IE not in FF

There is likely a way to do it, and I could probably work something out. I won't, though, because it is generally a bad idea to have the odd scroll bar and there is likely no advantage to having some bit of text always visible, which means it would be a waste of my time. Smile

The web is not print. You have no control over the user's browser, so it's best not to mess with expected behavior.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

shailend
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

[SOLVED]Scrollbar problem in IE not in FF

Hi,

Oke, thanks again for your input

shailend
Offline
newbie
Last seen: 13 years 38 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

[SOLVED]Scrollbar problem in IE not in FF

Hi Just 1 final question:

#navigation {
    border-right: 1px solid #000;
    float: left;
    width: 140px;
    padding: 1px 5px;
    }

#content {
    margin-left: 150px;
    margin-right: 148px;
    padding: 1px 5px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
	border-top: 1px solid #000;
    }

#rightanimation {
    width: 138px;
    float: right;
    padding: 1px 5px;
    border-left: 1px solid #000;
	border-top: 1px solid #000;
    }

I don't understand why you used width: 140px; in #navigation
And width: 138px; in #rightanimation

Because #navigation is in real 150px and and #righanimation is in real 148px these values show in the browser.

Can you tell me please why you did take off 10px?

Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

[SOLVED]Scrollbar problem in IE not in FF

Notice the padding. That adds 10px to the gross width.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.