HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Coding to put a scroll bar into a table cell (Calendar)
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table
View previous topic :: View next topic  
Author Message
woodsy134



Joined: 21 May 2008
Posts: 3
Location: Arizona, USA

PostPosted: Wed May 21, 2008 9:19 am     Coding to put a scroll bar into a table cell (Calendar) Reply with quote

I have searched all over the Web, including several Web developers forums, trying to figure out how to get a scroll bar into a cell within a (Calendar) table. But, still can't figure it out!

I'm new to HTML, know only one (email scrambling) javascript, and no other type of scripting or programming languages. Further, I can't seem to understand the gist of CSS! Therefore, everything I have found on the net about doing what I need to do is like trying to read a foreign language, and understand it enough to make it work to do what I want it to do!

I've downloaded a trial version of an HTML calendar creator, that allows me to edit the coding that the software creates. But, I've tried a number of different edits, in various different areas of the coding, and still can't get what I need.

Because this is the first time I've posted in this forum, I'm going to attempt to post the code that I have thus far, so I can hopefully get some help with it. Hope this works! lol

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Calendar by HTML Calendar Maker Pro - www.htmlcalendar.com</title>

<meta name="generator" content="HTML Calendar Maker Pro v3.8.7 - www.htmlcalendar.com">
<meta name="date" content="2008-05-17">
<meta http-equiv="content-type" content="text/html">

</head>

<body bgcolor="#003399">

<!-- Start Calendar, Jun 2008 -->
<div align="center"><p><font face="Arial" size="6" color="#FFFFFF">Jun 2008</font></p></div>

<!--Days of the week, printout-->

<table width="100%" cellpadding="4" cellspacing="0" border="1" bordercolor="#003399" bgcolor="#003399">
  <tr>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Sun</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Mon</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Tue</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Wed</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Thu</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Fri</font></td>
    <td bgcolor="#0099CC" width="14%" align="center" valign="middle"><font color="#FFFFFF" face="Arial" size="2">Sat</font></td>
  </tr>

<!--Beginning of first week of month-->

  <tr>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>1</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>2</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>

<!--Begin cell where scrolling is needed-->

    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>3</b></font></div>
        <font size="2" color="#FFFFFF" face="Arial">*&nbsp;&nbsp;Launch of the Peace Parade of 2008!<br> <br>*&nbsp;&nbsp;Ham and Bean Feed at the Riverside Stage Stop; Riverside, NM; 7 - 10 PM<br> <br>*&nbsp;&nbsp;Testing to see how many events can be placed into a single day.<br> <br>*&nbsp;&nbsp;There are 3, this one makes 4!</div></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>4</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>5</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>6</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>7</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
  </tr>

<!--Beginning of second week of month-->

  <tr>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>8</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>9</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>10</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>11</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>12</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>13</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>14</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
  </tr>

<!--Beginning of third week of month-->

  <tr>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>15</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>16</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>17</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>18</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>19</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>20</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>21</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
  </tr>

<!--Beginning of fourth week of month-->

  <tr>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>22</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>23</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>24</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>25</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>26</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>27</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>28</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
  </tr>

<!--Beginning of fifth week of month-->

  <tr>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>29</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>
    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>30</b></font></div><font color="#FFFFFF" face="Arial" size="2">
        <br>&nbsp;<br>&nbsp;<br></font></td>

<!--Because there are only two days in the fifth week of this month, the final table data (td) tag contains coding to fill
the rest of this week with the background of the table (below)-->

    <td colspan="5"><font size="2"><br>&nbsp;<br>&nbsp;<br>&nbsp;</font></td>
  </tr>
</table>
<!-- End Calendar, Jun 2008-->


<!----- Begin Footer ----->
<br><center><table bgcolor="#FFFFFF"><tr><td align="center"><font face="Georgia,Arial" size="4" color="#000000"><b>Created with <a href="http://www.htmlcalendar.com">HTML Calendar Maker Pro</a>.</b></font><br><font face="Georgia,Arial" size="3" color="#000000">Visit <a href="http://www.htmlcalendar.com">www.htmlcalendar.com</a> for the latest version!<br>To get a registration code that gives you more calendars<br>and that lets you modify or remove this footer, go to the <a href="http://www.htmlcalendar.com/products/windows/order">Online Order Form</a>.</font></td></tr></table>
<!------ End Footer ------>

</body>
</html>

As can be seen on the calendar, I have four events (two of them testing a non-existent scroll feature within the cell) on 3 Jun 08. I will have several dates with multiple events, like this one, where I need to make the individual cells scrollable, so that it doesn't make any one row a different size than the rest of the calendar rows.

Can someone please help me? Please try to keep in mind that, as stated above, I don't know anything about CSS, javascript, PHP, CGI, or any other type of languages. So, please be as descriptive as possible.

Thanks much, all.

Dave
Straystudio



Joined: 14 Apr 2008
Posts: 228
Location: Nord Italy

PostPosted: Thu May 22, 2008 11:27 am     Reply with quote

W E L C O M E !

DIV Element can have scrollbars.
DIV can take place inside a TABLE cell, then.
style="overflow: auto;" does the trick; besides auto, it can also get scroll (always shown, at zero content even though), or hidden.
overflow: auto; to intervene, wants the DIV to be size limited, too; and to have content enough.

With Yours I can find place for a DIV as heigh as up to 45px, without enlarging the cell.
So replace inserting the string:

<div style="height: 45px; overflow: auto;">
Code:

<!--Begin cell where scrolling is needed-->

    <td bgcolor="#0080C0" width="14%" align="left" valign="top"><div align="right"><font color="#FFFFFF" face="Arial" size="2">
      <b>33</b></font></div><div style="height: 45px; overflow: auto;">
        <font size="2" color="#FFFFFF" face="Arial">*&nbsp;&nbsp;Launch of the Peace Parade of 2008!<br>

<div align="right" style="height: 45px; padding-right: 4px; overflow: auto;">
as well may be a good option.

Be aware I found the </div> closing tags already present there, most likely left as remaining in error from a previous editing.

You see, this is just a wholly HTML only as a solution, working anywhere.
I think it as the classic as the best one.
woodsy134



Joined: 21 May 2008
Posts: 3
Location: Arizona, USA

PostPosted: Thu May 22, 2008 12:04 pm     Thanks a bunch! Reply with quote

Hello Stray,

Thanks so much for your response and help. Worked like a charm! I had attempted to insert very similar coding to that which you gave me, at several different points in the coding, but to no avail!

I still don't exactly understand what is going on with the coding, or why/how it works, because I've not worked much with the div tag before. But, it works great.

I'll have to do a bit more studying on the subject to see if I can figure out exactly what's happening with it, in the context (coding location) where it is inserted. Hopefully, I'll be able to figure it out.

Thanks again for the assistance!

Dave
Straystudio



Joined: 14 Apr 2008
Posts: 228
Location: Nord Italy

PostPosted: Thu May 22, 2008 12:33 pm     Reply with quote

Take care, that "stray" </div> closing tags again, wants to be moved after the </font> closing tag, to nest rightly.
woodsy134 wrote:
I had attempted to insert very similar coding .., but to no avail!

I.e. Likely anyone beeing thinking the DIV as a very classic Element, at first is drived to do :
<div height="45px" style="overflow: auto;">
same as it does get align="center"
yet, it wants height:; width:; in the style="" only, instead.
And go on ... unremembering later.

Here a bit of JavaScript You can insert inside the same DIV string, to test:

onMouseOver='this.style.height="100px";' onMouseOut='this.style.height="45px";'
 
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial