...

View Full Version : Scrolling Page



saeed
06-16-2007, 01:14 PM
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.

_Aerospace_Eng_
06-16-2007, 03:24 PM
Check out the "fixed" layouts here: http://www.cssplay.co.uk/layouts/

saeed
06-18-2007, 07:13 AM
oh great :thumbsup:


thats exactly I was looking for .. :)


thanks very much my friend.

saeed
06-18-2007, 08:40 AM
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.

_Aerospace_Eng_
06-18-2007, 08:49 AM
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.

saeed
06-18-2007, 09:02 AM
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.

_Aerospace_Eng_
06-18-2007, 09:11 AM
I don't really see what the issue is. Here is the relevant html. I took out the links.

<!-- 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>

saeed
06-18-2007, 09:21 AM
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.

saeed
06-18-2007, 11:04 AM
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.


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

_Aerospace_Eng_
06-18-2007, 12:15 PM
Then use this one
http://www.cssplay.co.uk/layouts/fixit.html

saeed
06-18-2007, 12:36 PM
done! :thumbsup:


thanks my friend.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum