Here are the codes:
|
<!DOCTYPE HTML> <html> <style type="text/css"> #fixbot { bottom:0px; } #fixright { right:0px; } #fixtop { top:0px; } div > div#fixbot { position: fixed; } div > div#fixright { position: fixed; } div > div#fixtop { position: fixed; } </style> <body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0> <div> <div id="fixbot" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; "> <p>Hello I am at the bottom!</p> </div> <div id="fixright" style="border:0px; width:100px; height:200px; text-align:center; padding:0px; top: 30%;"> <p><table height=100% valign=middle><tr><td width=100 height=200 bgcolor=#ccddcc> Right!</td></tr></table></p> </div> <div id="fixtop" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; "> <p>Hello I am at the top!</p> </div> </div> <table width="95%" align=center><tr><td> <br>line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10 <br>line 11<br>line 12<br>line 13<br>line 14<br>line 15<br>line 16<br>line 17<br>line 18<br>line 19<br>line 20 <br>line 21<br>line 22<br>line 23<br>line 24<br>line 25<br>line 26<br>line 27<br>line 28<br>line 29<br>line 30 <br>line 31<br>line 32<br>line 33<br>line 34<br>line 35<br>line 36<br>line 37<br>line 38<br>line 39<br>line 40 <br>line 41<br>line 42<br>line 43<br>line 44<br>line 45<br>line 46<br>line 47<br>line 48<br>line 49<br>line 50 <br>line 51<br>line 52<br>line 53<br>line 54<br>line 55<br>line 56<br>line 57<br>line 58<br>line 59<br>line 60 <br>line 61<br>line 62<br>line 63<br>line 64<br>line 65<br>line 66<br>line 67<br>line 68<br>line 69<br>line 70 </td></tr></table> </body> </html> |
Here is a screenshot of the HTML ran on a Google Chrome browser:
By comparing this post with the previous post (link provided above), you can quickly see the technique to add more fixed DIVs to the page.
Fixing the DIV to the middle of the right side is a bit of a challenge though. I used the "top: 30%" CSS property to fix a 200-pixel high DIV to the right. If your DIV's height is more or less, you will need to adjust the "top" percentage a bit. For example, if the height of your DIV is less than 200 pixels, you may need something like a 40% or more.
If your DIV may somehow overlap each other at certain point, you can also add the 'z-index' property to the CSS to avoid having two DIVs combined like one. You may also adjust the trasparency of each DIV so that you can still see a vague content behind the fixed DIV.
No comments:
Post a Comment