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 11 of 11

Thread: Scrolling Page

  1. #1
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts

    Scrolling Page

    hello,
    I want you to see the attach gif file... I made a sketch of webpage on Corel Draw ... Its very simple and I will be working mostly on HTML, CSS and some javascripts. Now as u can see a scollbar in 'Main Content of the Website' box I dont want to move whole page.. All I want is to move just this area and other part of the webpage will be static.

    This can be done by using frames ... but I dont want to use it.. Is there any nice tip of doing the same thing.

    Any help will be appreciated.


    Thanks,


    Saeed.
    Last edited by saeed; 03-13-2009 at 10:53 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Check out the "fixed" layouts here: http://www.cssplay.co.uk/layouts/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    oh great


    thats exactly I was looking for ..


    thanks very much my friend.

  • #4
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    Hello _Aerospace_Eng_,

    It will be so nice of you if you provide me some other links as well... I have seen the code ... although its working exactly the way i want but code is very messed up. I searched for 'Fixed Layouts' on google but no luck. I send an email to the owner of that website to seek his permission but havnt received any reply yet.


    Thanks,


    Saeed.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Not sure how much more I can help you. You need to be able to understand the html. Which layout were you trying to use? They are free for use. I guess I can give you an example with all of the unnecessary html stripped out.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    I was intrested in using Fixed Layout I in which head and footer are static and the middle part of the page is dynamic ... If the end-user clicks any of the option above ... middle part of the page will only change ... although the whole page will be loaded but scrolling will only be available for middle part.

    I hope you got my point ... and yeah i can play with html codes ... am not tht good with CSS.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I don't really see what the issue is. Here is the relevant html. I took out the links.
    Code:
    <!-- Put IE into quirks mode -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout</title>
    <style type="text/css">
    html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0;
    background:rgb(209,205,193);
    font-size:76%;
    font-family:georgia, palatino linotype, times new roman, serif;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden;/* */
    }
    body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0;
    background:rgb(209,205,193);
    }
    #content {
    display:block;
    overflow:auto;
    position:absolute;
    z-index:3;
    top:150px;
    bottom:52px;
    width:640px;
    margin-left:-321px;
    left:50%;
    border-left:1px solid #000;
    border-right:1px solid #000;
    background:#fff;
    }
    * html #content {
    top:0;
    bottom:0;
    height:100%;
    width:642px;
    border-top:154px solid #fff;
    border-bottom:50px solid #fff;
    }
    #head {
    position:absolute;
    margin-left:-321px;
    left:50%;
    top:0;
    width:640px;
    min-width:640px;
    height:150px;
    background:#fff;
    font-size:1em;
    z-index:5;
    border:1px solid #000;
    }
    * html #head {
    width:642px;
    height:148px;
    }
    #foot {
    text-align:center;
    position:absolute;
    margin-left:-321px;
    left:50%;
    bottom:0;
    width:640px;
    min-width:640px;
    height:50px;
    background:url(heading.jpg);
    background-position:0 100px;
    font-size:1em;
    z-index:5;
    border:1px solid #000;
    font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
    font-weight:bold;
    color:#000;
    }
    * html #foot {
    width:642px;
    height:48px;
    }
    #content p {
    padding:5px;
    text-align:justify;
    }
    .boldhead {
    font-size:1.5em;
    font-weight:bold;
    }
    .bold {
    font-weight:bold;
    }
    .left {
    float:left;
    margin:10px;
    border:1px solid #000;
    }
    .right {
    float:right;
    margin:10px;
    border:1px solid #000;
    }
    .lefttext {
    float:left;
    width:300px;
    text-align:justify;
    }
    .righttext {
    float:right;
    width:300px;
    text-align:justify;
    }
    * html .lefttext {
    float:left;
    width:310px;
    text-align:justify;
    }
    * html .righttext {
    float:right;
    width:310px;
    text-align:justify;
    }
    </style>
    </head>
    <body>
    <div id="head">This is the header</div>
    <div id="foot">&copy; 2004/5/6 Stuart A Nicholls ~ All rights reserved.</div>
    <div id="content">
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam interdum convallis lorem. Quisque risus. Pellentesque quis diam. Curabitur diam velit, tincidunt in, aliquet convallis, pulvinar eu, risus. Nulla pretium dolor non odio. Suspendisse fermentum, leo et fermentum aliquam, eros augue dictum nisi, vitae convallis augue nulla sit amet quam. Proin fringilla. Aliquam mi ligula, auctor id, consectetuer non, eleifend ac, neque. Nam imperdiet aliquam ante. Donec quis lacus. In nec est. Mauris dictum, massa vitae placerat eleifend, felis pede tempor pede, ut consectetuer magna libero nec purus. Cras volutpat mattis erat. </p>
    	<p> Suspendisse sit amet massa. Nam congue nunc et ligula elementum tincidunt. Fusce quam dolor, placerat ut, auctor sit amet, hendrerit id, elit. Nulla vestibulum. Donec tellus urna, luctus eget, convallis non, varius ac, risus. Sed et metus vel dui posuere sodales. Fusce non magna. Suspendisse tincidunt. Mauris nonummy purus ut velit. Maecenas ligula nisl, blandit et, vestibulum et, rutrum id, ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla purus. Nullam consectetuer egestas pede. Praesent urna sapien, laoreet ut, ornare et, gravida id, arcu. Aenean interdum. Cras semper nibh at elit. Nulla varius urna vel orci. Pellentesque suscipit. Suspendisse erat neque, consequat ac, consectetuer sed, lacinia ac, lacus. Nullam elementum, arcu sed volutpat gravida, lacus tortor cursus nisl, id malesuada orci justo sed diam. </p>
    	<p> Nulla at arcu sed nisi feugiat volutpat. Pellentesque fringilla. Vestibulum hendrerit eros vitae dolor. Cras eleifend lorem at dui. Morbi eros dui, vulputate sed, malesuada semper, mattis in, neque. Mauris ac lacus vitae felis pulvinar cursus. Etiam facilisis augue sed tellus. Nam eu enim. Curabitur et justo. Aliquam ante. Etiam vestibulum, mi egestas tempus consectetuer, justo nisl nonummy nibh, nec semper leo odio ut neque. Donec purus odio, posuere ut, auctor adipiscing, vulputate ac, nisl. Ut venenatis. Donec laoreet arcu quis nunc. Ut hendrerit ligula at libero. Sed volutpat fermentum mauris. </p>
    	<p> Etiam sem ipsum, luctus adipiscing, pellentesque in, suscipit id, massa. Vestibulum commodo lacus sed nibh. Cras vehicula dolor cursus lectus. Maecenas vestibulum nibh vel libero condimentum iaculis. Nullam suscipit justo sit amet tortor. Nam fringilla elementum mauris. In laoreet, eros nec euismod ullamcorper, orci metus suscipit lacus, eu rhoncus purus neque sit amet mi. Phasellus facilisis pretium risus. Praesent id lacus et mi rutrum laoreet. Nam eu erat et libero pretium iaculis. Aenean sodales dolor at lacus. Nulla facilisi. Suspendisse potenti. Curabitur ac dui a sem tristique ultrices. Sed dignissim nisi eu metus. Aenean posuere pede eu diam. Cras leo pede, ornare vel, rhoncus a, consectetuer quis, augue. Curabitur placerat vestibulum ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc egestas risus vitae metus. </p>
    	<p> Donec ut orci sit amet nunc cursus luctus. In eleifend, nisl imperdiet tempor eleifend, mi turpis tempus est, sodales lacinia nisi mauris ac lacus. Vivamus enim. Suspendisse potenti. Maecenas vel dolor eget mauris lacinia varius. Pellentesque pharetra, leo sed venenatis elementum, arcu pede aliquam lectus, sed malesuada erat lorem eu mi. Ut vulputate aliquam pede. Pellentesque blandit pede quis ligula. Aenean nec lorem id turpis venenatis lacinia. Vestibulum mi. Sed ornare eleifend urna. Donec at nisi. Donec iaculis risus et libero. Sed varius tincidunt turpis. Vivamus dignissim congue diam. Fusce eget pede eu pede placerat congue. </p>
    	<p> Phasellus vitae justo eget nibh bibendum pretium. Cras pharetra euismod libero. Praesent vel lorem. Etiam at augue consectetuer enim ultrices laoreet. Sed lobortis pellentesque tortor. Phasellus tempus pede sed orci. Sed et libero. Quisque urna. Pellentesque lectus est, tempus in, dapibus ac, ultrices eu, diam. Maecenas ultrices rhoncus nisl. Vestibulum dictum ligula eget felis. Ut massa quam, elementum a, scelerisque sed, egestas non, urna. Vivamus quis augue sed massa rutrum condimentum. </p>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    problem solved !

    well... I was getting confused in CSS... well... lemme start working on it... and if i'll faced problems ... I'll consult u ...


    Thanks anyway for your help,


    Saeed.

  • #9
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    here is the code.... as u can see ... boxes are positioned middle of the page and there is enough space left on both the sides ... I was trying to change px values ... but it was getting worse... I don't want to leave any space from left or right side. can u help me in this please.

    Code:
    <html>
    <head>
    <title>Fixed Layout</title>
    <style type="text/css">
    html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0px none;
    background:rgb(255,255,255);
    font-size:76%;
    font-family:arial, times new roman, sans-serif;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden
    }
    body {
    height:100%;
    max-height:100%;
    overflow:hidden;
    padding:0;
    margin:0;
    border:0px none;
    background:rgb(255,255,255)
    }
    #content {
    display:block;
    overflow:auto;
    position:absolute;
    z-index:3;
    top:150px;
    bottom:52px;
    width:640px;
    margin-left:-321px;
    left:50%;
    border-left:0px solid #000;
    border-right:0px solid #000;
    background:#fff;
    }
    * html #content {
    top:0;
    bottom:0;
    height:100%;
    width:642px;
    border-top:154px solid #fff;
    border-bottom:50px solid #fff;
    }
    #head {
    text-align:center;
    position:absolute;
    margin-left:-321px;
    left:50%;
    top:0;
    width:640px;
    min-width:640px;
    height:150px;
    background:#fff;
    font-size:1em;
    font-weight:bold;
    z-index:5;
    border:0px solid #000;
    }
    * html #head {
    width:642px;
    height:148px;
    }
    #foot {
    text-align:center;
    position:absolute;
    margin-left:-321px;
    left:50%;
    bottom:0;
    width:640px;
    min-width:640px;
    height:50px;
    font-size:1em;
    z-index:5;
    border:0px solid #000;
    font-family: arial, times new roman, sans-serif;
    font-weight:bold;
    color:#000
    }
    * html #foot {
    width:642px;
    height:48px;
    }
    #content p {
    padding:5px;
    text-align:justify;
    }
    .boldhead {
    font-size:1.5em;
    font-weight:bold;
    }
    .bold {
    font-weight:bold;
    }
    .left {
    float:left;
    margin:10px;
    border:1px solid #000;
    }
    .right {
    float:right;
    margin:10px;
    border:1px solid #000;
    }
    .lefttext {
    float:left;
    width:300px;
    text-align:justify;
    }
    .righttext {
    float:right;
    width:300px;
    text-align:justify;
    }
    * html .lefttext {
    float:left;
    width:310px;
    text-align:justify;
    }
    * html .righttext {
    float:right;
    width:310px;
    text-align:justify;
    }
    </style>
    </head>
    <body>
    <div id="head">This is the header. </div>
    <div id="foot">Copyright :: Disclaimer :: Contact Us</div>
    <div id="content">
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog. </p>
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog. </p>
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.</p>
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog. </p>
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog. </p>
    	<p> That the quick brown fox jumps over the lazy dog. That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.That the quick brown fox jumps over the lazy dog.</p>
    </div>
    </body>
    </html>

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder saeed's Avatar
    Join Date
    Oct 2002
    Location
    West Yorkshire
    Posts
    343
    Thanks
    32
    Thanked 0 Times in 0 Posts
    done!


    thanks my friend.


  •  

    Posting Permissions

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