anchor id problem with fixed and scrolling divs

knoxautoguy

This problem has consumed a lot of my time, and I'm aftraid someone
will tell me that my whole approach to this objective is wrong;
however, I would like to know if there is a way to do this.

I have a web page divided into two major segments, with the top segment
fixed and the bottom segment allowed to scroll, thus giving the look of
frames without frames.

I also have anchors so that users can click on a letter of the alphabet
to jump to the first item in the scrolling section that starts with the
selected letter.

Thus clicking on "B" in the alphabet at the top of the page jumps to
the word "Bore" which is the first item that starts with "B." This is
relatively simple and works well if the page is not segmented as I have
done.

The problem is that when the browser jumps down to an anchor target,
the target scrolls to the top of the browser window instead of the top
of the div, and is hidden underneath the top segment of the page. I
can't figure out how to make the anchor target jump up to the top of
the div so that it stops at the bottom of the top segment.

I'm a newbie as anybody can readily see, so if anybody has a
suggestion, please try to put it in kindergarten terms. Of course, if
this isn't possible, I'll just have to study your answer until I do
understand it.
My HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="JavaScript" type="text/javascript"></script>
<meta name="robots" content="noindex,nofollow" />

<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />

<link rel="stylesheet" type="text/css"
href="CopyOfShopratesInProgress.css" />
<title>Shop Rates</title>
</head>
<body>
<a id="topofpage">x</a>


<div id="topsection">
 

<table summary="Top section of this page" border="0" width="100%">

<tbody>

<tr>

<td> <a href="default.html">Home</a></td>

</tr>


<tr>

<td><big><big>SHOP
RATES</big></big></td>

</tr>

<tr>

<td> Jump ahead alphabetically:</td>

</tr>

<tr>

<td>A
B
<a href="#C">C</a>
<a href="#D">D</a>
<a href="#E">E</a>
F
<a href="#G">G</a>
<a href="#H">H</a>
<a href="#I">I</a>
J
<a href="#K">K</a>
<a href="#L">L</a>
<a href="#M">M</a>
N
<a href="#O">O</a>
<a href="#P">P</a>
Q
<a href="#R">R</a>
<a href="#S">S</a>
<a href="#T">T</a>
U
<a href="#V">V</a>
W X Y Z</td>

</tr>

<tr>

<td><big><big>JOB</big></big>
</td>

<td><big><big>CODE</big></big></td>

<td><big><big>PRICE</big></big></td>

</tr>

</tbody>
</table>

</div>

<div id="bottomsection">

<a name="B">BORE</a>BLOCK FOR SLEEVE 
 

BBS
$
SLEEVE AND HONING OF 
SLEEVE ARE EXTRA

<hr align="left" width="550" />BRONZE GUIDES
 

BG
$
EACH GUIDE

<hr align="left" width="550" />


<a name="C">CAST</a>GUIDES
 

CG $
MACHINE AND INSTALL

<hr align="left" width="550" />

CHECK LINE BORE
CLB
$

<hr align="left" width="550" />

COMPRESS STRUT SPRINGS
 
CSS
$
EACH

<hr align="left" width="550" />COOK AND
CLEAN HEADS
 

HCA $
AUTO AND PICKUP HCT4 $
TRUCK, 4-CYL HEAD HCT6 $
TRUCK, 6-CYL HEAD HCAAS $
SMALL ALUMINUM HCAAL $
LARGE ALUMINUM HCASE $
SMALL ENGINE

<hr align="left" width="550" />CUT OFF
BEARINGCAB
$ 
<hr align="left" width="550" />

<a name="D">DECK</a>BLOCK 
DBA $
AUTO, PER CYLINDER
<a href="#topofpage">top of page</a>
DBT
$
TRUCK, PER CYLINDER

<hr align="left" width="550" />

<a name="E">ELECTRICAL</a>TEST
ET
$
 

<hr align="left" width="550" /> <a name="G">GRIND</a>
VALVES 

GV $
PER VALVE
<hr align="left" width="550" /><a
name="H">HELICOIL</a> 

HELA $ AUTO
PER BOLT HELT
$ TRUCK PER
BOLT

<hr align="left" width="550" />HONE BLOCK
CYLINDER 

HBA1 $ .010
- .030 NON-INDUSTRIAL HBA2
$ .030 - .060
NON-INDUSTRIAL HBI1 $
.010 - .030 INDUSTRIAL HBI2 $
.030 - .060 INDUSTRIAL

<hr align="left" width="550" /><a
href="#topofpage">top of page</a>
HONE
BLOCK CYLINDER, SMALL ENGINE 

HBSE10 $ TO
..010 OVER HBSE20
$ TO .020 OVER
HBSE30 $
TO .030 OVER HBSE40 $
TO .040 OVER HBSE50 $
TO .050 OVER

