1. Home
  2. Forums Index
  3. Browser Side / CSS 12:15 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Left Side of page to remain static

         

Certificates

9:03 am on Jul 6, 2012 (gmt 0)

10+ Year Member



What I want to do is relatively simple, but I just don't seem to figure out out to do it.

I want a portion of my web page to remain fixed whilst the other side scrolls upwards.

At present I am doing this within table, and whilst it is a useful work around I'm sure there's a better way.

Here is the current HTML with the identifying url removed


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<HTML><HEAD><TITLE>C5D:-Certificates in 5 Days</TITLE>
<META name="description" content="English Birth Certificates English Death Certificates &amp; English Marriage Certificates supplied within 5 Days">
<META name="keywords" content="Birth Certificates, Death Certificates, Marriage Certificates, Family History">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://www..co.uk/mystyle.css"></HEAD>
<body>
<table border="0">
<tr><!-- Row 1 -->
<td><a href="http://www..co.uk">
Certificates</a><BR><BR>
<a href="http://www..co.uk/wills.htm">
Probates</a><BR><BR>
<a href="http://www..co.uk/parishrecords.htm">
Parish Register Entries</a><BR><BR>
<a href="http://www..co.uk/census.htm">
Census Copies</a><BR><BR>
<a href="http://www.c5d.co.uk/scotland.htm">
Scottish Certificates</a><BR><BR>
<a href="http://www..co.uk/roi.htm">
Irish Certificates</a><BR><BR>
<a href="http://www.c5d.co.uk/newzealand.htm">
New Zealand Certificates</a><BR><BR>
<a href="http://www..co.uk/northernireland.htm">
Northern Ireland Certificates</a><BR><BR>
<a href="http://www..co.uk/sterlingpayments.htm">
Sterling Payments</a><BR><BR>
<a href="http://www..co.uk/groups.htm">
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm">
Research Service</a><BR><BR><a href="http://www..co.uk">
Certificates</a><BR><BR>
<a href="http://www..co.uk/wills.htm">
Probates</a><BR><BR>
<a href="http://www..co.uk/parishrecords.htm">
Parish Register Entries</a><BR><BR>
<a href="http://www..co.uk/census.htm">
Census Copies</a><BR><BR>
<a href="http://www..co.uk/scotland.htm">
Scottish Certificates</a><BR><BR>
<a href="http://www..co.uk/roi.htm">
Irish Certificates</a><BR><BR>
<a href="http://www..co.uk/newzealand.htm">
New Zealand Certificates</a><BR><BR>
<a href="http://www..co.uk/northernireland.htm">
Northern Ireland Certificates</a><BR><BR>
<a href="http://www.c5d.co.uk/sterlingpayments.htm">
Sterling Payments</a><BR><BR>
<a href="http://www..co.uk/groups.htm">
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm">
Research Service</a><BR><BR>
<a href="http://www..co.uk">
Certificates</a><BR><BR>
<a href="http://www..co.uk/wills.htm">
Probates</a><BR><BR>
<a href="http://www..co.uk/parishrecords.htm">
Parish Register Entries</a><BR><BR>
<a href="http://www..co.uk/census.htm">
Census Copies</a><BR><BR>
<a href="http://www..co.uk/scotland.htm">
Scottish Certificates</a><BR><BR>
<a href="http://www..co.uk/roi.htm">
Irish Certificates</a><BR><BR>
<a href="http://www..co.uk/newzealand.htm">
New Zealand Certificates</a><BR><BR>
<a href="http://www..co.uk/northernireland.htm">
Northern Ireland Certificates</a>
<a href="http://www..co.uk/sterlingpayments.htm"><BR><BR>
Sterling Payments</a><BR><BR>
<a href="http://www..co.uk/groups.htm">
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm">
Research Service</a><BR><BR>Certificates</a><BR><BR>
<a href="http://www..co.uk/wills.htm">
Probates</a><BR><BR>
<a href="http://www..co.uk/parishrecords.htm">
Parish Register Entries</a><BR><BR>
<a href="http://www..co.uk/census.htm">
Census Copies</a><BR><BR>
<a href="http://www..co.uk/scotland.htm">
Scottish Certificates</a><BR><BR>
<a href="http://www..co.uk/roi.htm">
Irish Certificates</a><BR><BR>
<a href="http://www..co.uk/newzealand.htm">
New Zealand Certificates</a><BR><BR>
<a href="http://www..co.uk/northernireland.htm">
Northern Ireland Certificates</a><BR><BR>
<a href="http://www..co.uk/sterlingpayments.htm">
Sterling Payments</a><BR><BR>
<a href="http://www..co.uk/groups.htm">
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm">
Research Service</a><BR><BR>
<a href="http://www..co.uk">
Certificates</a><BR><BR>
<a href="http://www..co.uk/wills.htm">
Probates</a><BR><BR>
<a href="http://www..co.uk/parishrecords.htm">
Parish Register Entries</a><BR><BR>
<a href="http://www..co.uk/census.htm">
Census Copies</a><BR><BR>
<a href="http://www..co.uk/scotland.htm">
Scottish Certificates</a><BR><BR>
<a href="http://www..co.uk/roi.htm">
Irish Certificates</a><BR><BR>
<a href="http://www..co.uk/newzealand.htm">
New Zealand Certificates</a><BR><BR>
<a href="http://www..co.uk/northernireland.htm">
Northern Ireland Certificates</a>
<a href="http://www..co.uk/sterlingpayments.htm"><BR><BR>
Sterling Payments</a><BR><BR>
<a href="http://www..co.uk/groups.htm">
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm">
Research Service</a><BR><BR>
</td><!-- Col 1 -->
<TD>
<IMG height=120
src="http://www..co.uk/myaddress.gif" width=500 alt="my address">
<br>






