Attention
Calling all Sturdevant, Sturdivant, Sturtevant, Sturtivant, Stirdivant, et al
Are You Ready to DNA?
Do You Have a St*r**v*nt Surname in your family line?
Want to help fill in the St*r**v*nt Family Tree Worldwide?
Join Us !
this content div is not positioned, (other than static?), but appears where we want it, butting up against the 200px padding
this base design, requires the left nav to be shorter than the content, for footer to go down.
In other words, footer goes down as content goes down.
If left nav is taller, then it just overrides the footer
This paragraph is to contain a possible tool menu style. Tools&More
A Heading
This paragraph is some kind of necessary bull to make sure the content does cover 100% width. It is just fill to extend the paragraph to edge of page at all resoulutions.
All images and divs in main are float:left
clear:left
or in other words, float each div left, and make it so it floats under the previous float:left
Image Manipulation
In this iteration, 1c, above statement no longer true. We originally had nameplate floated left, but as the window was resized smaller, IE would drop the image down, leaving a blank space where the image was originally placed (assuming maximized window). This behavior did not occur in FireFox.
Only solution was to absolutely position the nameplate. 1b tried absolutely positioning the image itself, but did not validate because of no container for image.
1c uses a container div for the image, with position described under the id=plate, and a style added to the image through #plate img {
}
This validates and image remains in "proper" place during re-size.
Readability and Accessibility
font on top navbar is Lucida Sans Unicode small caps .75 em for initial setting. Hover is larger font, and visited will be back to .75 font
this allows for the bar to be a single line across the top at 800x600 medium font size.
Two fonts used, Verdana for Link text and generic cursive for link headings in the left nav. Content is generic cursive, with Verdana headings.
the left nav is designed for no scroll bar at medium font. Firefox will allow one increase in font size before scroll bar(s) appear. Unfortunately use of a "Larger" font in IE forces the scrollbars with font-size set at 1.2em. Even at 1.0em, IE forces a scrollbar with an increase in font size.
For the Tools menu, versions 1a and 1b, differed in Firefox, with the links being centered and thus extending out over the edge of the box. IE showed the links aligned left as expected. Applying padding:0 to the UL fixed the problem in this iteration.
Position Fixed
The Tools & More menu on the right side was a slight conundrum. The intent was to always have it available, but unobtrusive and so be called only when wanted. The problem was positioning it. I first had it absolutely positioned so that the menu would show at the top of the page, where the first link was. But unless I absolutely positioned another div just like it, if I had the link in the middle of the page, the menu would still show at top of page. Might not even be able to see it, depending on where you are at on page.
Position:fixed is a perfect answer. Now wherever I call it on the page, it always 120px from the top of the window (not the page). Only have to define one div. Way Cool!
Whoops!
From the House of Style, style guide:
"Internet Explorer 5.0, 5.5 and 6.0 Windows does not support the value fixed at all."
Hacks I have seen use a height of 100% to force scroll, then feed IE a separate style sheet, hiding the scroll.
I Think ...
So
