Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question CSS/HTML/Scrollbar

    I have 2 divs. one is set to a set width but a variable height. The second is much smaller. Now when the content is displayed in Div 1, it goes below the page and is unviewable. I can set overflow:auto; on that div, however want to scroll the whole page, not just the one div. What should i do? I've tried nesting both divs in a mainbody div, however that doesn't work. I'd appreciate any help offered.

    Thanks

    Storm

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    StormFury,

    Your post doesn't have a lot of information we look for such as a link to the page or copy of the code. That having been said, it sounds like DIV1 is a variable height but the containing DIV around it or the site container is fixed height, i could be wrong but best guess with what you described.

    You can either remove the fixed height of the container DIV or:

    Set DIV1 to a fixed height, make css code:
    Code:
    DIV1 { height:800px; width:500px; overflow-x: hidden; overflow-y: scroll;}
    adjust the width and heigth as needed. THis should make both the containing DIV as well as the web page scrollable in so far as fitting content.

    ARCLite Studio

    Let me know if this is what works for you, or provide link to page and will look at it again.

  • Users who have thanked ARCLite Studio for this post:

    StormFury (02-28-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Here is my code. When i set the height to say 700 it doesn't even make the scrollbar appear so it cannot scroll.

    Thanks

    Code:
    <head>
    <title>Welcome …</title>
    <meta name="description" content="…" />
    <meta name="keywords" content="…" />
    <meta name="author" content="…" />
    <style type="text/css">
    body 
    {
    background:#000000;
    }
    div.content
    {
    border:1px dotted gray;
    color:#ffffff; 
    text-align:justify;
    font-size:12pt;
    width:530px;
    height:750px;
    position:fixed;top:40px;left:40px;
    text-indent:25px;
    padding-right:10px;
    padding-left:10px;
    overflow:auto;
    }
    div.tweet
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:fixed;top:40px;left:600px;
    text-indent:25px;
    }
    div.media
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:fixed;top:440px;left:600px;
    text-indent:25px;
    }
    h1 
    {
    text-align:center;
    font-size:23px;
    text-indent:0px;
    }
    </style>
    
    </head>
    <body>
    <div class="content">
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
    </p>
    <p>
    Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
    </p>
    <p>
    Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
    </p>
    <p>
    Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
    </p>
    <p>
    Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
    </p>
    <p>
    Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
    </p>
    <br />
    <H1>...Welcome to …</H1>
    <br />
    </div>
    <div class="tweet">
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 30000,
      width: 'auto',
      height: 300,
      theme: {
        shell: {
          background: '#000000',
          color: '#ffffff'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#ffffff'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        behavior: 'all'
      }
    }).render().setUser('tviernion').start();
    </script>
    </div>
    <div class="media">
    <a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a>
    </body>
    Last edited by VIPStephan; 03-09-2012 at 12:27 AM. Reason: removed personal info upon request

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Just tried to post my code for you but i guess it didn't take. I have set my height to 750 on the div that encases the taller div however it shows it at the very top. Where can i post the code for you to look at it?

    S

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by StormFury View Post
    Just tried to post my code for you but i guess it didn't take. I have set my height to 750 on the div that encases the taller div however it shows it at the very top. Where can i post the code for you to look at it?

    S
    You can see a "#" in the top line of the reply box.
    when you click it [CODE][/CODE] appears in the reply box.
    Paste your code between [CODE] and [/CODE]
    Last edited by Lerura; 02-28-2012 at 10:43 PM.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by StormFury View Post
    Just tried to post my code for you but i guess it didn't take.
    Your post was in the moderation queue. You have probably used a word or character combination that has triggered the spam filter. I’ve approved the post and it’s visible now.

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    StormFury,

    1.) Bottom DIV with class=media was not closed

    2.) in front of your CLASS declarations remove "div" so div.content would be .content

    3.) if you want both the div as well as the page to be scrollable you need to change POSITION in the class .content to RELATIVE, otherwise with position as FIXED the div will be scrollabel but the screen will not

    here is corrected code, try it and see if it works like you intended:
    Code:
    <head>
    <title>Welcome –</title>
    <meta name="description" content="…" />
    <meta name="keywords" content="…" />
    <meta name="author" content="…" />
    <style type="text/css">
    body 
    {
    background:#000000;
    }
    .content
    {
    border:1px dotted gray;
    color:#ffffff; 
    text-align:justify;
    font-size:12pt;
    width:530px;
    height:750px;
    position:relative;top:40px;left:40px;
    text-indent:25px;
    padding-right:10px;
    padding-left:10px;
    overflow:auto;
    }
    .tweet
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:fixed;top:40px;left:600px;
    text-indent:25px;
    }
    .media
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:fixed;top:440px;left:600px;
    text-indent:25px;
    }
    h1 
    {
    text-align:center;
    font-size:23px;
    text-indent:0px;
    }
    </style>
    
    </head>
    <body>
    <div class="content">
      
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
    </p>
    <p>
    Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
    </p>
    <p>
    Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
    </p>
    <p>
    Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
    </p>
    <p>
    Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
    </p>
    <p>
    Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
    </p>
      <br />
      <h1>...Welcome …</h1>
      <br />
    </div>
    <div class="tweet">
      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 30000,
      width: 'auto',
      height: 300,
      theme: {
        shell: {
          background: '#000000',
          color: '#ffffff'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#ffffff'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        behavior: 'all'
      }
    }).render().setUser('tviernion').start();
    </script>
    </div>
    <div class="media">
    <a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a></div>
    </body>
    </html>
    Last edited by VIPStephan; 03-09-2012 at 12:33 AM. Reason: removed personal info upon request

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thanks.

    I see where i went wrong with the relative and the fixed code. Now, when i change the .media and the .tweet to relative they appear at the bottom of the code. what would be the appropriate way for me to code that?

    S

  • #9
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Set their position to "absolute" and then move or adjust the TOP and LEFT of each back to the appropriate position, after that you should be fun.


    The general rule for basic page layouts is as follows:

    make a CONTAINER div, position it relative, give it a width and height, set margin-left:auto; and margin-right:auto;


    This basically creates a box to contain the website that is centered on the viewers screen regardless of screen dimensions.

    Next, put all other DIV's inside of the CONTAINER div and set there position as ABSOLUTE, position each with TOP and LEFT as needed. This keeps ALL divs of the website in relation to eachother and not in erlation to the top left corner of the browser window.

    Now this is not a "Golden Rule" of all web page design as there are lots of ways to do things, but it is easy to understand and manuever DIV's as needed.

  • #10
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I do appreciate this. Container is relative, all the div's inside it are absolute. I do appreciate this. now the footer, rather the border around it keeps trailing into the abyss. How would i do this? Pad the bottom less?

    S

  • #11
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Stormfury,

    I don't remeber seeing a div with id "footer" or anything like that, did you add to/revise code with a new div? If so provide full code again and i'll try to answer.

  • Users who have thanked ARCLite Studio for this post:

    StormFury (03-01-2012)

  • #12
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Updated code.

    I'm sure i am missing something. here is the updated code:

    Code:
    <head>
    <title>Welcome …</title>
    <meta name="description" content="…" />
    <meta name="keywords" content="…" />
    <meta name="author" content="…" />
    <style type="text/css">
    body 
    {
    background:#000000;
    }
    .container
    {
    position:relative;
    width:auto;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    }
    .content
    {
    border:1px dotted gray;
    color:#ffffff; 
    text-align:justify;
    font-size:12pt;
    width:530px;
    height:auto;
    position:absolute;top:40px;left:40px;
    text-indent:25px;
    padding-right:10px;
    padding-left:10px;
    //overflow:auto;
    }
    .tweet
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:absolute;top:40px;left:610px;
    text-indent:25px;
    }
    .footer
    {
    color:#ffffff;
    border:1px dotted gray;
    position:relative
    }
    .media
    {
    color:#ffffff; 
    border:1px dotted gray;
    text-align:justify;
    font-size:12pt;
    width:300px;
    position:absolute;top:450px;left:610px;
    text-indent:25px;
    }
    h1 
    {
    text-align:center;
    font-size:23px;
    text-indent:0px;
    }
    </style>
    
    </head>
    <body>
    <div class="container">
    <div class="content">
      
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
    </p>
    <p>
    Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
    </p>
    <p>
    Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
    </p>
    <p>
    Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
    </p>
    <p>
    Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
    </p>
    <p>
    Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
    </p>
      <br />
      <h1>...Welcome …</h1>
      <br />
    </div>
    <div class="tweet">
      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 30000,
      width: 'auto',
      height: 300,
      theme: {
        shell: {
          background: '#000000',
          color: '#ffffff'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#ffffff'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        behavior: 'all'
      }
    }).render().setUser('tviernion').start();
    </script>
    </div>
    <div class="media">
    <a href="http://www.facebook.com/profile.php?id=…" target="_blank"><img 
    
    src="http://example.com/contest/images/facebook.png" alt="Like Us on Facebook" /></a>
    </div>
    </div>
    <div class="footer">
    Copyright 2010 - 2012 …  All Rights Reserved
    </div>
    </body>
    </html>
    Last edited by VIPStephan; 03-09-2012 at 12:39 AM. Reason: removed personal info upon request

  • #13
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Been playing with it, but still cannot get the footer at the bottom. I know it is something simple that i'm missing. Any pointers?

  • #14
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    You can delete the DIV's and CSS for (side-block2) and (side-block2-footer) if you want, they were put there to support any future content you might want/need.

    Code:
    <!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=utf-8" />
    <title>Untitled Document</title>
    <style>
    body 
    {
    background:#000000;
    }
    
    #container {
    	position:relative;
    	width:930px;
    	height:1240px;
    	margin-left:auto;
    	margin-right:auto;
    }
    #content
    {
    	border:1px dotted gray;
    	color:#ffffff;
    	text-align:justify;
    	font-size:12pt;
    	width:530px;
    	height:1115px;
    	position:absolute;
    	top:40px;
    	left:25px;
    	text-indent:25px;
    	padding-right:10px;
    	padding-left:10px;
    //overflow:auto;
    }
    #tweet
    {
    	color:#ffffff;
    	border:1px dotted gray;
    	text-align:justify;
    	font-size:12pt;
    	width:300px;
    	position:absolute;
    	top:40px;
    	left:607px;
    	text-indent:25px;
    	height: 388px;
    }
    #footer
    {
    color:#ffffff;
    border:1px dotted gray;
    
    }
    
    h1 
    {
    text-align:center;
    font-size:23px;
    text-indent:0px;
    }
    #side-block2 {
    	position:absolute;
    	width:303px;
    	height:719px;
    	z-index:1;
    	left: 607px;
    	top: 439px;
    	background-color:#009;
    }
    #copyright {
    	position:absolute;
    	width:550px;
    	height:69px;
    	z-index:1;
    	left: 25px;
    	top: 1165px;
    	color:#FF0;
    	border:1px dotted gray;
    	text-align: center;
    	font-weight:bold;
    }
    #side-block2-footer {
    	position:absolute;
    	width:303px;
    	height:72px;
    	z-index:1;
    	left: 608px;
    	top: 1165px;
    	background-color:#06F;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="content">
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc mauris, lobortis ultrices lacinia ut, molestie ut neque. Nullam vehicula hendrerit velit vitae accumsan. Phasellus eu risus a massa sodales iaculis. Morbi ac fermentum nisi. In molestie ornare libero at elementum. In eu elit eu enim cursus venenatis id ut nisi. Quisque gravida, orci ac facilisis ultrices, lorem sapien ultricies elit, a gravida nulla nunc eget justo. In sapien libero, sagittis sed interdum eget, molestie tincidunt mauris. Integer consequat tempus ipsum non dictum. Mauris ipsum metus, rutrum eget cursus sit amet, sollicitudin at risus. Integer ultricies rhoncus aliquet. Sed dolor turpis, fermentum id congue et, varius id magna. Integer vel dapibus eros. Donec pharetra hendrerit sem, et egestas ipsum malesuada sit amet.
    </p>
    <p>
    Nam purus ligula, luctus et dictum a, scelerisque ut eros. Aenean pellentesque auctor elit, et ullamcorper ligula porttitor vel. Phasellus fringilla adipiscing est, sit amet eleifend tortor viverra ut. Phasellus quis nisl euismod odio sagittis porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur ultrices mi, vitae vulputate felis aliquet scelerisque. Ut hendrerit metus sed nisl convallis eget dapibus magna tristique. Integer quis dictum purus.
    </p>
    <p>
    Fusce viverra, leo laoreet feugiat congue, quam lacus facilisis nibh, in sagittis metus enim ut erat. Nam suscipit lorem ac sem laoreet lacinia. Pellentesque turpis ligula, luctus aliquet tristique vitae, fringilla vitae ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce dictum ultrices nibh, non aliquam erat porta eget. Aenean et gravida nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel diam ac lectus faucibus ultrices eu non velit. Sed tempor molestie quam ut vulputate. Sed sodales orci nunc, ut dictum magna.
    </p>
    <p>
    Morbi elit quam, vestibulum quis fringilla at, cursus in urna. Curabitur lobortis, erat vel scelerisque hendrerit, tellus augue ornare purus, a accumsan neque nisl quis nibh. Aliquam hendrerit eros erat. Fusce ultrices tortor id diam sollicitudin dapibus. Vivamus placerat, erat a congue pulvinar, justo sapien gravida ante, nec egestas quam lorem a nisi. Nam facilisis nibh in risus commodo commodo. Praesent vulputate lobortis felis in dictum. Nullam consequat congue nunc at molestie. Phasellus sed mauris massa. Quisque egestas pellentesque quam. Ut iaculis semper tortor, vel lobortis diam ultricies nec. Suspendisse orci purus, accumsan ut luctus a, mattis sit amet tortor. Pellentesque turpis nisi, vehicula in interdum ac, egestas eget arcu. Nulla facilisi. Donec vulputate arcu vel felis adipiscing sagittis.
    </p>
    <p>
    Aenean vitae augue tortor, ac gravida eros. Morbi in mi erat. Quisque ipsum tortor, accumsan non cursus non, vulputate id nulla. Phasellus in elit tellus. Proin nec nisl vitae libero bibendum venenatis nec nec neque. Mauris ac felis risus. Duis interdum tempus feugiat.
    </p>
    <p>
    Fusce quis ligula libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vitae facilisis diam. Morbi vel leo metus, ut commodo quam. Curabitur fringilla elit viverra sem bibendum quis feugiat ipsum cursus. Vestibulum purus enim, porta vehicula vulputate eu, scelerisque auctor odio. Aliquam aliquet imperdiet mi id vestibulum. In hac habitasse platea dictumst. Donec eu dolor eget neque vehicula rhoncus nec id justo. Sed viverra eros nec metus rhoncus pretium.
    </p>
      
      <br />
      <h1>...Welcome …</h1>
      <br />
    </div><!-- End content div -->
    <div id="tweet">
      <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 5,
      interval: 30000,
      width: 'auto',
      height: 300,
      theme: {
        shell: {
          background: '#000000',
          color: '#ffffff'
        },
        tweets: {
          background: '#000000',
          color: '#ffffff',
          links: '#ffffff'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        behavior: 'all'
      }
    }).render().setUser('tviernion').start();
    </script>
    </div><!-- End Tweet Div -->
    <div id="side-block2"></div>
    <div id="copyright">Copyright 2010 - 2012 …  All Rights Reserved</div><!-- end copyright div -->
    <div id="side-block2-footer"></div>
    </div><!-- end container div -->
    </body>
    </html>
    Last edited by VIPStephan; 03-09-2012 at 12:40 AM. Reason: removed personal info upon request

  • Users who have thanked ARCLite Studio for this post:

    StormFury (03-08-2012)

  • #15
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That did it.. I see where i went wrong. I appreciate all you're help! Smashing job.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •