17 Replies Latest reply: May 6, 2012 4:39 PM by mytaxsite.co.uk RSS

    Help with floating table

    MelodyGrace99

      I'm helping my dad with a website and he wants the table sidebar i have to float down the page when the viewer scrolls. I know next to nothing about coding and could use some help updating it to be a floating table.

        • 1. Re: Help with floating table
          mytaxsite.co.uk MVP

          MelodyGrace99 wrote:

           

          I'm helping my dad with a website and he wants the table sidebar i have to float down the page when the viewer scrolls. I know next to nothing about coding and could use some help updating it to be a floating table.

           

           

          Can you draw a picture as to what exactly you want to do?  Floating table may not be the ideal solution but without knowing what is required, it is impossible to give you a working solution.

          • 2. Re: Help with floating table
            MelodyGrace99 Community Member

            What happening is he has a lot of text on the page. So the user has to scoll down a lot. The navigation bar is on the left hand side of the page, and when scolling to the bottom, it cannot be seen anymore. To keep from having to scoll back to the top of the page, We want the navigation bar to always be on the side.

             

            Currently I have a table as the navigation bar, but I may be changing this to look a little different using graphics instead. But either way, the navigation bar would need to move with the scoll bar.

             

            Thanks in advance for any help you can provide.

            • 3. Re: Help with floating table
              mytaxsite.co.uk MVP

              Something like this will work:

               

               

              <div id="masthead">

                  <div id="logo">

                  </div>

                  <div id="header">

                  </div>

              </div>

              <div id="container">

                  <div id="left_col">

                  <------ Put your menu here ------>

                  </div>

                  <div id="page_content" style="overflow: auto;">

                 

                  <------ Put your content here ------>

                 

                  </div>

              </div>

              <div id="footer">

              </div>

               

               

               

              And the realted CSS will look like this:

               

               


              body {

                  margin: 0;

                  padding: 0;

              }

               

              #masthead {

                  min-width: 600px;

              }

               

              #logo {

                  float: left;

                  width: 200px;

              }

               

              #header {

                  margin-left: 200px;

              }

               

              #container {

                  clear: both;

                  min-width: 600px;

              }

               

              #left_col {

                  float: left;

                  width: 200px;

              }

               

              #page_content {

                  margin-left: 200px;

              }

               

              #footer {

                  clear: both;

              }

               

               

               

               

              I suggest create a test page first and let us know if you need any further help to modify it.

               

              Good luck.

              • 4. Re: Help with floating table
                MelodyGrace99 Community Member

                Ok. So the first part of what you sent me is pretty straight forward, I have a test page with a table and text below it. But I"m not sure what to do when it comes to the CSS stuff...

                • 5. Re: Help with floating table
                  mytaxsite.co.uk MVP

                  Copy the css into a text file and save it in a folder called css.  Then link that file by using this code:

                   

                   

                  <head>

                  <title>Your title goes here</title>

                  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

                  <link href="../css/style.css" rel="stylesheet" type="text/css" />

                  </head>

                   

                   

                   

                   

                  You can name the file anything you want but I have used the name: style.css so keep it simple so that it works as in my example.

                  • 6. Re: Help with floating table
                    Nancy O. MVP

                    Unless you're display tabular data, don't use tables.  You don't need them. 

                     

                    What you want is a menu with position:fixed.  See link below.  View page source to see the code.

                    http://alt-web.com/TEMPLATES/FixedLayout.shtml

                     

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists 

                    http://alt-web.com/

                    http://twitter.com/altweb

                    http://alt-web.blogspot.com/

                    • 7. Re: Help with floating table
                      MelodyGrace99 Community Member

                      Ok, I have the text file saved and now i'm trying to figure out where the new piece of code you sent me fits. I'm sorry i'm so slow with this. Here is what I have currently..

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                      <html xmlns="http://www.w3.org/1999/xhtml">

                      <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                      <title>Untitled Document</title>

                      </head>

                       

                      <body>

                      <div id="masthead">

                       

                          <div id="logo">

                       

                          </div>

                       

                          <div id="header">

                       

                          </div>

                       

                      </div>

                       

                      <div id="container">

                       

                          <div id="left_col">

                            <table width="188" border="1">

                            <tr>

                              <td>Test 1 </td>

                            </tr>

                            <tr>

                              <td>Test 2 </td>

                            </tr>

                            <tr>

                              <td>Test 3 </td>

                            </tr>

                            <tr>

                              <td>Test 4 </td>

                            </tr>

                          </table>

                          </div>

                       

                        <div id="page_content" style="overflow: auto;">

                            <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>

                          </div>

                       

                      </div>

                       

                      <div id="footer">

                       

                      </div>

                      </body>

                      </html>

                      • 8. Re: Help with floating table
                        mytaxsite.co.uk MVP

                        Just after this line:

                         

                         

                        <title>Untitled Document</title>

                         

                        It should look like this after you have saved the files:

                         

                        http://screencast.com/t/nwLBMPsr

                         

                        The table will be replaced with lists to make it faster to load but forst get the structure in place.

                         

                        Hope this helps.

                        • 9. Re: Help with floating table
                          MelodyGrace99 Community Member

                          The table is still above the text, not on the side like in the image you sent.

                           

                          I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css

                           

                          The code i have now is below... Not sure what I'm doing wrong :/

                           

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                          <html xmlns="http://www.w3.org/1999/xhtml">

                          <head>

                          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                          <title>Untitled Document</title>

                          <head>

                           

                          <title>style.css</title>

                           

                          <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

                           

                          <link href="../css/style.css" rel="stylesheet" type="text/css" />

                           

                          </head>

                           

                          <body>

                          <div id="masthead">

                           

                              <div id="logo">

                           

                              </div>

                           

                              <div id="header">

                           

                              </div>

                           

                          </div>

                           

                          <div id="container">

                           

                              <div id="left_col">

                                <table width="188" border="1">

                                <tr>

                                  <td>Test 1 </td>

                                </tr>

                                <tr>

                                  <td>Test 2 </td>

                                </tr>

                                <tr>

                                  <td>Test 3 </td>

                                </tr>

                                <tr>

                                  <td>Test 4 </td>

                                </tr>

                              </table>

                              </div>

                           

                            <div id="page_content" style="overflow: auto;">

                                <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>

                              </div>

                           

                          </div>

                           

                          <div id="footer"></div>

                          </body>

                          </html>

                          • 10. Re: Help with floating table
                            John Waller MVP

                            Change

                             

                            <link href="../css/style.css" rel="stylesheet" type="text/css" />

                             

                            to

                             

                            <link href="css/style.css" rel="stylesheet" type="text/css" />

                            • 11. Re: Help with floating table
                              MelodyGrace99 Community Member

                              The table is now on the left hand side. But when i added more content (so you have to scroll to see the bottom) The table still stays at the top of the page. Is there something else I need to do?

                               

                              Thanks again for all of the help. I really appreciate it

                              • 12. Re: Help with floating table
                                mytaxsite.co.uk MVP

                                The table is now on the left hand side. But when i added more content (so you have to scroll to see the bottom) The table still stays at the top of the page. Is there something else I need to do?

                                 

                                 

                                 

                                Is there anyway to can post your page online so that we can see it how it is working.  The code I have given is designed to make your table/menu (on the left hand side) to remain visible on the screen and the users can scroll down using the scroller bars to read the long text that is visible on the right.  I hope I have got this right or have I misunderstood your needs?

                                 

                                The table/menu will always be on the screen;  It won't move a single iota.

                                • 13. Re: Help with floating table
                                  John Waller MVP

                                  Rather than giving us periodic updates from which we can guess a next step, it would be best if you upload the page as it stands to the web so we can view it in our browsers and provide definitive, useful responses.

                                  • 14. Re: Help with floating table
                                    MelodyGrace99 Community Member

                                    I wish I could upload it, but I dont have a web address to upload too. I'm building this so it can be sent to the university to be uploaded

                                     

                                    The goal is so that it remains on the left hand side, but right now when scrolling to see more text, it is is moving with the text and disapears....

                                    • 15. Re: Help with floating table
                                      mytaxsite.co.uk MVP

                                      Make a small change:  The first line of the DIV should look like this:

                                       

                                       

                                      <div id="page_content" style="overflow: auto; height: 600px;">

                                       

                                      Instead of:

                                       

                                       

                                      <div id="page_content" style="overflow: auto;">

                                       

                                       

                                      Now let us know if this is what you want.

                                      • 16. Re: Help with floating table
                                        MelodyGrace99 Community Member

                                        It works! Yes this is what I was looking for. Thank you so much! And thanks for being patient with me

                                        • 17. Re: Help with floating table
                                          mytaxsite.co.uk MVP

                                          It works! Yes this is what I was looking for. Thank you so much!

                                           

                                          Good and thanks for the feedback.  Please mark this thread has answered so that you can start a new thread when you have a new problem.

                                           

                                          Good luck.