Absolut positioning
I came across many webs which are very long, mainly blogs with a lot of text, so to jump from page to page you always had to scroll the whole page up or down, this can be avoided by absolute positioning, so to say the links or other parts of the page stay on the same place while the rest of the page is moving.
first we define in the head of the page the coordinates for our absolute positioned /unmovable part of the page, we name it box, the tag is as follows:
| <style> #box { position:fixed; top:200px; left:20px; width:150px; height:300px; } </style> |
top means 200pixel from top - left means 20pixel from left of the screen (you can also do it from the "right" side), width means the width oft he box and height defines the height of our box, all in pixel.
and then we just find the links or text which we want to position absolute and tag it with the following, so this will stay absolute, can be easily used for links as you do not need to scroll all page then.
| <body>.... ..... <div id="box"> text tex text text <br> links links <br> </div> other text not defined absolute ....... </body> |
you can put the <div id="box"> tag anywhere in the page within the <body> tags
all togather it looks like this, i put in a table with height 900 therefor you can see the page moving in color bg="#ffff99"...
| <html> <head> <title>absolut positioning</title> <style> #box { position:fixed; top:200px; left:20px; width:150px; height:300px; } </style> </head> <body> <div id="box"> text tex text text <br> links links <br> </div> <table width="500" border="1" align="center" height="900"> <tbody> <tr> <td bgcolor="#ffff99" valign="bottom" align="center"> text <br> <br> text </td> </tr> </tbody> </table> </body> </html> |
Lets do nice frames around pictures of any sice,
first the defs in the head for the pictures, then the tags before the pics, within the body tags
| <html> <head> <style> #pic1 img {border:1px solid #000099; margin:5px; padding:7px; } #pic2 img {border:7px solid #ffff99; margin:5px; padding:2px; } </style> </head> <body> ..... <div id="pic1"> <img height="246" width="184" title="Lilie" src="lilie.jpg" alt=""> </div> <div id="pic2"> <img height="220" width="200" title="Schach" src="schachb.jpg" alt=""> </div></div> </body> </html> |
the two pictures with different frames
 |
 |
"Mouseover thumbnail shows picture" in German here
I got some very nice Java script which defines - when you move over thumbnails these thumbs get shown as the full picture in a frame/ rahmen. the following Java script showing pictures when you move over the thumbs without a text under the pics is as follows, the pics have to be named bild01.jpg, bild02.jpg etc
| <script
language="JavaScript" type="text/javascript"><!-- function wechsel(nr) {document.images.bildxx.src = "bild"+nr+".jpg";} --></script> |
The page itself is more complex and you have to define the thumbnails in the head by CSS,
as well as the frame/rahmen(in german) for editing the pictures, (here without a text under the pics)
| <style
type="text/css"> <!-- #rahmen {border:0px; } #thumbs img {border:1px solid #888; width:70px; height:40px; margin:5px; } --> </style> |
see a page which is using the script or watch below how it works, move over the thumbs....
   |
|
below the whole site kept short for good overview
| <html> <head> <title>Thumbs gallery</title> <style> #thumbs img {border:1px solid #888; width:90px; height:70px; margin:5px; padding:5px; } #rahmen {border:0px; } </style> </head> <body> <table width="100%" border="1" cellspacing="2" cellpadding="2"> <tbody> <tr> <td width="150" valign="top" align="center"> <div id="thumbs"><br> <a href="#" onmouseover="wechsel('01');"><img src="bild01.jpg" alt=""></a><br> <a href="#" onmouseover="wechsel('02');"><img src="bild02.jpg" alt=""></a><br> <a href="#" onmouseover="wechsel('03');"><img src="bild03.jpg" alt=""></a><br> <br> </div> </td> <td align="center" valign="middle"> <div id="rahmen"> </div> <!-- Nummer des Bildes, das als erstes nach dem Start erscheinen soll, z.B. bild04.jpg //--> <div id="bild"><img id="bildxx" alt="" src="bild01.jpg"><br></div> </td> </tr> </tbody> </table> <script language="JavaScript" type="text/javascript"><!-- function wechsel(nr) {document.images.bildxx.src = "bild"+nr+".jpg";} --></script> </body> </html> |
below, here with a text under the pics, the pics have to be named bild01.jpg,...bild12.jpg etc
| <script
language="JavaScript" type="text/javascript"><!-- function wechsel(nr) {document.getElementById("text").innerHTML=document.getElementById("text"+nr).innerHTML; document.images.bildxx.src = "bild"+nr+".jpg";} function auf(id) {document.getElementById(id).style.visibility="visible";} function zu(id) {document.getElementById(id).style.visibility="hidden";} --></script> |
Usually i use tables in wich i put the thumbs on the left or right or top of the page and the pictuers in the center.
| <style
type="text/css"> <!-- #rahmen {border:0px; } #thumbnails2 img {border:1px solid #888; width:70px; height:40px; margin:5px; } #text {text-align:center; font-size:16px; } #textxx {display:none; } --> </style> |
the guy who sent me the script defined all positiones absolutely in the head. i prefer to use tables which adjust to the screen, see a page which is using the script here
SOFTWARE: For composing webs i use "Mozilla", for working on pictures I use "Irfan view" and
"Photoshop 7", for doing screenshots "Hypersnap dx" is good, "Process Explorer" is very good for observing the system working on the pc in real time.