Solved

Scrolling DIV

Posted on 2006-11-02
8
180 Views
Last Modified: 2010-04-09
Please take a look at this page
http://ca.geocities.com/malik_arefin@rogers.com/test/index_new.html

I am trying to separate the Month section (Jan, Feb, March) so it is the only
part that scrolls sideways not the whole page. Could someone please help
me figure this out.

Thanks
0
Comment
Question by:apparition
  • 5
  • 3
8 Comments
 
LVL 5

Author Comment

by:apparition
ID: 17858393
P.S. I dont want to use frames since all the data needs to be in the same form.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17858458
The first thing that comes to mind is the following:


<div id="main" style="width: 800px;">
Here's the main body of the page


<div style="overflow: visible;">
Here's the stuff you want to scroll
</div>


</div>


It's clean, understandable, a perfect application of valid CSS applied to valid markup, and completely tanks in MSIE.  ::shrug:: We can't have everything.


(There may be a way of tricking MSIE into doing this; I don't know off the top of my head, but this may be a starting point.)
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17858488
Sorry, it would be nice if I thought a little before posting.  "overflow: scroll;" makes a whole lot more sense than "visible"
0
 
LVL 5

Author Comment

by:apparition
ID: 17858496
I need it to work in IE......plus It be helpful if someone could show me how modify my existing code to achieve this....

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17858714
Here's what I'd recommend; I've tested this on Firefox 1.5 and MSIE 6.0.  I took out all the tables you were using for layout, which make it excessively painful to style, and replaced them with valid CSS.

<style type="text/css">
#header
, #managers {
      width: 900px;
}

#header {
background-color: white;
background-image: url(index_new_files/title.gif);
height: 45px;
background-repeat: no-repeat;
}

#managers {
background: #a5bec6;
text-align: right;
}

ul#views {
      float: right;
      clear: both;
      padding: 0;
      
}
ul#views li {
      list-style: none;
      float: left;
      border: 1px solid black;
      padding: 0;
      margin: 0;
      background: white;
}
ul#views li.active {
      background: gray;
}

</style>

</head>

<body>
<div id="managers">
      <select id="Select7" class="input1" disabled="disabled">
      <option selected="selected">Joe Smith</option>
      </select>
</div>

<div id="header"></div>


<ul id="views">
      <li><a class="link2" href="http://ca.geocities.com/malik_arefin@rogers.com/test/month.html">Monthly</a></li>
      <li class="active"><a class="link2" href="http://ca.geocities.com/malik_arefin@rogers.com/test/qtr.html">Qtrly</a></li>
</ul>

<br style="clear: both;" />


<table style="overflow: scroll;">

<!-- big scary table of data here -->

</table>
0
 
LVL 5

Author Comment

by:apparition
ID: 17859074
Thanks,

but I am not sure if this is going to accomplish what I want to do.

I want to split the main table so only the months section is scrollable but the other items to the left stay static.
0
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 250 total points
ID: 17859115
Ahhh; ok.  In that case I might suggest breaking it into two tables:

<table style="float: left;">
<!-- stuff you don't want to scroll.
</table>

<table style="float: left; overflow: scroll;">
<!-- stuff you do want to scroll -->
</table>

<br style="clear: both;" />
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17950193
If the B grade indicates you were hoping for more information I hope you'll ask!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS measurement 10 34
Form Submit falis 6 25
Centered Image 2 19
Wrapper for APPs 9 28
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now