Now's your chance to pick on me . . .

[DCElliott]

Unfortunately, the work I do is mostly for corporate Intranet which is inaccessible to outsiders. So I don't get to show off. I suppose I should create a "vanity page" for myself but have never bothered.

I do have a couple of screenshots of an orientation manual homepage created for people in my branch. It is based on a CSS layout. There is not a single <font> or <table> tag in the code. The buttons at the bottom of the left nav are created with CSS, as is the menu list and hover highlighting.

When the user hovers over a selection, the middle graphic changes to illustrate what the content of that selection is about, and a table of contents for that section appears (the yellow block). This effect is very simple, just use the title attribute of the <a> tag like <a href="something" title="This is a description of something"> Something to click on </a> The pictures are preloaded and changed with a simple javascript rollover.

The dropshadows on the title and binder graphic are created using an IE filter.

I have included jpg screenshots in this and the following post. The quality isn't the best, but there is a 100k attachment limit. :(

[DCElliott]

This is a second view of the same page with another link "hovered". I've also changed the page width so you can see how the page "squishes". Again - no tables, all CSS.

[Zero Angel]

Not bad for a CSS based layout, though I still find that tables are more predictable, probably due to how easily they are nested as well as the row/colspan attributes.

You're using OverLib for the tooltips, right?

[DCElliott]

Originally posted by Zero Angel
You're using OverLib for the tooltips, right?
Nope. Here is an example of the code in the left nav
<a class="link" href="chapter7.pdf" target="_blank"
title="Glossary . .56
Definitions and Explanations . . 56"
onMouseover="changeimage(myimages[6],this.href)">Chapter 7</a>
<a class="link" href="acronym glossary.pdf" target="_blank"
title="Bafflegab Boggles Brains"
onMouseover="changeimage(myimages[7],this.href)">Acronyms</a>
The tooltip is created with the title attribute. Display of what is in the title behaves as if it were wrapped in <pre> tags.

I'm using nested <div>s for the middle content, like this;)<!-- <<<<<<<<<<<<<<<<<<<<<<<<< MIDDLE >>>>>>>>>>>>>>>>>>>>>>>>>> -->

<div ID="middle">

<!-- <<<<<<<<<<<<<<<< Mouseover image display >>>>>>>>>>>>>>>>>> -->
<!-- line below has to have first image as src -->
<div style="position:relative; border: thin outset white; width:404px; height:304px; margin:0 auto;">
<a href="javascript:warp()">
<img src="./images/chapter1.gif" id="target" name="targetimage" alt="click to go to chapter" />
</a>
<img src="./images/frame.gif" id="frame" alt="frame" />
</div>
<!-- <<<<<<<<<<<<<<<< end image display >>>>>>>>>>>>>>>>>> -->

<!--[if IE]>
<hr class="middle" />
<![endif]-->
<script type="text/javascript">
document.write(holdW('middle'))
</script>
</div>
It is really not a lot different than nested tables except that the markup is a lot cleaner and you can use a combination of absolute and relative positioning and absolute and relative widths.

But thanks for pointing out OverLib - looks like an interesting bit of code to add to the old toolbag.

[polliwogfrog]

The pages are quite sophisticated and
appealing to the eye DC. I like very much
Nichole
:joy:

[pmorrison2588]

They look really good, and professional. They are worth the painstaking effort you have put on them.