Thanks for any help you can give me

Antony

Kendo

10:04 am on Jul 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Easiest way to do this use a frameset.

Otherwise a floating layer can be used but that depends on JavaScript which is not enabled by default for IE9 in new Windows installs. Also most spiders do not support JS those links and content can be missed/ignored.

rocknbil

4:19 pm on Jul 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, while it may be easier, frames are a horrible approach for SEO purposes as is a Javascript driven menu. Visualize these four conditions:

- The frameset menu indexes by itself and is basically a page with nothing on it but links. Visitors to that page from search engines are likely to go away frustrated.
- Same is true of the actual pages, visitors to those pages will find no navigation to other areas of your site. Poof.
- Framed pages have no unique URL's. Land on / (home page,) and follow the links, it leaves you at the single URL / for many, many pages.
- Search engines don't execute Javascript and it's a crap shoot as to whether any links in a Javascript driven menu will be indexed (depending on how you do it, but in the context of a single included menu, not likely.)

Being that this is the CSS forum, you'll probably get a lot of comments about using tables for layout. Tables are for tabular data. This also hurts you in a couple ways. I recommend you move this to a more semantic set of elements and drop the empty break tags. A common approach is a styled UL list, because basically what you have there is exactly that, a list. :-)

<ul id="mymenu"> <!-- style it in style sheet with #mymenu { /* styles here */ } -->
<li><a href="http://www..co.uk">Certificates</a></li>
<li><a href="http://www..co.uk/wills.htm">Probates</a></li>
<!-- etc. -->
</ul>

That being said, there's no real way in CSS alone to have a static menu, you're going to need a little assistance with some server side programming that allows you to include your menu on every page.

Most would suggest PHP here, but IMO PHP is a robust scripting language and is overkill for something as simple as a menu include. I suggest Server Side Includes (SSI) as "the right tool for the job."

You put your menu in a file by itself with nothing but the menu, call it whatever - menu.html, menu.txt, doesn't matter. Then at every point in your pages here you want it,

<!-- #include virtual="/directory-to/menu.html" -->

Any server today supports this (even Windows servers, they just do it differently,) and is a lightweight approach to including files. Generally SSI include files require an .shtml extension so the server "knows" to parse the file to locate includes, but a simple change to your .htaccess file or server configuration

AddHandler server-parsed .html .htm

Will also parse .html or .htm files for SSI includes.

PHP works too . . . but like I said it's overkill, really.

<?php include($_SERVER['DOCUMENT_ROOT'] . "/directory-to/menu.html"); ?>

You can do the same thing with PHP to parse static html files as PHP. Overkill! :-)

A visit to your favorite search engine for either of these (try SSI first) will lead to fairly simple documentation on how to implement them.

Certificates

7:36 pm on Jul 6, 2012 (gmt 0)

10+ Year Member



I;m sure that your input is well meant, and probably very good, but it is just far too advanced for me. To be frank, I haven't a clue what you are suggesting.

Whilst I know that frames aren't everyone's cup of tea, it will work best for me at this stage of my web page knowledge.

Thanks once again for the suggestions

Antony

Kendo

1:34 am on Jul 7, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



PHP and other server side languages will not help here because what needs to happen actions on the client side. So the options are limited to using JavaScript for a floating layer or a frameset.

legaleagle

9:59 pm on Jul 7, 2012 (gmt 0)

10+ Year Member



What about two divs one left one right and a set height for left hand div with no overflow

getcooking

10:25 pm on Jul 7, 2012 (gmt 0)

10+ Year Member



Maybe I'm misunderstanding, but is this what you are looking for? It uses divs with position:fixed for the non-scrolling portion. (not fully tested but worked in my code editor's browser) 

<style type="text/css">

#menu {display:block; top:10px; right:30%; width:500px; position:fixed; padding:10px; text-align:center; }
</style>
<!--[if lte IE 6]>
 <style type="text/css">
 /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
 /*]]>*/
 </style>
<![endif]-->



<div id="page">

