Two column layout with fixed left box, menu woes, and funky forms.

Hello, I've been slowly trying to teach myself some webdesign and have
an inital client.

Considering: http://townscapes.net/

I'm trying to make the layout more scalable, both in terms of the the
two boxes meeting the footer without white space on the bottom, and in
terms of text filling the boxes more completely. As the user increases
the text size in most modern browsers, either one of the two colums
gets much longer than the other. Problem being that I want to have the
left colum an exact distance from the top of the container and of an
exact width too, so the tuft of grass tops it. My attempts to apply a
faux column fill have been failures as well as setting px and em
heights.

I'm also having some trouble with the menu... I want the the <a>
padding to go red on hover, but stay within the white border and also
not dynamically push anything out (this mainly seems to happen in IE6).

And my form doesn't seem to work right either. Am I understanding the
inputs correctly?

Finally, any and all other basic design criticisms would be much
appreicated.

Thanks muchly.

two7s_clash wrote:

Considering: http://townscapes.net/

I'm also having some trouble with the menu... I want the the <a
padding to go red on hover, but stay within the white border and also
not dynamically push anything out (this mainly seems to happen in IE6).

See if this is good enough for you (although I really only addressed
this problem as I saw it in FF, but read on):

#menu a, #menu a:link {
margin-top:-1em;
background-color: #009933;
padding: .9em .8em;
color: black;
text-decoration: none;
float: left;
}

#menu a:hover, #menu a:active {
padding: .9em .8em;
background-color: #991A00;
color: #FFFFFF;
float: left;
}

Your padding for hover has to be the same as your padding for non-hover,
otherwise you'll get...what you've had.

You'll probably see some slight differences at the lower edge of the
#menu a:hover when you try different font sizes, but maybe it's close
enough for you. I only tested in FF. I think the discepancies come from
the multiple definitions of font size and line-height you're using; I
can't tell *what* the em value for these <a>s are supposed to be. All of
these appear to apply:
html, body {font: 100%/120%}
body {font-size: 72%; line-height: 1.5em;}
#content {font-size: 98%;}
#wrapper{width:100%; }
#content {font-size: 98%;}
#menu {font-size: 100%;}
..content{font-size: 105%;} Oops, no, not the *class* content, only the
*id* content.

Anyway, I hope this helps.

--
John

John Hosking wrote:

You'll probably see some slight differences at the lower edge of the
#menu a:hover when you try different font sizes, but maybe it's close
enough for you. I only tested in FF. I think the discepancies come from
the multiple definitions of font size and line-height you're using; I
can't tell *what* the em value for these <a>s are supposed to be.

Yeah, sheesh, my css is still sort of fly by the pants... I'm trying to
put more forethough into my designs so I my code is less bloated and
hacky. Thanks for the solution, looks nice. Just gotta figure out the
columns and I'll be almost there.

Thanks a mill!

Best,

James