<hr align="left" width="550" />HONE KING PINS
 

HKP $
AUTO HKPT $
TRUCK

<hr align="left" width="550" />HONE AND
INSTALL ROD BUSHINGS
 

HRBA $ AUTO
<a href="#topofpage">top of page</a>
HRBT
$ TRUCK

<hr align="left" width="550" />HOT TANK
BLOCK (or <q>BAKE AND BLAST
BLOCK</q>)
 

HTBA $ AUTO
AND PICKUP HTBT
$ TRUCK HTBSE
$ SMALL ENGINE

<hr align="left" width="550" /><a
name="I">INSPECTION</a> 

I $
AUTO AND PICKUP IT $
TRUCK

<hr align="left" width="550" />INSTALL
BEARING SLEEVES 

 

IBS $
IN-LINE BORE ON BLOCK, 

PER BEARING SLEEVE

<hr align="left" width="550" />INSTALL
INJECTOR TUBES 

IIT $
PER TUBE

<hr align="left" width="550" />INSTALL VALVE
SEATS 

CHVS $ PER
SEAT

<hr align="left" width="550" /><a name="K">KNURL</a>
GUIDES 

KG $
PER GUIDE

<hr align="left" width="550" /><a
name="L">LABOR</a> 

L $
PER HOUR

<hr align="left" width="550" />LINE BORE
BLOCK 

LBA $
AUTO
LBB1 $ TRUCK
- ONE
SETUP, ONE CAP LBB2
$ TRUCK - EACH
ADDITIONAL CAP
<hr align="left" width="550" /><a
name="M">MACHINE</a>
COUNTER BORE
MCB $
<hr align="left" width="550" />MACHINE FIRE
RING MFR
$

<hr align="left" width="550" /> MAGNAFLUX
MG $

<hr align="left" width="550" />MILEAGE 

M $
PER MILE

<hr align="left" width="550" /><a name="O">OTC</a>
HOOKUP OTC
$
<hr align="left" width="550" />OVERSIZE
SEATS -- MACHINE OVERSIZE 

OSVSA $ AUTO,
PER SEAT OSVST
$ TRUCK, PER
SEAT

<hr align="left" width="550" /><a name="P">PICKUP</a>
AND DELIVERY
PD $

<hr align="left" width="550" />PLANE HEAD
 

PER CYLINDER
HMA $
AUTO HMT $
TRUCK

<hr align="left" width="550" /> <a
href="#topofpage">top of page</a>
PRESS
AXLE BEARING
AB $

<hr align="left" width="550" /> PRESSURE
CHECK HEAD 

PCH $
2-4 CYLINDERS PCH6 $
STRAIGHT 6 CYL'S

<hr align="left" width="550" /><a
name="R">RECHARGE</a>
AIR CONDITIONING
 

RA $
REFRIGERANT EXTRA, 

NFR 13412

<hr align="left" width="550" />RECONDITION
ROD 

RCRA $ AUTO,
EACH ROD RCRT
$ TRUCK, EACH
ROD

<hr align="left" width="550" />REFACE
FLYWHEEL 

RFFA1 $ AUTO,
FLAT FLYWHEEL RFFT1
$ TRUCK, FLAT
FLYWHEEL RFFA2 $
AUTO, RECESSED FLYWHEEL
RFFT2 $ TRUCK,
RECESSED FLYWHEEL

<hr align="left" width="550" />R/R CAM
BEARINGS RRCB
$
<hr align="left" width="550" />R/R GUIDE,
PRESS OUT AND INSTALL
 

RRVGA $ AUTO,
PER GUIDE RRVGT
$ TRUCK, PER
GUIDE

<hr align="left" width="550" /> <a
href="#topofpage">top of page</a>
R/R PISTON 

RRPA1 $ AUTO,
ONE PISTON ONLY RRPA
$ AUTO, PER PISTON,
 

MULITPLE PISTONS RRPT
$ TRUCK, PER
PISTON

<hr align="left" width="550" />R/R SMALL
ENGINE CRANKSHAFT
 

RSEC $ SINGLE
CYLINDER RSEC2
$ TWIN CYLINDER

<hr align="left" width="550" />R/R VALVE
SEATS 

RRSVA $ AUTO,
PULL OUT & INSTALL, 

 NO MACHINE WORK
RRSVT $ TRUCK,
PULL OUT & INSTALL, 

 NO MACHINE WORK

<hr align="left" width="550" /><a
name="S">SHARPEN</a>
CHAINSAW BLADE
SHARP $
<hr align="left" width="550" /> SLEEVE BORE
MOTORCYCLE 

OR 4-WHEELER SBM
$
<hr align="left" width="550" /><a name="T">TURN</a>
DRUM 

