Noob question

F

flatL1NE

New Member
I wish to make a web page with an anchored Header on top, scrollable Main body in the middle and an anchored Footer at the bottom. The point is that only the 1000+ rows of text in the Main body should be scrollable, while the Header and Footer should always be visible so I don't have to scroll through thousands of rows to reach the links in either the Header or the Footer but always have them accessible while I can freely scroll through the text of the Main body. Using Adobe Dreamweaver, but I'm quite new to web editing, which is obvious :), however I'm not asking for some detail "click here, then there" guides, just some pointers at least.
Many thanks in advance.
 
C

camilo.nevarez

New Member
well, the first simple thing i can think is do frames. one frame on top with top.html center frame center.html(content) and bottom.html(footer) this would be inside index.html.


the ther thing would be to add a text menu under each article like {home} {top} {next} prev}

ya know? simple.

or even use a dynamic scrolling link box somethign you can find on dynamicdrive.com
 
PixelPusher

PixelPusher

Super Moderator
Staff member
There are quite a few unnecessary tags in the cssplay example. For example: there is no need for display:block on a division, that is it's default setting.
The code below is tested for Chrome, Safari 4, FF 3.6, IE8, Opera 10. I have not checked on earlier browsers however the css I have used is mostly CSS 1, so there should not be any issues.

