Indie-Resource.com

Were Back!
http://indie-resource.com/forums/

Help needed with CSS sroll box

http://indie-resource.com/forums/viewtopic.php?t=2823

Page 1 of 1

Help needed with CSS sroll box

Posted: Tue Feb 08, 2011 9:13 pm
by Slav2
everything works, except i cant scroll down and that text isnt going into the scroll box.

Ok, here is all my codes:


CSS DOCUMENT

Code: Select all

#guidetownhall {
	left:284px;
	top:215px;
	width: 550px;
	height: 375px;
	overflow: auto;
	position: absolute;
	z-index:4;	
}
PHP DOCUMENT

Code: Select all

<div id="guidetownhall">
<?php
if(isset($_GET['townhall']))
{
$bypassguides = 1;

print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";

}
?>
</div>


THis is the screen shot: (when i put the cursor over the scroll is not what its supposed to be. it becomes the cursor when you are supposed to type text in.)

http://i820.photobucket.com/albums/zz12 ... tled-1.png

Re: Help needed with CSS sroll box

Posted: Tue Feb 08, 2011 10:57 pm
by kaos78414
Try experimenting with different overflow options - overflow:hidden, overflow:scroll, etc. That's the only thing I can think of. When it comes to CSS sometimes you just gotta experiment. Download web developer toolbar or firebug, that way you can edit CSS on the fly, see the changes, and then apply them when you get something that works.

Also, I would change print to echo in your PHP.

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 2:47 am
by Slav2
whts the difference between print n echo?

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 3:08 am
by Slav2
and i tried everything i could think of..and nothing is working

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 11:20 am
by kaos78414
Print returns a Boolean value, and echo doesn't. This makes echo slightly faster and is the preferred method unless you need the true/false value for something.

Can you post the full style sheet? I'm not sure what's wrong just yet, I'd have to see the rest of the code.

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 11:40 am
by PaxBritannia
As for the cursor, there is some info here: http://www.w3schools.com/css/pr_class_cursor.asp

Apart from that, as kaos78414 mentioned, we can't really do much without the CSS stylesheet for that page.

pax.

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 5:41 pm
by Slav2
well i posted the css up in the top document......here it is again:

Code: Select all

/*                                              guides                                   */

#guidetownhall {
	left:284px;
	top:215px;
	width: 550px;
	height: 375px;
	overflow: auto;
	position: absolute;
	z-index:4;	
}

#guidemainpage {
	position:absolute;
	left:284px;
	top:210px;
	width:650px;
	height:500px;
	z-index:4;
	font-size: 20px;
	font-weight: 500;
    }
and here is my whole php document for that page:

Code: Select all

<?php
include_once 'maintemplate.php';
?>
<link href="maintemplate.css" rel="stylesheet" type="text/css" />

<div id="guidetownhall">
<?php
if(isset($_GET['townhall']))
{
$bypassguides = 1;

print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";
print "Here will be info about the town hall."."<br/>";

}
?>
</div>

<?php
if(isset($_GET['warehouse']))
{
$bypassguides = 1;

print "Here will be info about the warehouse.";

}
?>

<?php
if(isset($_GET['mill']))
{
$bypassguides = 1;

print "Here will be info about the mill.";

}
?>

<?php
if(isset($_GET['house']))
{
$bypassguides = 1;

print "Here will be info about the house.";

}
?>

<?php
if(isset($_GET['safehouse']))
{
$bypassguides = 1;

print "Here will be info about the safe house.";

}
?>

<?php
if(isset($_GET['church']))
{
$bypassguides = 1;

print "Here will be info about the church.";

}
?>

<?php
if(isset($_GET['settlerscamp']))
{
$bypassguides = 1;

print "Here will be info about the settlers camp.";

}
?>

<?php
if(isset($_GET['acadamy']))
{
$bypassguides = 1;

print "Here will be info about the acadamy.";

}
?>

<?php
if(isset($_GET['market']))
{
$bypassguides = 1;

print "Here will be info about the market.";

}
?>

<?php
if(isset($_GET['barracks']))
{
$bypassguides = 1;

print "Here will be info about the barracks.";

}
?>

<?php
if(isset($_GET['castle']))
{
$bypassguides = 1;

print "Here will be info about the castle.";

}
?>

<?php
if(isset($_GET['embassy']))
{
$bypassguides = 1;

print "Here will be info about the embassy.";

}
?>

<?php
if(isset($_GET['wall']))
{
$bypassguides = 1;

print "Here will be info about the wall.";

}
?>

<?php
if(isset($_GET['tavern']))
{
$bypassguides = 1;

print "Here will be info about the tavern.";

}
?>