TDA $
AUTO TDST $
SMALL TRUCK TDT
$
TRUCK TLTD $
LARGE TRUCK DRUM

<hr align="left" width="550" /> <a
href="#topofpage">top of page</a>
TURN ROTOR 

TR $
AUTO TRST $
SMALL TRUCK TRT
$
TRUCK

<hr align="left" width="550" /><a name="V">VALVE</a>
JOB 

PER CYLINDER VJA
$
AUTO VJT2 $
TRUCK, 2 VALVES PER CYL
VJT4 $ TRUCK,
4 VALVES PER CYL VJT6
$ TRUCK, 6 VALVES PER
CYL VJSE $
SINGLE CYLINDER VJSE $
TWIN CYLINDER

<hr align="left" width="550" /> 

 

<a href="#topofpage">top
of page</a>
 

 

<a href="default.html">Home</a></div>

</body>
</html>
The related CSS code for this page is:
div#topsection { position:fixed;
top: 0pt;
background-color: rgb(206, 255, 255);
width:100%;
z-index:2;
}

div#bottomsection {position:absolute;
top:165px;
z-index:1;
}
span.topofpage { display: block;
position: absolute;
right: -20%;
}

span.alphabet { padding: 1px;
background-color: rgb(206, 255, 255);
font-weight: normal;
color: black;
display: inline;
}

span.title { font-weight: bold;
color: black;
display: block;
position: relative;
}

span.job { font-weight: bold;
color: rgb(0, 75, 24);
display: inline;
}

span.code { font-weight: bold;
color: blue;
display: inline;
position: absolute;
left: 350px;
}

span.price { font-weight: bold;
color: red;
display: inline;
position: absolute;
left: 450px;
}

span.comment { color: purple;
display: block;
position: relative;
left: 4em;
}

div.total { position: relative;
left: 25%;
}

a:link { color: red;
}

Feb 21 '06 #1

Subscribe Post Reply

4767

Andreas Prilop

On 21 Feb 2006, knoxautoguy wrote:

Organization: http://groups.google.com
Lines: 622

Drop dead!

--
All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

Feb 21 '06 #2

Lars Eighner

In our last episode,
<11*********************@o13g2000cwo.googlegroups. com>,
the lovely and talented knoxautoguy
broadcast on comp.infosystems.www.authoring.html:

I'm a newbie as anybody can readily see, so if anybody has a
suggestion, please try to put it in kindergarten terms. Of course, if
this isn't possible, I'll just have to study your answer until I do
understand it.
This is really a double whammy, so far as I can tell. You have
a table for nontabular material and have not used a table for
the material that is tabular.

My HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <script language="JavaScript" type="text/javascript"></script>
<meta name="robots" content="noindex,nofollow" /> <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" /> <link rel="stylesheet" type="text/css"
href="CopyOfShopratesInProgress.css" />
<title>Shop Rates</title>
</head>
<body>
<a id="topofpage">x</a>
 <div id="topsection">
 <table summary="Top section of this page" border="0" width="100%"> <tbody>
tbody is for the stuff you want to scroll. This is the
stuff you want fixed.
<tr> <td> <a href="default.html">Home</a></td>
This not tabular and it doesn't have enough cells.
</tr> 
<tr> <td><big><big>SHOP
RATES</big></big></td>
Ditto
</tr> <tr> <td> Jump ahead alphabetically:</td>
Ditto </tr> <tr>

<td>A
B
<a href="#C">C</a>
<a href="#D">D</a>
<a href="#E">E</a>
F
<a href="#G">G</a>
<a href="#H">H</a>
<a href="#I">I</a>
J
<a href="#K">K</a>
<a href="#L">L</a>
<a href="#M">M</a>
N
<a href="#O">O</a>
<a href="#P">P</a>
Q
<a href="#R">R</a>
<a href="#S">S</a>
<a href="#T">T</a>
U
<a href="#V">V</a>
W X Y Z</td>
Ditto in spades </tr> <tr>
See this row has three cells. Your other rows have one cell.
That doesn't add up. How ever, this finally tabular matter,
although it should be in th instead of td. Forget you ever
heard of big. <td><big><big>JOB</big></big>
</td> <td><big><big>CODE</big></big></td> <td><big><big>PRICE</big></big></td> </tr> </tbody>
</table>
</div>
Now you close your table, but you start to give the tabular data!

<div id="bottomsection">

<a name="B">BORE</a>BLOCK FOR SLEEVE 
 BBS
$
SLEEVE AND HONING OF 
SLEEVE ARE EXTRA

That should have been 4 cells in a table row. Your real table should
have four columns Job code price comment.

First: make a draft table that has your tabular data in tabular form.

Put your navigation crap, banner and stuff above the table.

