Skip navigation
Currently Being Moderated

Help with floating table

May 6, 2012 10:38 AM

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.

 
Replies
  • Currently Being Moderated
    May 6, 2012 1:51 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 2:16 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 2:43 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 2:47 PM   in reply to MelodyGrace99

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 3:25 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 3:48 PM   in reply to MelodyGrace99

    Change

     

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

     

    to

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 4:02 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 4:02 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 4:28 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 4:39 PM   in reply to MelodyGrace99

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points