Code: 
body {
    margin:0;
    padding:0;
    height:100%;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    font-size:65%;
}
div.hdr, div.ftr {
   position:fixed;
   z-index:2;
   left:50%;
   margin-left:-330px;
   width:660px;
   height:100px;
   border:solid 1px #a1a1a1;
   background-color:#CCC;
   font-size:2.5em;
   font-weight:bold;
   text-transform:capitalize;
   text-align:center;
   line-height:90px;
   color:#555;
}
div.hdr {
   top:0;
}
div.ftr {
   bottom:0;
}
div.main {
   position:relative;
   z-index:1;
   left:50%;
   margin-left:-330px;
   overflow:auto;
   padding:100px 0;
   width:660px;
   height:100%;
   border-left:1px solid #a1a1a1;
   border-right:1px solid #a1a1a1;
   font-size:1em;
   color:#555;
}
h4 {
   text-transform:capitalize;
   color:#0088cc;
   padding:0 20px;
   margin:25px 0 0;
}
p {
   padding:0 20px 2px;
   margin:5px 0;
}
HTML: 
<body>
<div class="hdr">&lsquo;header&rsquo;</div>
<div class="main">
	<h4>section one</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a arcu libero, non luctus ipsum. Proin quis sem vel urna varius tempus a vel mauris. In hac habitasse platea dictumst. Quisque a volutpat velit. Maecenas libero ante, dictum nec iaculis sed, congue ac nisi. Etiam at erat non nisl accumsan tristique. Mauris varius risus vel ante varius a posuere metus aliquet. Ut a tincidunt ipsum. Maecenas mauris augue, pharetra quis tempus ac, imperdiet vel leo.</p>
    <p>Aliquam erat volutpat. Sed lobortis, nibh in hendrerit gravida, diam magna ultricies justo, sit amet suscipit sem ipsum ac massa. Proin purus ipsum, fringilla nec viverra in, volutpat ut elit. Morbi metus dui, accumsan et luctus in, placerat eu risus. Pellentesque risus leo, iaculis sed dictum quis, pretium sagittis ligula.</p>
    <h4>section two</h4>
    <p>Etiam porttitor semper massa. Suspendisse porta malesuada est at elementum. Donec euismod ullamcorper sapien, vitae mollis massa sagittis id. Donec in tincidunt ante. Duis at lorem nulla, nec rutrum quam. Integer pellentesque, turpis sit amet dapibus facilisis, elit orci egestas eros, eget placerat velit lectus ut nulla. Praesent convallis dapibus tellus, vitae commodo neque condimentum volutpat.</p>
    <p>Nullam et sem tellus. Nulla quis tellus sit amet arcu mattis tincidunt sed at magna. Cras elementum, nisi a vulputate commodo, quam neque rutrum odio, ac mollis mauris nisi mollis ligula. Proin tincidunt mauris sit amet arcu lobortis consectetur. Nulla facilisi. Nunc vitae aliquam risus. Sed purus nunc, facilisis sed sodales non, ullamcorper ac risus. Nullam id est ut ligula commodo convallis sit amet vitae enim. Integer sagittis fringilla pharetra. </p>
    <p>Donec scelerisque leo eu odio mattis vulputate. Ut fringilla, ligula id consequat consequat, purus ante ullamcorper augue, vitae pulvinar enim nisl non massa. Duis mattis condimentum ipsum facilisis varius. Curabitur porttitor libero ut nisl aliquet vitae viverra nibh vulputate. Nunc cursus porttitor iaculis. </p>
    <h4>section three</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a arcu libero, non luctus ipsum. Proin quis sem vel urna varius tempus a vel mauris. In hac habitasse platea dictumst. Quisque a volutpat velit. Maecenas libero ante, dictum nec iaculis sed, congue ac nisi. Etiam at erat non nisl accumsan tristique. Mauris varius risus vel ante varius a posuere metus aliquet. Ut a tincidunt ipsum. Maecenas mauris augue, pharetra quis tempus ac, imperdiet vel leo.</p>
    <p>Aliquam erat volutpat. Sed lobortis, nibh in hendrerit gravida, diam magna ultricies justo, sit amet suscipit sem ipsum ac massa. Proin purus ipsum, fringilla nec viverra in, volutpat ut elit. Morbi metus dui, accumsan et luctus in, placerat eu risus. Pellentesque risus leo, iaculis sed dictum quis, pretium sagittis ligula.</p>
    <h4>section four</h4>
    <p>Etiam porttitor semper massa. Suspendisse porta malesuada est at elementum. Donec euismod ullamcorper sapien, vitae mollis massa sagittis id. Donec in tincidunt ante. Duis at lorem nulla, nec rutrum quam. Integer pellentesque, turpis sit amet dapibus facilisis, elit orci egestas eros, eget placerat velit lectus ut nulla. Praesent convallis dapibus tellus, vitae commodo neque condimentum volutpat.</p>
    <p>Nullam et sem tellus. Nulla quis tellus sit amet arcu mattis tincidunt sed at magna. Cras elementum, nisi a vulputate commodo, quam neque rutrum odio, ac mollis mauris nisi mollis ligula. Proin tincidunt mauris sit amet arcu lobortis consectetur. Nulla facilisi. Nunc vitae aliquam risus. Sed purus nunc, facilisis sed sodales non, ullamcorper ac risus. Nullam id est ut ligula commodo convallis sit amet vitae enim. Integer sagittis fringilla pharetra. </p>
    <h4>section five</h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a arcu libero, non luctus ipsum. Proin quis sem vel urna varius tempus a vel mauris. In hac habitasse platea dictumst. Quisque a volutpat velit. Maecenas libero ante, dictum nec iaculis sed, congue ac nisi. Etiam at erat non nisl accumsan tristique. Mauris varius risus vel ante varius a posuere metus aliquet. Ut a tincidunt ipsum. Maecenas mauris augue, pharetra quis tempus ac, imperdiet vel leo.</p>
    <p>Aliquam erat volutpat. Sed lobortis, nibh in hendrerit gravida, diam magna ultricies justo, sit amet suscipit sem ipsum ac massa. Proin purus ipsum, fringilla nec viverra in, volutpat ut elit. Morbi metus dui, accumsan et luctus in, placerat eu risus. Pellentesque risus leo, iaculis sed dictum quis, pretium sagittis ligula.</p>
    <p>Etiam porttitor semper massa. Suspendisse porta malesuada est at elementum. Donec euismod ullamcorper sapien, vitae mollis massa sagittis id. Donec in tincidunt ante. Duis at lorem nulla, nec rutrum quam. Integer pellentesque, turpis sit amet dapibus facilisis, elit orci egestas eros, eget placerat velit lectus ut nulla. Praesent convallis dapibus tellus, vitae commodo neque condimentum volutpat.</p>
    <p>Nullam et sem tellus. Nulla quis tellus sit amet arcu mattis tincidunt sed at magna. Cras elementum, nisi a vulputate commodo, quam neque rutrum odio, ac mollis mauris nisi mollis ligula. Proin tincidunt mauris sit amet arcu lobortis consectetur. Nulla facilisi. Nunc vitae aliquam risus. Sed purus nunc, facilisis sed sodales non, ullamcorper ac risus. Nullam id est ut ligula commodo convallis sit amet vitae enim. Integer sagittis fringilla pharetra. </p>
</div>
<div class="ftr">&lsquo;footer&rsquo;</div>
</body>
 
You must log in or register to reply here.
Top