<div id="guidemainpage">
<?php
if ($bypassguides != 1)
{
print "    <font color='#FF0000'>Click on the following links to read the different sections</font>";

print "<table><tr><td>              General </td><td> Guides              </td><td>              Building </td><td> Guides              </td><td>              Troop </td><td> Guides              </td></tr>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?townhall'>Town Hall</a></td><td><A href='guides.php?acadamy'>Acadamy</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?warehouse'>Warehouse</a></td><td><A href='guides.php?market'>Market</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?mill'>Mill</a></td><td><A href='guides.php?barracks'>Barracks</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?house'>House</a></td><td><A href='guides.php?castle'>Castle</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?safehouse'>Safe House</a></td><td><A href='guides.php?embassy'>Embassy</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?church'>Church</a></td><td><A href='guides.php?wall'>Wall</a></td><td>link5</td><td>link6</td>";
print "<tr><td>link1</td><td>link2</td><td><A href='guides.php?settlerscamp'>Settlers Camp</a></td><td><A href='guides.php?tavern'>Tavern</a></td><td>link5</td><td>link6</td></tr>";
print "<tr><td>link1</td><td>link2</td><td>link3</td><td>link4</td><td>link5</td><td>link6</td></tr></table>";
}
?>
</div>
and here is the maintemplate.css:

Code: Select all

    body {
       background-color: #FFCC66;
       
    }
    #backgroundpic {
       position:absolute;
       left:70px;
       top:20px;
       width:150px;
       height:150px;
       z-index:1;
    }

    #townview {
       position:absolute;
       left:259px;
       top:198px;
       width:600px;
       height:400px;
       z-index:2;
    }

    #logoroyal {
       position:absolute;
       left:341px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #logoempires {
       position:absolute;
       left:531px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #premiumaccountbutton {
       position:absolute;
       left:78px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #visitforumbutton {
       position:absolute;
       left:820px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #currentcityword {
       position:absolute;
       left:87px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #cities {
       position:absolute;
       left:190px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #defaultselect {
       position:absolute;
       left:278px;
       top:162px;
       width:400px;
       height:40px;
       z-index:3;
    }
/*                                            resources display                          */
    #wood {
       position:absolute;
       left:92px;
       top:122px;
       width:30px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #stone {
       position:absolute;
       left:197px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #iron {
       position:absolute;
       left:295px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #food {
       position:absolute;
       left:384px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #people {
       position:absolute;
       left:481px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #gold {
       position:absolute;
       left:575px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #minfood {
       position:absolute;
       left:665px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #happiness {
       position:absolute;
       left:758px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #loyalty {
       position:absolute;
       left:860px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #wooddisplay {
       position:absolute;
       left:137px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #stonedisplay {
       position:absolute;
       left:237px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #irondisplay {
       position:absolute;
       left:327px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #fooddisplay {
       position:absolute;
       left:425px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #peopledisplay {
       position:absolute;
       left:526px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #golddisplay {
       position:absolute;
       left:610px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #minfooddisplay {
       position:absolute;
       left:710px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #happinessdisplay {
       position:absolute;
       left:826px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #loyaltydisplay {
       position:absolute;
       left:910px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }
/*                                         announcments, chats, quests                         */
    #announcmentsbutton {
       position:absolute;
       left:508px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #worldchatbutton {
       position:absolute;
       left:622px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #alliancechatbutton {
       position:absolute;
       left:734px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #questsbutton {
       position:absolute;
       left:847px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }
/*                                            all links on left                          */
    #overviewbutton {
       position:absolute;
       left:135px;
       top:235px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #villageviewbutton {
       position:absolute;
       left:135px;
       top:265px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #resourcebutton {
       position:absolute;
       left:135px;
       top:295px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #inboxbutton {
       position:absolute;
       left:135px;
       top:325px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #viewmapbutton {
       position:absolute;
       left:135px;
       top:355px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #rankingsbutton {
       position:absolute;
       left:135px;
       top:385px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #notesbutton {
       position:absolute;
       left:135px;
       top:415px;
       width:150px;
       height:50px;
       z-index:2;
    }
	
#guidesbutton {
       position:absolute;
       left:135px;
       top:445px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #Logoutbutton {
       position:absolute;
       left:135px;
       top:475px;
       width:150px;
       height:50px;
       z-index:2;
    }
/*                                            map positions                          */
    #tag1{
             position:absolute;
             left:317px;
             top:260px;
                width:28px;
                height:36px;
             z-index:5;
             }

    #tag2{
             position:absolute;
             left:500px;
             top:350px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag3{
             position:absolute;
             left:500px;
             top:450px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag4{
             position:absolute;
             left:750px;
             top:450px;
                width:28px;
                height:36px;
             z-index:5;
             }
/*                                            bottom of page                          */
    #dateandtime {
       position:absolute;
       left:184px;
       top:609px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

    #copyright {
       position:absolute;
       left:423px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 800;
    }

    #contactsupport {
       position:absolute;
       left:744px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

Re: Help needed with CSS sroll box

Posted: Wed Feb 09, 2011 7:21 pm
by Slav2
haha wow i just found the problem....

ok i had z-index=4 and that meant it was i think in the page right before this one (at the bottom of the php) so i changed it to z-index=5 and now it works perfectly...

sorry for giving a hard time, but i appreciated the help guys..THanks

Re: Help needed with CSS sroll box

Posted: Thu Feb 10, 2011 8:12 am
by PaxBritannia
Congratulations at solving it yourself! :D

Sometimes the answer just becomes apparent.

pax.

Re: Help needed with CSS sroll box

Posted: Fri Feb 11, 2011 10:06 pm
by Slav2
haha thanks :D lol and thats tru
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited