Help - Search - Members - Calendar
Full Version: Table Scroll?
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
funride
May 25 2009, 09:36 PM
I dont like the way my layout looks tiled, so I need to make it scroll.
Can someone tell me how?
theerinkal
May 25 2009, 09:51 PM
You need to ask dreamgurl36 before editing her layouts unless you have a different layout that you'd like us to help you with.
schizo
May 25 2009, 11:04 PM
Are you talking about the one you posted in the showcase booth or the dreamgurl36 one? If it's the one you made, a code or a link would help.
alek
May 26 2009, 03:20 PM
css for a basic scrolling div

CODE
<style type="text/css">

.scroll {
    width:200px;
    height:200px;
    overflow:auto;
}

</style>


html for the div within a table

CODE
<table>
  <tr>
    <td>
      <div class="scroll">

        text text text text text

      </div>
    </td>
      <div class="scroll">

        text text text text text

      </div>
    </td>
  </tr>
</table>

funride
May 26 2009, 07:24 PM
I dont want it to scroll left to right.
I want it to scroll up and down.
digitalfragrance
May 26 2009, 07:27 PM
^ Then erase the "width: 200px" attribute, and edit the height attribute to your heart's delight.
funride
May 26 2009, 07:29 PM
That didnt work because there was already a height and when I erased the width it just kept going to the side.
digitalfragrance
May 26 2009, 07:42 PM
You want it to scroll up and down, right? Is it not scrolling yet? Then make the height attribute smaller than 200px.
funride
May 26 2009, 07:48 PM
It's still not working.
When I make it smaller...
I dont know.
Just here's my code.
Do you want to try?
CODE
<style type="text/css">

body{background-color: #f4fee5;
background-image:url(http://i40.tinypic.com/28valax.png);
background-image: repeat;
color: #000000;
font-family: century gothic;
font-size: 12px;}

#content{
position: absolute;
overflow: hidden;
top: 370px;
left: 28px;
width: 280px}

.scroll {
width:270px;
height:100px;
overflow:auto;
}

h1{
color:FF0000;
font-family: Georgia;
border: 1px solid; border-color: #FFFFFF;
font-size: 30px}

#banner{
position: absolute;
top: 0px;
left: 0px;
width: 301px}

#content h1 { margin-left: 0px;
text-align: left; }
#content p { margin-left: 0px;
width: 300px; }

#conenttwo{
position: absolute;
overflow: hidden;
top: 10px;
left: 550px;
width: 175px}

#conenttwo h1 { margin-left: 350px;
text-align: left; }
#contenttwo p { margin-left: 350px;
width: 300px; }

#conenttwo h1 { margin-left: 0px;
text-align: left; }



</style>

<div id="banner">
<img src="http://i42.tinypic.com/2euh06w.png">
</div>


<div id="content">

<div class="scroll">
<h1>Heading</h1>
text text text text textadlfkajsdlfhasdlfkjsdfl;jsadfl;kaaksssssssssssssssssssssssssssssssssssssssss
sssssssssssssssssssssssssssssssssss

</div></div>


<div id="conenttwo">
<h1>Heading Here</h1>
<p>Words words words words words. Words words words words words. These are words I want to see if they get cut off? Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words. Words words words words words</p>
</div>
digitalfragrance
May 26 2009, 07:55 PM
Well based on the text that you have in your scroll class, I'd say that it isn't enough to scroll. Try putting a lot of text, like this in your paragraph to text it's scroll-ability.
funride
May 26 2009, 07:59 PM
Alright thanks.
Now it works.
manny-the-dino
May 26 2009, 08:03 PM
Topic Closed & Moved
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.