Re: CSS puts in extra space ... why?

In article
<1186026420.586605.273570 (AT) g4g2000hsf (DOT) googlegroups.com>,
RichardL <RichardDummyMailbox58407 (AT) USComputerGurus (DOT) com> wrote:

Hi All,

I'm planning to create a set of Web pages to present a seminar.
Essentially, I intend to present two columns: an accordion menu and a
display pane for a selected item. Below is simple code to illustrate
my "spacing problem," which is that the menu has an excessive left
margin. I can't figure out why. Any suggestions for changes or
references to relevant documentation would be greatly appreciated.

Following are two files to display my problem.

Your

....8859-1" />

is wrong. Just leave at

8859-1">

And then start on your problem by adding to your ul:

ul{list-style-type:none;margin:0;padding:0;}

You can now add what suits you. You can also forget about
dimensioning for width seeing as you are using a table. The magic
of tables is such that it will adjust to the content. Just keep
an eye out on you content itself.

For this sort of layout you can also very successfully simply use
a list floated left, given a width, I tend to give em based
widths but there is an argument for px too, also %, and then with
the static right content you give a left margin for the float to
sit in.

Bare bones, like so:

<ul id="nav">
<li>...</li>
<li>...</li>
</ul>


<div id="content">...</div>

with

#nav {width: 9em; float: left}

#content {margin-left: 11em;}

--
dorayme

On Aug 2, 12:33 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1186026420.586605.273... (AT) g4g2000hsf (DOT) googlegroups.com>,

RichardL <RichardDummyMailbox58... (AT) USComputerGurus (DOT) com> wrote:
Hi All,

I'm planning to create a set of Web pages to present a seminar.
Essentially, I intend to present two columns: an accordion menu and a
display pane for a selected item. Below is simple code to illustrate
my "spacing problem," which is that the menu has an excessive left
margin. I can't figure out why. Any suggestions for changes or
references to relevant documentation would be greatly appreciated.

Following are two files to display my problem.

Your

...8859-1" /

is wrong. Just leave at

8859-1"

And then start on your problem by adding to your ul:

ul{list-style-type:none;margin:0;padding:0;}

You can now add what suits you. You can also forget about
dimensioning for width seeing as you are using a table. The magic
of tables is such that it will adjust to the content. Just keep
an eye out on you content itself.

For this sort of layout you can also very successfully simply use
a list floated left, given a width, I tend to give em based
widths but there is an argument for px too, also %, and then with
the static right content you give a left margin for the float to
sit in.

Bare bones, like so:

ul id="nav"
li>...</li
li>...</li
/ul

div id="content">...</div

with

#nav {width: 9em; float: left}

#content {margin-left: 11em;}

--
dorayme

Hi DoRayMe,

(I loved "The Sound of Music", as I assume you did, and I loved
Julie Andrews in every movie she starred in.)

Thanks for explicit suggestions. I'm going to implement them and will
post back.

Best wishes,
Richard

In article
<1186059793.635616.150760 (AT) q75g2000hsh (DOT) googlegroups.com>,
RichardL <RichardDummyMailbox58407 (AT) USComputerGurus (DOT) com> wrote:

Hi DoRayMe,

(I loved "The Sound of Music", as I assume you did, and I loved
Julie Andrews in every movie she starred in.)

Thanks for explicit suggestions. I'm going to implement them and will
post back.

Yes, I am a complete sucker for musicals. I always lock myself up
when watching them because I am in a very weakened state
throughout and would stand no chance in any fight with my enemies.

--
dorayme

In article
<1186067163.714583.28370 (AT) i38g2000prf (DOT) googlegroups.com>,
RichardL <RichardDummyMailbox58407 (AT) USComputerGurus (DOT) com> wrote:

On Aug 2, 12:33 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
1186026420.586605.273... (AT) g4g2000hsf (DOT) googlegroups.com>,


Hi again,

Great advice. Below is my attempt to follow it. I have just three
problems with it.

