Can't center menu

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm trying to build a personal webs page and I'm trying to do it with CSS.

I have several problems,  but the one that bothers me most right now is
that I can't get the link-menu in the header section to line up in the

I've tried everything I can think of including using space symbols
(&nbsp &nbsp) and inserting a small gif to the left of the link div.
Nothing works.

This is a mock-up of what I'm trying to do.  Any directions would be
appreciated. /

Re: Can't center menu

Quoted text here. Click to load it

Try wrapping the menu in a <div> then applying padding-left to it. or if you
want it in the middle have this:



Paul watt

Re: Can't center menu

Paul Watt wrote:
Quoted text here. Click to load it

Thanks a lot.   That is the one I would never have thought of :-)

I couldn't get auto to work so I used 152 px on padding-left.  Looks
pretty good.

Now I'm faced with a another problem. One that I didn't realize existed
until I saw it mentioned by a poster here.

That is one of screen resolution.  I keep my computer at 800 resolution
instead of 1024.  To resolve the above problem I switched to 1024 and it
now looks pretty well balanced.  When I go back to 800,  the menu is out
  of line.   I never realized this one thing could cause so much change
in web design.

Do the pros have a simple way of handling this ?

I updated my mock-up.  I realize it won't validate but I'm trying to get
the design the way I want before tackling all the details. /

Another thing,  when I was using 800 resolution,   this background image
looked pretty good.  But at 1024,  it isn't as smooth (on the left)  as
I had hoped.   I suppose this is normal.


Re: Can't center menu

Quoted text here. Click to load it
  That works fine for your particular viewport size. It looks askew in my
  For the padding:auto to have the effect you want the <div>'s width must
be set to less than 100% wide (100% is the default). Or float the <div>;
the <div> then shrinkwraps the content.
Quoted text here. Click to load it
  It is called "fluid" or "liquid" design. The page is designed to adapt
smoothly to changes in the viewport size. Search for "fluid, liquid, CSS".

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Can't center menu

Jim Moe wrote:
Quoted text here. Click to load it

Thanks Jim,  that was what I needed.  I'll try to learn more CSS. /

Re: Can't center menu

F.C. James wrote:
Quoted text here. Click to load it

have you checked for some 3 column examples ;)
your bg image can easily be redone to look better too ;)

Re: Can't center menu

Gwin wrote:
Quoted text here. Click to load it

What's wrong with the BG ?  Color ?  Gradient ?  I'd like to know.  How
would you redo it ?

Site Timeline