I have a list of German cooking terms and their English translations such as below.

Abendmahl - Last Supper Bread
Allerlei - All Kinds
Anbrennenzuckerkuchen - Burnt Sugar Cake
Aniskeachla - Anise Cookies
Apel - Apple
Äpfel - Apple
Apfel Snitz - Dried Apple Slice
Apfel - Apple
Apfelbutter - Apple Butter
Apfeldampfnudla - Baked Apple Dumplings

When I used the table(s) for each section, "A" "B" "C" etc. the "A" words lined up correctly. I then closed the table </table>, added a paragraph <p>B</p> and then another table for all of the "B" words, etc. All of the subsequent tables were misaligned. (I want it set it up this way so that I can link to each section).

Is there a way using CSS to make a list (with the translation on the same line as the term) as it would if using a table? Since there are hundreds of terms and I want to avoid using a definition list as it puts the translation below the term and would make the page(s) so long.

Can I use a float? If so how would I code it?

Is it something like this you are looking for?
(see attach)

Albert, thanks for the quick response. It's not exactly how I want it but very similar. I was thinking more along the lines of this (without the German, English headings, the caption to be just the lettter and left aligned and the | A | B | C |...etc. being the links after each section so that people can go to any section at any time.

| A | B | C | D | E | ....

A
Abendmahl - Last Supper Bread
Allerlei - All Kinds
Anbrennenzuckerkuchen - Burnt Sugar Cake
Aniskeachla - Anise Cookies
Apel - Apple

| A | B | C | D | E | ....

B
Babruska - Buns
Balina - Pancakes

| A | B | C | D | E | ....

I will play around with the example you sent to see how bad I can mess it up:lol:

Thanks so much.

While I'm learning to work with the CC-HTML editor and CSS, I'm glad I've an interesting example to study.

So here's a second try in attach.

PS. I would like to hear from you if you found an other (maybe better) solution.

You can visit my link page.

I have section links at the top of my page. I then use a "Back to Top" link in each section.

You could easily create your a | b | c | d using my section menu code. And then just copy the code in place of where I have "Back to Top"

I used * instead of | in my section menu. Yours would need some modification, but the general idea of the code would be the same.

I use css to define the style of things and had put everything in <table> codes to keep it tidy.

http://www.crhorse.com/links.html

Feel free to copy the source of the file and css file. "linkexchange.css" has the specific css for that page. The other css file is just a general one that I use on all my pages in the site.

I also just tossed in some comment notes in the source code, to kind of explain what I did.

Have a great day,

Kim

Albert & Kim,

I am also learning as this is the first website I've ever devolped.

I made the changes to my table but still have the issue of the subsequent table(s) not quite aligning correctly. Here is my website if you want to take a look, (please disregard the color - it is much darker and more appealing on my laptop but when I view it on my desktop the green has way too much yellow in it. I will definately have to adjust my colors...)

go to www.frank-kolb-russia.org [home, miscellaneous, dictionary of german russian food terms, and then the very last item (dictionary-food-termsA-Z.html)].

The other pages I created as a result of not being able to align the tables, however I would prefer to have them all on one page with the links I have set up which are very easy to make.

Thanks,

Kelly

Take a look at this page. It seems to be close to your requirement.
Feel free to use any of the html code.

http://www.orrufc.co.uk/linksto.html

When I have to use a table, I use the html editor's table wizard. Everything lines up perfect that way.

Hello Kelly

1. Using Internet Explorer 8, 32-bit:

I can only open de site and klik on [Home].
I can see the menu but cannot go to [Miscellaneous], I get a white page???

2. When I switch over to FireFox, I can open your menu, but it is to long.
It goes off the screen and I'm not able to scroll down.
My screen is 21" wide and I have a resolution of 1680 x 1050.
(See attach)

3. Validating by CC HTML-editor recommends the use of id="a" as an anchor instead of name="a".
But it seemed to me they both are working?

4. I don't think it's a good practice to use an id="b" on more then one place.
Not even when it is a capital and a small letter. So the program cannot decide where to go to?




Success!

Albert

Here's an example that uses a definition list.