<a href="http://www..co.uk"> 
Certificates</a><BR><BR> 
<a href="http://www..co.uk/wills.htm"> 
Probates</a><BR><BR> 
<a href="http://www..co.uk/parishrecords.htm"> 
Parish Register Entries</a><BR><BR> 
<a href="http://www..co.uk/census.htm"> 
Census Copies</a><BR><BR> 
<a href="http://www.c5d.co.uk/scotland.htm"> 
Scottish Certificates</a><BR><BR> 
<a href="http://www..co.uk/roi.htm"> 
Irish Certificates</a><BR><BR> 
<a href="http://www.c5d.co.uk/newzealand.htm"> 
New Zealand Certificates</a><BR><BR> 
<a href="http://www..co.uk/northernireland.htm"> 
Northern Ireland Certificates</a><BR><BR> 
<a href="http://www..co.uk/sterlingpayments.htm"> 
Sterling Payments</a><BR><BR> 
<a href="http://www..co.uk/groups.htm"> 
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm"> 
Research Service</a><BR><BR><a href="http://www..co.uk"> 
Certificates</a><BR><BR> 
<a href="http://www..co.uk/wills.htm"> 
Probates</a><BR><BR> 
<a href="http://www..co.uk/parishrecords.htm"> 
Parish Register Entries</a><BR><BR> 
<a href="http://www..co.uk/census.htm"> 
Census Copies</a><BR><BR> 
<a href="http://www..co.uk/scotland.htm"> 
Scottish Certificates</a><BR><BR> 
<a href="http://www..co.uk/roi.htm"> 
Irish Certificates</a><BR><BR> 
<a href="http://www..co.uk/newzealand.htm"> 
New Zealand Certificates</a><BR><BR> 
<a href="http://www..co.uk/northernireland.htm"> 
Northern Ireland Certificates</a><BR><BR> 
<a href="http://www.c5d.co.uk/sterlingpayments.htm"> 
Sterling Payments</a><BR><BR> 
<a href="http://www..co.uk/groups.htm"> 
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm"> 
Research Service</a><BR><BR> 
<a href="http://www..co.uk"> 
Certificates</a><BR><BR> 
<a href="http://www..co.uk/wills.htm"> 
Probates</a><BR><BR> 
<a href="http://www..co.uk/parishrecords.htm"> 
Parish Register Entries</a><BR><BR> 
<a href="http://www..co.uk/census.htm"> 
Census Copies</a><BR><BR> 
<a href="http://www..co.uk/scotland.htm"> 
Scottish Certificates</a><BR><BR> 
<a href="http://www..co.uk/roi.htm"> 
Irish Certificates</a><BR><BR> 
<a href="http://www..co.uk/newzealand.htm"> 
New Zealand Certificates</a><BR><BR> 
<a href="http://www..co.uk/northernireland.htm"> 
Northern Ireland Certificates</a> 
<a href="http://www..co.uk/sterlingpayments.htm"><BR><BR> 
Sterling Payments</a><BR><BR> 
<a href="http://www..co.uk/groups.htm"> 
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm"> 
Research Service</a><BR><BR>Certificates</a><BR><BR> 
<a href="http://www..co.uk/wills.htm"> 
Probates</a><BR><BR> 
<a href="http://www..co.uk/parishrecords.htm"> 
Parish Register Entries</a><BR><BR> 
<a href="http://www..co.uk/census.htm"> 
Census Copies</a><BR><BR> 
<a href="http://www..co.uk/scotland.htm"> 
Scottish Certificates</a><BR><BR> 
<a href="http://www..co.uk/roi.htm"> 
Irish Certificates</a><BR><BR> 
<a href="http://www..co.uk/newzealand.htm"> 
New Zealand Certificates</a><BR><BR> 
<a href="http://www..co.uk/northernireland.htm"> 
Northern Ireland Certificates</a><BR><BR> 
<a href="http://www..co.uk/sterlingpayments.htm"> 
Sterling Payments</a><BR><BR> 
<a href="http://www..co.uk/groups.htm"> 
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm"> 
Research Service</a><BR><BR> 
<a href="http://www..co.uk"> 
Certificates</a><BR><BR> 
<a href="http://www..co.uk/wills.htm"> 
Probates</a><BR><BR> 
<a href="http://www..co.uk/parishrecords.htm"> 
Parish Register Entries</a><BR><BR> 
<a href="http://www..co.uk/census.htm"> 
Census Copies</a><BR><BR> 
<a href="http://www..co.uk/scotland.htm"> 
Scottish Certificates</a><BR><BR> 
<a href="http://www..co.uk/roi.htm"> 
Irish Certificates</a><BR><BR> 
<a href="http://www..co.uk/newzealand.htm"> 
New Zealand Certificates</a><BR><BR> 
<a href="http://www..co.uk/northernireland.htm"> 
Northern Ireland Certificates</a> 
<a href="http://www..co.uk/sterlingpayments.htm"><BR><BR> 
Sterling Payments</a><BR><BR> 
<a href="http://www..co.uk/groups.htm"> 
Family Generations</a><BR><BR><a href="http://www..co.uk/researchservice.htm"> 
Research Service</a><BR><BR> 
</div>

<div id="menu">
<IMG height=120 src="http://www..co.uk/myaddress.gif" width=500 alt="my address"> 
<br> </div>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:15 pm May 1, 2026