1. The menu is not left justified.
2. Background-color is not honored, though I've got it working in my
real code (which, BTW, generates the menu from an array of arrays by
stuffing it into the UL's innerhtml)
3. The content appears to be affected by the text present in the menu,
i.e. the first two content lines are indented.

If you have any further guidance, I'd be grateful to receive it.

My test code is presented below. I explained my personal-web-space
problem to Beauregard above, but I'll try to get that resolved soon.

There are some errors in your markup, you do need to be careful.
Your background is not showing because your way is not supported
by the doctype. Best to put all in css. Your problem in (1) is
probably because you did not implement my suggestion about
padding and margins, you need to zero the ul to be rid of the
defaults that browsers supply.

Here are a couple of urls with some of your code and fixed up to
suit my eye better. First the basic one:

http://netweaver.com.au/test/test.html

Now, if you do put a background colour in to the left menu, it
does not always look good, it is dependent on the amount of text
in the menu and padding and such. It does not 'go to the bottom'
as a column. (There are all sorts of tricks and things to work
around this.) It can look ok not going to the bottom, but it is a
design difficulty. Frankly, often best not to bother to have
different colours.

This url gives a slightly different approach and is more eye
pleasing imo:

http://netweaver.com.au/test/test1.html

Honestly, if you want columns and colours from top to bottom,
there is nothing simpler than a 2 col table. See the advice I
gave previously about this option.

Finally, I put these test pages up at

http://dorayme.150m.com/test.html

and

http://dorayme.150m.com/test1.html

so you can see how you can get a free web hosting. The cost being
crappy ads and a bit of an eyesore. But better than posting code
quite often. I mention this to address your problem about
uploading urls...

About my name, it is ok, I can forgive an imaginative rendition
of it - as yours was! What upsets me is when complete and utter
schmucks follow wooden rules and just capitalize it and refuse to
bend to my will and threats and emissaries.

--
dorayme

On Aug 2, 9:07 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1186067163.714583.28... (AT) i38g2000prf (DOT) googlegroups.com>,



RichardL <RichardDummyMailbox58... (AT) USComputerGurus (DOT) com> wrote:
On Aug 2, 12:33 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
1186026420.586605.273... (AT) g4g2000hsf (DOT) googlegroups.com>,

Hi again,

Great advice. Below is my attempt to follow it. I have just three
problems with it.

1. The menu is not left justified.
2. Background-color is not honored, though I've got it working in my
real code (which, BTW, generates the menu from an array of arrays by
stuffing it into the UL's innerhtml)
3. The content appears to be affected by the text present in the menu,
i.e. the first two content lines are indented.

If you have any further guidance, I'd be grateful to receive it.

My test code is presented below. I explained my personal-web-space
problem to Beauregard above, but I'll try to get that resolved soon.

There are some errors in your markup, you do need to be careful.
Your background is not showing because your way is not supported
by the doctype. Best to put all in css. Your problem in (1) is
probably because you did not implement my suggestion about
padding and margins, you need to zero the ul to be rid of the
defaults that browsers supply.

Here are a couple of urls with some of your code and fixed up to
suit my eye better. First the basic one:

http://netweaver.com.au/test/test.html

Now, if you do put a background colour in to the left menu, it
does not always look good, it is dependent on the amount of text
in the menu and padding and such. It does not 'go to the bottom'
as a column. (There are all sorts of tricks and things to work
around this.) It can look ok not going to the bottom, but it is a
design difficulty. Frankly, often best not to bother to have
different colours.

This url gives a slightly different approach and is more eye
pleasing imo:

http://netweaver.com.au/test/test1.html

Honestly, if you want columns and colours from top to bottom,
there is nothing simpler than a 2 col table. See the advice I
gave previously about this option.

Finally, I put these test pages up at

http://dorayme.150m.com/test.html

and

http://dorayme.150m.com/test1.html

so you can see how you can get a free web hosting. The cost being
crappy ads and a bit of an eyesore. But better than posting code
quite often. I mention this to address your problem about
uploading urls...

About my name, it is ok, I can forgive an imaginative rendition
of it - as yours was! What upsets me is when complete and utter
schmucks follow wooden rules and just capitalize it and refuse to
bend to my will and threats and emissaries.

--
dorayme

Hi dorayme,

Thanks for all your help. I've got things working perfectly for my
purposes now. I'll follow up on the personal website stuff as you
recommended, and Ed Mullen's ideas as well. I'm sorry to see that Ed
has been so heartless with you :-) I'll try to make it up to you,
e.g. by posting my code on my soon-to-be website ;-) Oh, and more on
music, too ;-)

I'll be off-line for 16 hrs or so.

Regards,
Richard

On Aug 2, 9:07 pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
1186067163.714583.28... (AT) i38g2000prf (DOT) googlegroups.com>,



RichardL <RichardDummyMailbox58... (AT) USComputerGurus (DOT) com> wrote:
On Aug 2, 12:33 am, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
1186026420.586605.273... (AT) g4g2000hsf (DOT) googlegroups.com>,

Hi again,

Great advice. Below is my attempt to follow it. I have just three
problems with it.

1. The menu is not left justified.
2. Background-color is not honored, though I've got it working in my
real code (which, BTW, generates the menu from an array of arrays by
stuffing it into the UL's innerhtml)
3. The content appears to be affected by the text present in the menu,
i.e. the first two content lines are indented.

If you have any further guidance, I'd be grateful to receive it.

My test code is presented below. I explained my personal-web-space
problem to Beauregard above, but I'll try to get that resolved soon.

There are some errors in your markup, you do need to be careful.
Your background is not showing because your way is not supported
by the doctype. Best to put all in css. Your problem in (1) is
probably because you did not implement my suggestion about
padding and margins, you need to zero the ul to be rid of the
defaults that browsers supply.

Here are a couple of urls with some of your code and fixed up to
suit my eye better. First the basic one:

http://netweaver.com.au/test/test.html

Now, if you do put a background colour in to the left menu, it
does not always look good, it is dependent on the amount of text
in the menu and padding and such. It does not 'go to the bottom'
as a column. (There are all sorts of tricks and things to work
around this.) It can look ok not going to the bottom, but it is a
design difficulty. Frankly, often best not to bother to have
different colours.

This url gives a slightly different approach and is more eye
pleasing imo:

http://netweaver.com.au/test/test1.html

Honestly, if you want columns and colours from top to bottom,
there is nothing simpler than a 2 col table. See the advice I
gave previously about this option.

Finally, I put these test pages up at

http://dorayme.150m.com/test.html

and

http://dorayme.150m.com/test1.html

so you can see how you can get a free web hosting. The cost being
crappy ads and a bit of an eyesore. But better than posting code
quite often. I mention this to address your problem about
uploading urls...

About my name, it is ok, I can forgive an imaginative rendition
of it - as yours was! What upsets me is when complete and utter
schmucks follow wooden rules and just capitalize it and refuse to
bend to my will and threats and emissaries.

--
dorayme

Hi dorayme,

I took the liberty of taking this off-line because I promised you a
response but the thread we were on has gotten out-of-hand.

Thank you for all the CSS advice and for the suggestions about free
web hosting. As you may have noticed on the thread, I've been working
with Ed to resolve my problem with Comcast's personal-web-page
hosting. Ed gave me enough help to allow me to get that service
working on my workstation, so I'm a happy camper.

I'm coming up-to-speed on CSS ... well, up to walking speed, perhaps.
I posted my latest incarnation on http://home.comcast.net/~CaptQueeg/A...ansTables.html

I'm going to post my latest (dumb) questions on a thread "CSS newbie
has a few blemishes". Catchy title, eh? I hope to see you there.

Best wishes,
Richard

P.S. My email address on the newsgroup dumps into a dummy mailbox that
I never look at (unless I'm expecting mail from a newsgroup). My
direct address is:
RLMuller (AT) USComputerGurus (DOT) com.

On Aug 5, 7:10 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

RichardL wrote:
I'm coming up-to-speed on CSS ... well, up to walking speed, perhaps.
I posted my latest incarnation on
http://home.comcast.net/~CaptQueeg/A...ansTables.html

"The menu will be presented as the left pane of the website."

What menu?

--
-bts
-Motorcycles defy gravity; cars just suck

Hi Beauregard. The list on the left side constitutes a menu. Click
on them and you get some action. Right now their actions are just
stubs: they pop a message-box declaring what they'll be doing in the
future.

Given that, don't you think there's a menu there?

Best wishes,
Richard