Help needed

  • Thread starter Thread starter Jim S
  • Start date Start date
J

Jim S

On all the pages of www.priorysingers.org.uk the 'buttons' on the left is 7
1x1 tables inside the cells of a 7x1 (Or is it 1x7) table inside the table
which makes up the main page.
There must be an easier/slicker/more acceptable way of doing this using css,
but my way is the only way I know to keep everything exactly in the right
place in all browsers.
Can anyone help or point me to understandable rehab.
I would rather not use FP extensions.
 
Hi Jim,

What you're using is table layout, which is fine, as long as you don't
expect to change the way the web site looks in the future. Of course, most
webs DO change in appearance as time goes by, and that's what CSS is good
for. It doesn't make development any easier, or slicker, and it is not "more
acceptable," except in terms of its flexibility.

Take a look at http://www.csszengarden.com/ to get an idea of just how
flexible it is. The links on the right edge of the page are links to the
exact same page using different CSS style sheets, and you will be amazed
that they are the exact same page.

The problem with tables is that they are great for doing tabular layout
(rows and columns), but that is all that they do. Once you create a table,
you can't change the relative positions of its' contents. They are locked
into their cells.

CSS allows you to use divs as containers for content, and style sheets to
specify how the HTML markup is rendered in the browser. One of the nicest
aspects of CSS is that the styles are not even necessarily part of the HTML
markup itself. You can put one or more style sheets into a page, or even
link to an external style sheet that can be shared by many pages, allowing
you to change the look of the entire web site simply by editing the style
sheet(s).

There is a learning curve to CSS, and it is a bit more difficult to master
than using tables. But the benefits are well worth the effort.

--
HTH,

Kevin Spencer
Microsoft MVP
Software Composer
http://unclechutney.blogspot.com

The shortest distance between 2 points is a curve.
 
Try this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>

<style type="text/css">
#menu ul {list-style: none; margin: 0;}
#menu li {margin: 2px; padding: 0; background: #dcdcdc; border: 3px
#adadad solid; width: 100px; height: 40px; text-align: center; font: 700
small Arial,Sans-serif;}
#menu a {text-decoration: none; display: block; padding: 3px;}
#menu a:link {color:blue;}
#menu a:visited {color:purple;}
#menu a:active {color:red;}
#menu a:hover {color:green;}
</style>

</head>

<body>

<div id="menu">
<ul>
<li><a href="page_3_current_programme.htm">Current
Programme</a></li>
<li><a href="page_4_contacts_and_information.html">Contacts &amp;
Information</a></li>
<li><a href="page_5_be_a_patron.htm">Become a Patron</a></li>
<li><a href="page_6_past_performances.htm">Past
Performances</a></li>
<li><a href="page_7_local.htm">About our Area</a></li>
</ul>
</div>

</body>
</html>

A lot less code, it looks about the same as your tabular layout, and is
much easier to edit, add to, etc.
Everything between and including <div id="menu"> and </div> can be moved
to wherever you need it in the page.
The CSS before </head> is essential.
 
Back
Top