<CRAP>
<Navigation Crap>

<table summary="....">
<caption>something informative</caption>
<thead>
<tr>
<th>Job</th><th>Code</th><th>Price</th><th>Comment</th>

<-- see four cells in every row -->

</tr>
</thead>
<tfoot>
<tr>
<th>Job</th><th>Code</th><th>Price</th><th>Comment</th>
</tr>
</tfoot>
<tbody>
<-- ... your data as: -->
<tr>
<td>Bore Block for Sleeve</td><td>BBS</td><td>etc.</td><td>etc.</td>
</tr>
<-- ... and all the rest of your data rows. -->
</tbody>
</table>

Put your anchors from your navigation crap in and see if
it won't scroll automagically.

Why is this in (alleged) xhtml? Get the 4.01 spec which has
a convenient index of elements and look up every tag before
you use it to find out what they really mean

And PS: no amount of robot.txt and header tags, etc. will make
a page on the World Wide Web private. There is no security in
obscurity. If this data is sensitive in any way, you need to learn
to employ some security measures.
--
Lars Eighner us****@larseighner.com http://www.larseighner.com/
That was Zen; this is Tao.

Feb 21 '06 #3

Eric B. Bednarz

"knoxautoguy" <wc*****@yahoo.com> writes:

This problem has consumed a lot of my time,

Reading your message would consume even more time. From what I can make
out of the subject field, you want something like

..anchor
{
margin: -n;
padding: n;
}

for the target block, where 'n' designates the required length.

In future -- or if this is not the problem -- provide an online barebone
testcase.

--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Feb 21 '06 #4

Eric B. Bednarz

Eric B. Bednarz <be*****@fahr-zur-hoelle.org> writes:

"knoxautoguy" <wc*****@yahoo.com> writes: .anchor
{
margin: -n;
padding: n;
}

Gnargh. Make that

..anchor
{
margin-top: -n;
padding-top: n;
}

Followup set to
comp.infosystems.www.authoring.stylesheets
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011

Feb 21 '06 #5

Stan Brown

Tue, 21 Feb 2006 11:27:24 -0600 from Lars Eighner
<us****@larseighner.com>:

knoxautoguy broadcast on comp.infosystems.www.authoring.html:
I'm a newbie as anybody can readily see, so if anybody has a
suggestion, please try to put it in kindergarten terms. Of course, if
this isn't possible, I'll just have to study your answer until I do
understand it.

This is really a double whammy, so far as I can tell. You have
a table for nontabular material and have not used a table for
the material that is tabular.

Sounds like the confession in the Book of Common Prayer: "We have
done the things we ought not to have done, and we have not done the
things we ought to have done."

:-)

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Feb 21 '06 #6

Stan Brown

Tue, 21 Feb 2006 18:08:45 +0100 from Andreas Prilop <nhtcapri@rrzn-
user.uni-hannover.de>:

On 21 Feb 2006, knoxautoguy wrote:
Organization: http://groups.google.com
Lines: 622

Drop dead!

All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

I think most real Danes are a little more polite.

Sure, the OP was dreadfully long-winded. But hat was inept rather
than rude: why drop such a strong insult?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Feb 21 '06 #7

Andy Dingley

On 21 Feb 2006 07:49:31 -0800, "knoxautoguy" <wc*****@yahoo.com> wrote:

This problem has consumed a lot of my time, and I'm aftraid someone
will tell me that my whole approach to this objective is wrong;
Got it in one.

And post a URL, not a slab of source. It annoys the Bloody Vikings.
however, I would like to know if there is a way to do this.

Forget the "split screen scrolling" idea. Instead have a simple page
that scrolls cheerfully up and down as you navigate. Then worry about
floating the nav menu in a <div> and keeping that positioned statically
- proably off to one side.

Feb 21 '06 #8

Dr John Stockton

JRS: In article <MP************************@news.individual.net> , dated
Tue, 21 Feb 2006 17:45:21 remote, seen in news:comp.infosystems.www.auth
oring.html, Stan Brown <th************@fastmail.fm> posted :

Tue, 21 Feb 2006 18:08:45 +0100 from Andreas Prilop <nhtcapri@rrzn-
user.uni-hannover.de>:
On 21 Feb 2006, knoxautoguy wrote:
> Organization: http://groups.google.com
> Lines: 622
Drop dead!

All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

I think most real Danes are a little more polite.

Real Dates mostly don't have addresses in .de ; people who do should not
be expected to be typical of real Danes.
Sure, the OP was dreadfully long-winded. But hat was inept rather
than rude: why drop such a strong insult?

You have an over-length signature; does that mean that you are inept?

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)

Feb 22 '06 #9

anchor id problem with fixed and scrolling divs

Similar topics