FontOrg help

[AlJones]

I need some help, probably more than some, but we'll start with that for
now.

http://www.fontorg.us - I've stolen enough to get this page up and looking
something like what I want it to. With two challenges (at the moment):
the first: I've tried to padd the green block on the lef tof the screen,
but padding drives the box into the main part of the screen. If padding is
the area between the text (in this case) and the border of the box, why
does "padding: 5PX;" force the box to overlap the main text area??
The second: and probably related: When the text from the main box
overflows the length of the picture, it flows under the green area ...
argh. Why??
And if I can be so bold, how do I fix these two problems??

No, I don't know what I'm doing, I'm a truck driver who likes to mess
around in VisualBasic - designing web sites is *NOT* where I want to be....

thanks //al

 

[dorayme]

I need some help, probably more than some, but we'll start with that for
now.

http://www.fontorg.us - I've stolen enough to get this page up and looking
something like what I want it to. With two challenges (at the moment):
the first: I've tried to padd the green block on the lef tof the screen,
but padding drives the box into the main part of the screen. If padding is
the area between the text (in this case) and the border of the box, why
does "padding: 5PX;" force the box to overlap the main text area??
The second: and probably related: When the text from the main box
overflows the length of the picture, it flows under the green area ...
argh. Why??
And if I can be so bold, how do I fix these two problems??

No, I don't know what I'm doing, I'm a truck driver who likes to mess
around in VisualBasic - designing web sites is *NOT* where I want to be....

You would be one of the very few truck drivers in the world to use a
good doctype like yours, so you are off in the right low gear. <g>

Here is a quick job (I removed a lot of your stuff but did not tamper
with other things):

<http://dorayme.890m.com/alt/fontorg.html>

I renamed an id (there was something wrong with your "leftcolumn")

Stay away from line heights for now, also do not use px for font sizes,
and be careful giving anything heights.

 

[AlJones]

You would be one of the very few truck drivers in the world to use a
good doctype like yours, so you are off in the right low gear. <g>

Here is a quick job (I removed a lot of your stuff but did not tamper
with other things):

<http://dorayme.890m.com/alt/fontorg.html>

I renamed an id (there was something wrong with your "leftcolumn")

Stay away from line heights for now, also do not use px for font sizes,
and be careful giving anything heights.

It really is what I do for a living -- to make matters worse (pun intended)
it's a stinking garbage truck!!

Thanks much for the assist. I may not know or understand much of what I'm
doing in html, but I do read. So when I took this 'sample' that was in
xhtml transitional, I flipped it quickly into html strict.

You also managed to get rid of the original authors divitis (that was
bugging me, but couldn't see which to clip).

FontOrg is a freeware program I wrote - and I think the purpose is obvious
- but since I've been asked for changes, I'll probably throw up a PayPal
donation box. I'm not greedy but I'm also not dumb - I won't ask for
payment, but I also won't refuse an offer, either.

Again, my thanks.
//al

 

[dorayme]

It really is what I do for a living -- to make matters worse (pun intended)
it's a stinking garbage truck!!

I have driven big trucks too and still have the habit of backing up my
car on the mirrors! I suppose, these days, one does not need to double
the clutch when going down gears (or it is much automatic now). Some
people go buy motorbikes or red sports cars for their mid life crises,
perhaps some of us might turn our minds to a great at big red rig to
bore across the Nullarbor Plain or jaunt with some cattle in three or

Thanks much for the assist. I may not know or understand much of what I'm
doing in html, but I do read. So when I took this 'sample' that was in
xhtml transitional, I flipped it quickly into html strict.

You also managed to get rid of the original authors divitis (that was
bugging me, but couldn't see which to clip).

OK, good, I was hoping you would notice the removal of many wrappers
that I did not think necessary. Keep on simplifying. Good luck.

 

[Bergamot]

http://www.fontorg.us
I've tried to padd the green block on the lef tof the screen,
but padding drives the box into the main part of the screen.

You mistakenly set the "innertube" div for the left column to an id, so
those rules weren't applied. It should be a class.

If padding is
the area between the text (in this case) and the border of the box, why
does "padding: 5PX;" force the box to overlap the main text area??

Go review the CSS box model. Padding is added to the width.
http://brainjar.com/css/positioning/

The second: and probably related: When the text from the main box
overflows the length of the picture, it flows under the green area ...
argh. Why??

See above URL.

You might get better results if you arrange your containers differently.
I've gotten the best results with floated columns when there is a parent
container for all the columns. On your page, something like

<div id="contentwrapper">
<div id="contentcolumn">
<ul class="bevelmenu">
<div class="innertube">
(main content text)
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
(left column text)
</div>
</div>
</div>

Set the width of #contentcolumn to 80% and float it right, with no
margin or padding. That will position both the menu and main content
area and prevent it from wrapping under the left column. The only issue
should be with IE6 when the browser window is very narrow and can't hold
that large image within the 80%. IE6 will do weird wrapping then.
Setting overflow:hidden on the right container may prevent such
oddities, but do look for undesirable side effects in other browsers.

Set the width of #leftcolumn to 20% and float it left, with no margin or
padding. The .innertube divs will then apply whatever amount of margin
and/or padding you want to the columns.

I would also move that line-height:1.5 from the body to #contentcolumn
and probably reduce it to 1.35, or even get rid of it altogether. Too
much leading can be a readability problem as much as too little, though
it partly depends on the font. As it is now, the left column has too
little for good readability.

The navigation menu also needs some tweaks, like adapting better to
situations where line wrapping occurs. For starters, set
white-space:nowrap on the <a> elements to prevent splitting the text on
individual links across 2 lines. Then increase the top and bottom
padding on the <li> elements to prevent the <a> line boxes from
overflowing and chopping off some of the characters on the top line.
Setting line-height:2 on the <ul> might fix that, too.

HTH