By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,602 Members | 1,533 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,602 IT Pros & Developers. It's quick & easy.

Spacing in HTML / CSS

P: n/a
since c.i.w.a.* seem to be *very* conscious of 'the correct group' I hope
you'll bear with me here or direct me to the correct one.

I'm trying to help a friend redo a site which was done in DW with tables -
I've cut his code to about 10% of what he started with, but cannot get the
positioning that he wants (and I'd like to know how to do).

See aljones.us/annette/index.html There is an obvious navigation panel to
the left which we would like to make appear at, say, top + 25%; and a very
small footer bar which we would like to see at bottom - 10%. Assuming that
top and bottom represent the top and bottom of the users viewport. As it
stands now (on my system at 1280x1024) the footer is slightly below the
bottom menu item - which places it about 1/2 way up the viewport.

((Hi BTS, I'll get back to mine after I lose the headache :) ))

Any suggestions??

//al
Dec 31 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
al jones wrote:
since c.i.w.a.* seem to be *very* conscious of 'the correct group' I hope
you'll bear with me here or direct me to the correct one.
Seems okay to me. :-)
>
I'm trying to help a friend redo a site which was done in DW with tables -
I've cut his code to about 10% of what he started with, but cannot get the
positioning that he wants (and I'd like to know how to do).
A really good habit to get into is to try validating. It's a great way
to find a bunch of (often elementary) coding errors which will wreak all
kinds of havoc in the renderings various browsers will offer.

Among other things, your positioning of the bottom stuff will suffer for
being coded as table cells (<td>) without any <tableor <trtags. You
also had a stray /at the end of an element in <head>.
>
See aljones.us/annette/index.html
You mean http://aljones.us/annette/index.html (note http), which my
newsreader automatically makes a clickable link for me.
There is an obvious navigation panel to
the left which we would like to make appear at, say, top + 25%; and a very
small footer bar which we would like to see at bottom - 10%. Assuming that
top and bottom represent the top and bottom of the users viewport. As it
stands now (on my system at 1280x1024) the footer is slightly below the
bottom menu item - which places it about 1/2 way up the viewport.
Any suggestions??
I've done more than suggest, and I hope it's not rude, but I've gone and
coded/styled it for you (as one possible approach). See the page at
http://mypage.bluewin.ch/jlh/AlJonesBrokenChains.htm

(Note: If you decide to copy this and use the .css, note the folder name
for the bg image; I couldn't rename my "Subdir" to match your "images".)

I've added a bg color to body (1) to help people who don't get the image
you specifay and (2) to minimize the negative effect of a viewport wider
than the bg image (which you, too, would have noticed at 1280px if your
browser hadn't had white as a default bg color).

I've dropped the font-size:25pt; from <h1>, because the default in my FF
1.0.7 is not that far from your 25pt, so I'd hope it's good enough for
you friend. If you/she insist on specifying a size, make it in % or ems.

I left the tagline (new style id) at .8em, although I think that's too
small. It is at least resizable in IE now, though maybe not enough for
some folk.

You don't need any divs.

The footer (new style id) is .7em, which I consider too small. You
decide (i.e., guess what your visitors will find usable).

I have left out the "Best Viewed @ 800 X 600" because (1) it was in
white, so I couldn't find it right away, even when I knew it was there;
it was nearly invisible, but that's okay, because it should be, since
(2) it's a silly/rude thing to say on a Web page; and anyway, (3) it's a
lie, because the page looks no better at 800x600 than it does at
1000x723 or 780x500 or 1024x794 (esp. now that the edge of the bg image
isn't so glaring). I hope you and your friend will leave it off. If you
really crave it, position it like the new #footer.

The <bodytag was missing, but that's actually allowed. It just makes
me itchy and nervous. ;-)

There are other things you can do to solve the problem you posted, and
my code might not be best practice in all respects, but I looked at it
in FF and IE6 (resizing browsers and text), plus it validates.

HTH. GL.

--
John
Jan 1 '07 #2

P: n/a
On Mon, 01 Jan 2007 04:22:41 +0100, John Hosking wrote:
al jones wrote:
>since c.i.w.a.* seem to be *very* conscious of 'the correct group' I hope
you'll bear with me here or direct me to the correct one.

Seems okay to me. :-)
>>
I'm trying to help a friend redo a site which was done in DW with tables -
I've cut his code to about 10% of what he started with, but cannot get the
positioning that he wants (and I'd like to know how to do).

A really good habit to get into is to try validating. It's a great way
to find a bunch of (often elementary) coding errors which will wreak all
kinds of havoc in the renderings various browsers will offer.

Among other things, your positioning of the bottom stuff will suffer for
being coded as table cells (<td>) without any <tableor <trtags. You
also had a stray /at the end of an element in <head>.
>>
See aljones.us/annette/index.html

You mean http://aljones.us/annette/index.html (note http), which my
newsreader automatically makes a clickable link for me.
>There is an obvious navigation panel to
the left which we would like to make appear at, say, top + 25%; and a very
small footer bar which we would like to see at bottom - 10%. Assuming that
top and bottom represent the top and bottom of the users viewport. As it
stands now (on my system at 1280x1024) the footer is slightly below the
bottom menu item - which places it about 1/2 way up the viewport.
>Any suggestions??

I've done more than suggest, and I hope it's not rude, but I've gone and
coded/styled it for you (as one possible approach). See the page at
http://mypage.bluewin.ch/jlh/AlJonesBrokenChains.htm

(Note: If you decide to copy this and use the .css, note the folder name
for the bg image; I couldn't rename my "Subdir" to match your "images".)

I've added a bg color to body (1) to help people who don't get the image
you specifay and (2) to minimize the negative effect of a viewport wider
than the bg image (which you, too, would have noticed at 1280px if your
browser hadn't had white as a default bg color).

I've dropped the font-size:25pt; from <h1>, because the default in my FF
1.0.7 is not that far from your 25pt, so I'd hope it's good enough for
you friend. If you/she insist on specifying a size, make it in % or ems.

I left the tagline (new style id) at .8em, although I think that's too
small. It is at least resizable in IE now, though maybe not enough for
some folk.

You don't need any divs.

The footer (new style id) is .7em, which I consider too small. You
decide (i.e., guess what your visitors will find usable).

I have left out the "Best Viewed @ 800 X 600" because (1) it was in
white, so I couldn't find it right away, even when I knew it was there;
it was nearly invisible, but that's okay, because it should be, since
(2) it's a silly/rude thing to say on a Web page; and anyway, (3) it's a
lie, because the page looks no better at 800x600 than it does at
1000x723 or 780x500 or 1024x794 (esp. now that the edge of the bg image
isn't so glaring). I hope you and your friend will leave it off. If you
really crave it, position it like the new #footer.

The <bodytag was missing, but that's actually allowed. It just makes
me itchy and nervous. ;-)

There are other things you can do to solve the problem you posted, and
my code might not be best practice in all respects, but I looked at it
in FF and IE6 (resizing browsers and text), plus it validates.

HTH. GL.
John, it's never rude (at least to me) to have someone point out how to do
something - whether it's by example or pointing me toward the 'right'
reference. I realized I had left some of his table elements in the bottom,
but by then I was getting frustrated, so I didn't clean it up as I should
have.

I'm surprised by the complete lack of divs - I'll have to look at this
closer. Was amused by the way you positioned the navigation, I didn't
realize that when I said I would like to see it at top + 25% that that was
just about the way that the css would see it.

The friend who asked me for ideas - called me tonight and he's thinking
about doing the whole thing in frames - at which point I really got an
attitude. You've asked me for suggestions, I've gotten some ideas that
reduce your page size by between 50 and 75% and you want to take what you
acknowledge is the worst possible approach - then why the <explitive of
choicedid you even ask?

Oh, well, no matter what he does, I've seen how I've been 'overkilling'
with the divs - now to go back and take a look at *my* web site and see
about it.

Thanks much for the redo and the guidance, I really do appreciate it.

//al
Jan 1 '07 #3

P: n/a
al jones wrote:
>
Thanks much for the redo and the guidance, I really do appreciate it.
Al, glad I could (well, almost) help. I had some fun (and learned a
little) playing with it.

--
John
Jan 1 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.