[E-voting] site

Adrian Colley aecolley at spamcop.net
Wed Mar 17 14:01:51 GMT 2004


On Mon, Mar 15, 2004 at 08:18:10PM -0000, adam beecher wrote:
> I guess I'll just covert the title text to a GIF and be done with it.

Well, it's supposed to be hypertext rather than pretty pictures, so
here's my answer to Adam's challenge.  (I tried to reply to Adam
directly, but for some reason beecher.net is now rejecting my email at
the "MAIL FROM:<aecolley at spamcop.net>" stage.)  Non-HTML-weenies may
find the rest of this message tough going and skippable.

The root cause is that absolute positioning is used.  Absolute
positioning is supposed to be used for overlapping text, not as an
override for layout.

Change the <div id="title"> back to a <h1 id="title">.  Delete the
position, top and left attributes from the CSS for #title.  In their
place, use these:
    margin-left: 250px;
    padding-left: 0.5em;
and restore the old settings for font-family, font-weight, font-size,
color and background-color.

Change the CSS for #logo and #nav: take out position, top and left, and
insert "float: left;".  (This puts them in the left margin of the main
content.) In #nav, add "margin-top: 42px;" to put it in the same screen
position as before.

Change the CSS for #content: once again take out position, top and left.
Insert these:
    margin-top: 27px;
    margin-left: 170px;
The margin-left creates a space big enough for the logo, nav list and
copyrights.  The margin-top places the text exactly where the existing
style does.

Change the CSS for #copyright: remove top, change position from
"absolute" to "fixed", and add these:
    bottom: 10px;
    z-index: -1;
The bottom fixes the copyright in the lower-left of the screen, where it
will be visible even when scrolling, and the z-index ensures that if it
overlaps the nav list, it will be behind the nav list until the user
scrolls down.

Also, replace the spaces in the nav bar with &nbsp; (e.g.
"VVAT&nbsp;explained") -- the normal spaces cause line breaks in my
browser (Opera/Linux).

Finally, specify background-color wherever you specify color (the
existing page doesn't do this, and the result is white text on a white
background if the background image doesn't load.)  This is #FFFFFF in
#title, and #A799BC in #nav a, #copyright and #copyright a.

I know it isn't ideal to count pixels for HTML layout, but I've done
enough nitpicking.  I'll just say that the W3C provides handy validator
tools (e.g. http://validator.w3.org/) to make sure the HTML and CSS are
standards-compliant.

 --Adrian.
what, me weenie?

-- 
GPG 0x43D3AD19 17D2 CA6E A18E 1177 A361  C14C 29DB BA4B 43D3 AD19
http://user-aecolley.jini.org/




More information about the E-voting mailing list