PDA

Click to See Complete Forum and Search --> : Scrollbar problem

PhpNoobie
Jun 15th, 2005, 03:34 PM
Hi

Im new with Php

Im trying to put a little php script together and there seems to be one last problem:

The page contains a textpanel with a scrollbar that exactly fits the background foto i use. the background foto fits the browser window.

for some reason the browser itself has a scrollbar too. this is very ennoying since whenever you turn your mousewheel you scroll down to a black empty space.

First i tried getting around by disabling the mouse wheel in html but it is not possible.I couldn't find any java scripts that wo do that for me and i am not smart enough to write one myself :)

I tried positioning the textpanel differently, but the only thing that would affect the page height (and black empty space and remove scrollbar) was reducing the textpanels height. which also reduces my textpanels height
;) which is not good...

can anyone see the problem here?



<html xmlns="">

<head>
<title>titel</title>

<style type="text/css">

body {
background: black;
font-family: sans-serif;
}

div.contentPane {
width: 936px;
height: 600px;

margin: auto auto auto auto;
}

div.textPane {
position: relative;
left: 270px;
top: -400px;

width: 650px;
height: 430px;

overflow: auto;

}

img {
id="offset"
position: relative;
border: none;
text-decoration: none;
}

span.bold { font-weight: bold; }
span.italic { font-style: italic; }

table.overzicht td.title {
font-weight: bold;
background: rgb(215,84,30);
color: rgb(254,201,9);
}

table.overzicht td.font0 {
font-size: 95%;
font-style:normal;
text-decoration:none;
font-family: sans-serif;
}

table.overzicht td.font8 {
font-size: 115%;
text-decoration:none;
font-family: sans-serif;
}

table.overzicht td.font5 {
font-size: 110%;
text-decoration:none;
font-family: sans-serif;
}

table.overzicht td.font10 {
font-size: 145%;
text-decoration:none;
font-family: sans-serif;
}

table.overzicht td.font11 {
font-size: 145%;
text-decoration:none;
font-family: sans-serif;
}

table.overzicht td.font13 {
font-size: 120%;;
text-decoration:none;
font-family: sans-serif;
}

div.footer {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
margin-top: 2em;
height: 1px;
}
</style>
</head>

<body id="offset">
<map id="map" name="map">
<area coords="230,185,60,220" href="index.htm" alt="Home" />
<area coords="50,246,247,288" href="beach_backup2.php?page=overzicht" alt="Overzicht" />
<area coords="52,304,248,330" href="beach_backup2.php?page=vrijdag" alt="Vrijdag" />
<area coords="50,343,250,363" href="beach_backup2.php?page=zaterdag" alt="Zaterdag" />
<area coords="52,384,250,402" href="beach_backup2.php?page=zondag" alt="Zondag" />
<area coords="53,421,248,466" href="beach_backup2.php?page=tickets" alt="Locatie" alt="Tickets" />
<area coords="55,486,247,517" href="beach_backup2.php?page=locatie" alt="Locatie" />
" alt="Partners" />
</map>

<div class="contentPane">
<img src="" usemap="#map" alt="Page spanning image map." />
<div class="textPane">


<?php if ($_GET['page'] == "vrijdag") { ?>


<?php } else if ($_GET['page'] == "zaterdag") { ?>


<?php } else if ($_GET['page'] == "zondag") { ?>


<?php } else if ($_GET['page'] == "tickets") { ?>


<?php } else if ($_GET['page'] == "locatie") { ?>

under construction

<?php } else if ($_GET['page'] == "partners") { ?>

<?php } else { ?>

tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel

tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel
tabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabeltabel

<?php } ?>
</div>
</div>
</body>
</html>



i'm sweating on this one for 2 days now and i really hope to find an answer here...

thanks in advance!!!
ALL
Jun 15th, 2005, 05:58 PM
i am having a hard time understanding what you mean?!?!

NOTE: this should probably be in the HTML secion, it sounds like HTML more than PHP
demoti
Jun 16th, 2005, 02:47 AM
The Problem is that there is a black empty space on the bottom of the page.
I don't know why and the only way i can reduce the black space is by reducing the textpanel's height .

Because of the black empty space my page will have a scrollbar which will make my whole page go up or down (to the black empty space). People who enter the site will always do this because they think they will scroll inside the smaller textpanel.(with the mousewheel)

I guess it has something to do with finding the right properties for the textpanel but i can't seem to figure it out...

any help would be greatly appreciated, more info can be given...
demoti
Jun 17th, 2005, 05:05 AM
Bump
CornedBee
Jun 17th, 2005, 11:18 AM
Have you considered what happens when the user resizes the browser? Has various toolbars installed? Runs at a different resolution?

Trying to make a page fit perfectly is an illusion.

As for the black space, try adding this rule to your stylesheet:
html, body, form, textarea {
margin: 0;
padding: 0;
}

Also, get Firefox (http://www.mozilla.org/) and use its DOM inspector to find out just which element takes up that extra space.