Problem centering UL and LI elements

[dorayme]

Newbie wrote:

... Can somebody please
take a look and tell me how to center the menus in the middle of the
page.
http://www.parcsystems.com/newsite/dropdownmenutest.html
....

A couple of improvements for you since my last. To promote
fluidity, namely to allow the menu items to wrap on smaller
browser widths, perhaps use a percentage width instead of ems.
This will involve making a small further provision so the items
separate vertically when they wrap. Also, forget overflow, put a
clear in the style on the second UL.

Here is the adapted CSS, that might be something you find useful
or something you can adapt to suit your needs:

body {font-size: 100%;}

.sddm {
margin: auto;
width: 80%; /*crucial width guess */
padding: 0;
z-index: 30;
}

.sddm li {
margin: .2em 0 .2em 0;
padding: 0;
list-style: none;
float: left;
font: bold .85em Arial sans-serif;
/* Dont use px for font sizes and especially not flyspeck like
9px! */
}

[Don't forget to change all the hashes to dots in the rest.
remember, we are going class for reasons I explained before.
Notice too in the above the addition of the generic font,
sans-serif. Best to add in case you prefer the user not to use a
serif if they happen not to have Arial!]

And the HTML changes:

<!--Menu Table-->

<ul class="sddm">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>

<ul class="sddm" style="padding-top: .5em; clear: both;">
<li><a href
...

All good except for one thing. The script is looking for an ID!
In the UL, you could have <ul id="sddm1"> and <ul id="sddm2">

I was ignoring js requirements, leaving them to you, just demoing
a way to get your centring as far as the HTML and CSS were
concerned.

You can put put IDs (for the js) in as well as classes (for the
CSS), but just remember to have them unique, one per doc in the
HTML.

If you have different IDs and avoid multiple sames *and do
without* classes, then you can still centre but you would need to
alter the css a bit to catch more than one ID. You have two ULs
and if each has its own ID, simple to understand is to put in my
above CSS twice, once for the one ID and again for the other. Or
use construction like

#sddm1, #sddm2 {
margin: auto;
width: 80%;
....
}
....

and, of course, in the HTML, identify the ULs by their IDs.

 

[dorayme]

OK. I will try your revised suggestions and see how I get on. However,
will be driving back to Scotland tomorrow (9hr drive) so wont have
much chance to have a look. So please keep your eye on this thread
until Monday.

Since you are driving to Scotland, and since England's roads are
very congested, I can say anything I like without fear of
contradiction for a while. <g>

Centring a mob of floats is possible as I hope you can see from
my suggestions. But there are a few considerations that somewhat
limit the project. The requirement to plump for a width (needed
to make margin: auto; cause it), means you are unlikely to get
perfect centring - but it might be 'good enough'.

There is another way to centre a mob of horizontal list items
which is theoretically perfectible, no guess work needed: to
*not* float the list items but to simply display them as inline.
You then can use text-align: center; on their container (UL is
good) and let the browser do the calculations, they are very good
at it! One downside is that the floated way is easier to style.

See how it is *very hard* to get the floated method to perfect
centring, how no value will quite be perfect, no matter the
units. Whereas the text-align method gets it right:

<http://dorayme.netweaver.com.au/lists/inlineCentredList.html>

I would say to go with the float method and not worry about
centring or at least not about perfect centring.

 

[dorayme]

I can describe the code, but I don't know FrontPage, so convincing FP
to write that code is up to you.

What I would do is wrap the menu lists in a div, like this:

<div class="menu">
<!-- menu uls here -->
</div>

Now, you can assign a style to the .menu class to center that div:

.menu {
width: 60em;
min-width: 60em;
left-margin:auto;
right-margin:auto;
}

Which has two drawbacks, one an unneccessary div, and two, an
unnecessarily unfluid design where wrapping is badly restricted.
In something like a horizontal menu, there is rarely any
justification, when you think about it, for causing horizontal
scollbars. 60em is not a width (much less a min width) some users
would want to be having for their browser to avoid scrollbars.

You're probably wondering why I don't just center the uls, and the
answer is that, IMHO, ragged margins look amateurish.

This is based on a misunderstanding of the case in hand, the list
items being floated by the OP and you following him. While it may
look amaturish to some people (who might be confusing the more
serious amateurism of having body text and some headings "ragged"
when wrapped), it does not, in any case, necessarily result in
ragged edges and especially when the list items are floated.
Centring the UL itself does not necessarily result in the list
items being centred within the UL.

The two techniques of centring the UL (or, if you must, a further
block wrapper) by width and auto: margin; on the one hand and
centring by putting text-align: center; on the wrapper to the
list items (either a div, if you must, or the UL itself). The
latter, if the list items are not floated, will result in
"ragged" centring of the wraps.

 

[P E Schoen]

I thought I had done the hard bit by creating a drop down menu.
Seems the hard bit for me is to center it on the page. Can
somebody please take a look and tell me how to center the
menus in the middle of the page.
http://www.parcsystems.com/newsite/dropdownmenutest.html

Hopefully the advice given works for you. I am somewhat new to advanced HTML
so I'd have to do the same as you by asking questions or Googling and trying
things. I know a little about a wide range of things, and although I've used
HTML since 1996, I'm in no way an expert.

However, looking at your code I notice that you are involved in electrical
protective equipment testing, and that is something I am very familiar with.
I worked for 15 years at EIL Instruments as their design engineer, and
received a patent for a recloser test set. I also did consulting work for
Multi-Amp, later AVO and Biddle/Megger, as well as Phenix Technologies,
where I worked with an engineer who is now back with Hipotronics. For the
last 20 years or so I have been involved with ETI, www.etiinc.com, where I
have designed various circuit breaker test sets and helped repair and
retrofit other companies' products. I have also designed and built two
versions of a device called an Ortmaster, which is an accessory that
facilitates recloser testing.

You may learn more from my websites below, and also see the rather crude
HTML that I have used for my web pages. I've done some fancier work, such as
http://maryland.sierraclub.org/baltimore, and that site is soon to be
replaced with another that is under construction. Mostly I've been learning
Perl and PHP and SQLite lately.

Let me know if I can help with anything you are doing, other than HTML.

Good luck,

Paul
www.pstech-inc.com
www.ortmaster.com
www.muttleydog.com

 

[Newbie]

in message

Hopefully the advice given works for you. I am somewhat new to advanced HTML
so I'd have to do the same as you by asking questions or Googling and trying
things. I know a little about a wide range of things, and although I've used
HTML since 1996, I'm in no way an expert.

However, looking at your code I notice that you are involved in electrical
protective equipment testing, and that is something I am very familiar with.
I worked for 15 years at EIL Instruments as their design engineer, and
received a patent for a recloser test set. I also did consulting work for
Multi-Amp, later AVO and Biddle/Megger, as well as Phenix Technologies,
where I worked with an engineer who is now back with Hipotronics. For the
last 20 years or so I have been involved with ETI, www.etiinc.com, where I
have designed various circuit breaker test sets and helped repair and
retrofit other companies' products. I have also designed and built two
versions of a device called an Ortmaster, which is an accessory that
facilitates recloser testing.

You may learn more from my websites below, and also see the rather crude
HTML that I have used for my web pages. I've done some fancier work, such as
http://maryland.sierraclub.org/baltimore, and that site is soon to be
replaced with another that is under construction. Mostly I've been learning
Perl and PHP and SQLite lately.

Let me know if I can help with anything you are doing, other than HTML.

Good luck,

Paul
www.pstech-inc.com
www.ortmaster.com
www.muttleydog.com

Hi Paul,
Thats interesting and very coincidental. My background is purely in
electrical protection. I worked for 12 years at CEE relays limited who
specialise in protective relays mainly for generator, transormer and
busbar protection. At the time they were the british distribuutor for
ISA test equipment. In the eary 90's whenutomatic test equipment was
born I was instrumental in writing computerised test programs ot test
specific relay types. In 1999 I set up my own business specialising in
testing protective relays using both manual and automatic test
equipment. I set up a website in 2004 that was very basic and static
and nows the time for change as my business is branching out. I am
quite au fait with PHP and MYSQL but sometimes the simplest of
problems in HTML and CSS seem to baffle me. Perhaps we could exchange
ideas and thanks for your offer.
Kind regards
Paul (Also)

 

[Newbie]

Newbie wrote:

On Sat, 05 Feb 2011 13:35:57 +1100, dorayme

... Can somebody please
take a look and tell me how to center the menus in the middle of the
page.
http://www.parcsystems.com/newsite/dropdownmenutest.html
...

A couple of improvements for you since my last. To promote
fluidity, namely to allow the menu items to wrap on smaller
browser widths, perhaps use a percentage width instead of ems.
This will involve making a small further provision so the items
separate vertically when they wrap. Also, forget overflow, put a
clear in the style on the second UL.

Here is the adapted CSS, that might be something you find useful
or something you can adapt to suit your needs:

body {font-size: 100%;}

.sddm {
margin: auto;
width: 80%; /*crucial width guess */
padding: 0;
z-index: 30;
}

.sddm li {
margin: .2em 0 .2em 0;
padding: 0;
list-style: none;
float: left;
font: bold .85em Arial sans-serif;
/* Dont use px for font sizes and especially not flyspeck like
9px! */
}

[Don't forget to change all the hashes to dots in the rest.
remember, we are going class for reasons I explained before.
Notice too in the above the addition of the generic font,
sans-serif. Best to add in case you prefer the user not to use a
serif if they happen not to have Arial!]

And the HTML changes:

<!--Menu Table-->

<ul class="sddm">
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>

<ul class="sddm" style="padding-top: .5em; clear: both;">
<li><a href
...

All good except for one thing. The script is looking for an ID!
In the UL, you could have <ul id="sddm1"> and <ul id="sddm2">

I was ignoring js requirements, leaving them to you, just demoing
a way to get your centring as far as the HTML and CSS were
concerned.

You can put put IDs (for the js) in as well as classes (for the
CSS), but just remember to have them unique, one per doc in the
HTML.

If you have different IDs and avoid multiple sames *and do
without* classes, then you can still centre but you would need to
alter the css a bit to catch more than one ID. You have two ULs
and if each has its own ID, simple to understand is to put in my
above CSS twice, once for the one ID and again for the other. Or
use construction like

#sddm1, #sddm2 {
margin: auto;
width: 80%;
...
}
...

and, of course, in the HTML, identify the ULs by their IDs.

Hi once again,

Having recovered from marathon journey and congested roads <g> AND
done some bedtime reading on the difference between class and ID <big
g!!> I have made some step by step changes trying to understand each
change a step at a time.

Firstly, I have duplicated the CSS calling one #sddm1 and the other
#sddm2 and left it as ID rather than changing it to class. I
duplicated it because I wasn't sure how to construct it using your
method above. OK I understand the above construction but now sure how
the others should be written. Is it
#sddm1, #sddm2 li {......} etc etc
OR
#sddm1 li, #sddm2 li {.......} etc etc

I understand now how making the margin auto and setting the width to
80% is helping to centralise everyhting. I have left the width in for
the li a tag but changed it to 8em as opposed to 60px. Whilst I have
taken on board what you said my personal preference is that fixed
column widths look much tidier and more professional. In mozilla
3.5.16 its looking good but in IE7 the margin is much smaller and the
column widths seem smaller too. Everything too far over to the left.
This is as far as I have got. There is still the problem that when the
browser window is half minimised, the whole menu bar wraps to
accomodate the new width of the browser window. (I think I called that
breaking up in one of my previous posts.)

Something else I dont fully understand is I have a mixture of em and
px in the CSS style. Should I change it all to em?

http://www.parcsystems.com/newsite/dropdownmenutest.html original code
http://www.parcsystems.com/newsite/dropdownmenutest2.html latest code

Thanks once again for all your help.

Paul

 

[dorayme]

....

...I have duplicated the CSS calling one #sddm1 and the other
#sddm2 and left it as ID rather than changing it to class. I
duplicated it because I wasn't sure how to construct it using your
method above. OK I understand the above construction but now sure how
the others should be written. Is it
#sddm1, #sddm2 li {......} etc etc
OR
#sddm1 li, #sddm2 li {.......} etc etc

The latter.

I understand now how making the margin auto and setting the width to
80% is helping to centralise everyhting.

OK. You might find a few pages I made on centring things useful,
have not finished editing it, but here it is:

I have left the width in for
the li a tag but changed it to 8em as opposed to 60px.

Whilst I have
taken on board what you said my personal preference is that fixed
column widths look much tidier and more professional.

Your call, but imo, not allowing the text of the link to
determine the width seems a waste of space, middle eastern
dictatorship, and an unnecessary stress on the author to
calculate a width. Then reverse never looks bad because of this,
it looks economical and very functional. Aesthetic as
distinguished from 'professional' (meaning what people who do it
for a living do, which can be really bad!) involves a big element
of not doing more than is necessary, the principle of more is
less.

In mozilla
3.5.16 its looking good but in IE7 the margin is much smaller and the
column widths seem smaller too. Everything too far over to the left.
This is as far as I have got. There is still the problem that when the
browser window is half minimised,

"half-mimised"? On whose screen? Your own and mine are the least
important ones, your users are the ones that count, and you
cannot know what they have.

the whole menu bar wraps to
accomodate the new width of the browser window. (I think I called that
breaking up in one of my previous posts.)

It is called fluid design and adapts to different users.

Something else I dont fully understand is I have a mixture of em and
px in the CSS style. Should I change it all to em?

Use px for pictures mainly, em is good for most things else. But
it is complicated, px widths for cols are sometimes OK. But try
using ems as much as possible for the moment, that way your boxes
grow with user text size instead of bursting out of fixed px
widths. Often best of all is not to specify too much, list items
for example do not need widths often, nor many other elements,
they will naturally grow to accommodate their contact in most
cases.

http://www.parcsystems.com/newsite/dropdownmenutest.html original code
http://www.parcsystems.com/newsite/dropdownmenutest2.html latest code

Fair enough. If you look carefully at the markup and CSS I
suggested, I made a provision for the menu items to be a little
separated vertically when wrapped. Your last url seems not to
incorporate it. I mention in case it was an oversight.

 

[P E Schoen]

Hi Paul,
Thats interesting and very coincidental. My background is
purely in electrical protection. I worked for 12 years at CEE
relays limited who specialise in protective relays mainly for
generator, transormer and busbar protection. At the time they
were the british distribuutor for ISA test equipment. In the eary
90's when automatic test equipment was born I was instrumental
in writing computerised test programs ot test specific relay
types. In 1999 I set up my own business specialising in
testing protective relays using both manual and automatic test
equipment. I set up a website in 2004 that was very basic and
static and nows the time for change as my business is branching
out. I am quite au fait with PHP and MYSQL but sometimes the
simplest of problems in HTML and CSS seem to baffle me.
Perhaps we could exchange ideas and thanks for your offer.
Kind regards
Paul (Also)

Sure. My email works, so you can reply to this post or just get the email
from one of my websites. Anything(at)Domain.com works for them. It would be
interesting to exchange ideas with a fellow engineer in the same area of
experience.

Paul

 

[Tim Streater]

OK. You might find a few pages I made on centring things useful,
have not finished editing it, but here it is:

<http://netweaver.com.au/centring/>

Do you have several sets of such pages? They all seem quite useful. I've
bookmarked the ones on floating divs - but is there one place from which
I can find all your doc-sets? I'd like to just have one link.

Thanks!

 

[dorayme]

Do you have several sets of such pages?

Rather too many!

They all seem quite useful. I've
bookmarked the ones on floating divs

I guess you mean the piece on floats:

but is there one place from which
I can find all your doc-sets? I'd like to just have one link.

Sorry, I should be more organised. I am meaning to make a page
where various efforts of mine can be linked to.

My own browsers have favourites in folders in the bookmark bars
at the top, each folder acting like a dropdown menu one of which,
naturally, is stuff of mine. I mention in case this method of
organising might help you, though you perhaps are an old hand at
this.

 

[Newbie]

I have left the width in for

Your call, but imo, not allowing the text of the link to
determine the width seems a waste of space, middle eastern
dictatorship, and an unnecessary stress on the author to
calculate a width. Then reverse never looks bad because of this,
it looks economical and very functional. Aesthetic as
distinguished from 'professional' (meaning what people who do it
for a living do, which can be really bad!) involves a big element
of not doing more than is necessary, the principle of more is
less.

Thank you for your efforts. Its really appreciated. But call me old
fashioned and regimental but aesthetically I like to see things

"half-mimised"? On whose screen? Your own and mine are the least
important ones, your users are the ones that count, and you
cannot know what they have.

As a public site (when its finished) I would want my traffic to view
the same thing regardless of which browsers they using. At present I
have the three most common browsers installed on my PC (Netscape, IE7
and Mozilla) and I am seeing different things in each browser. My old
site used tables and frames to align things. I have read so many pages
on the web that tell you to move away from tables and frames cos its
bad design but at least it was easy to center objects and text and my
pages viewed the same in the browsers.

It is called fluid design and adapts to different users.

It may be fluid design but quite simply I dont like it. I want my
menubar to remain a SINGLE horizontal menu regardless of wether the
browser window is restored down or not. Whilst you disagree with Sherm
Pendlely's method of using a div it does do what I want it to do. If
you can advise a different method of preventing the menu from wrapping
I would be pleased to hear it. I read on one website "CSS can be so
confusing that sometimes you just have to do what works for you rather
than what is correct."

Fair enough. If you look carefully at the markup and CSS I
suggested, I made a provision for the menu items to be a little
separated vertically when wrapped. Your last url seems not to
incorporate it. I mention in case it was an oversight.

See above. I dont want the menu bar to be vertically wrapped.

So I have become argumentative. <G> That may seem that I dont want
your suggestions. Not the case. I really appreciate your efforts and
am open to suggestions.

 

[Newbie]

I can describe the code, but I don't know FrontPage, so convincing FP
to write that code is up to you.

I am not using Frontpage. All code is being written in notepad.
Frontpage was left in the header cos I copied an old page from the
days when I was using it. Sorry for confusion

What I would do is wrap the menu lists in a div, like this:

<div class="menu">
<!-- menu uls here -->
</div>

Now, you can assign a style to the .menu class to center that div:

.menu {
width: 60em;
min-width: 60em;
left-margin:auto;
right-margin:auto;
}

You're probably wondering why I don't just center the uls, and the
answer is that, IMHO, ragged margins look amateurish. A "wrapper div"
such as this one allows the div itself to be centered on the page,
while everything inside of it remains evenly lined up along the left.

That is, instead of this:

**** ****
**** **** ****
****

You get this:

**** ****
**** **** ****
****

The div as a whole is centered, not its contents.

You can see a modified copy of your page at:

<http://tests.shermpendley.com/dropdownmenutest.html>

sherm--

Thank you for your efforts and time. There seems to be a lot of
opinions about this. Please see my reply to another post by dorayme on
this topic.

 

[Tim Streater]

Rather too many!
Ah.


I guess you mean the piece on floats:

<http://netweaver.com.au/floatHouse/>

Thass the one.

Sorry, I should be more organised. I am meaning to make a page
where various efforts of mine can be linked to.

That would be most kind.

My own browsers have favourites in folders in the bookmark bars
at the top, each folder acting like a dropdown menu one of which,
naturally, is stuff of mine. I mention in case this method of
organising might help you, though you perhaps are an old hand at
this.

Mmm, I do a bit of this.

 

[dorayme]

It may be fluid design but quite simply I dont like it. I want my
menubar to remain a SINGLE horizontal menu regardless of wether the
browser window is restored down or not. Whilst you disagree with Sherm
Pendlely's method of using a div it does do what I want it to do.

You are making it clear now you don't want the menu to wrap. OK.
And elsewhere in your post, that you want everyone to see
everything in all browsers exactly the same. Hard to achieve in
general, but that is what you want. Two things:

One, you have not noticed that Pendley's example does in fact
wrap, you are not seeing this because you are not altering the
text size to mimic different users. On my screens at lower user
text sizes they wrap.

Two, you have not noticed that I gave you the means to prevent
wrap in the first place with the em width, no need for the extra
div. If you choose a bigger em width or even a very large px
width for the UL concerned, the menu will not wrap.

If
you can advise a different method of preventing the menu from wrapping
I would be pleased to hear it.

See above. But let me add a third menu example to the two I
offered you in a previous url in a new url:

<http://dorayme.netweaver.com.au/inlineCentredListNoWrap.html>

which merely has a larger em width on the UL to give a margin for
error to better guarantee no wrapping. No div needed. Adjust the
width to suit. You can even use pixels if you want. But not
percentages (too fluid for you! <g>)

You would disadvantage all those folk who do not want to have
their browsers so wide with an aesthetic idea that is very
personal to you.

 

[Newbie]

You are making it clear now you don't want the menu to wrap. OK.
And elsewhere in your post, that you want everyone to see
everything in all browsers exactly the same. Hard to achieve in
general, but that is what you want. Two things:

One, you have not noticed that Pendley's example does in fact
wrap, you are not seeing this because you are not altering the
text size to mimic different users. On my screens at lower user
text sizes they wrap.

Two, you have not noticed that I gave you the means to prevent
wrap in the first place with the em width, no need for the extra
div. If you choose a bigger em width or even a very large px
width for the UL concerned, the menu will not wrap.


See above. But let me add a third menu example to the two I
offered you in a previous url in a new url:

<http://dorayme.netweaver.com.au/inlineCentredListNoWrap.html>

which merely has a larger em width on the UL to give a margin for
error to better guarantee no wrapping. No div needed. Adjust the
width to suit. You can even use pixels if you want. But not
percentages (too fluid for you! <g>)

You would disadvantage all those folk who do not want to have
their browsers so wide with an aesthetic idea that is very
personal to you.

OK. Point taken. I did change to em at one point but then I copied and
pasted some other stuff and forgot to change to em again. I need to go
back and review all posts. Humble apologies. I have however on my
journey found another webpage describing how to centre UL's. Problem
is it plays havoc with the java code.So I stripped out the java code
and am left with the basic menu. Maybe at a later point I will be able
to get the drop down menus to work. But your opinion would be
appreciated on the centring method used. It works for me in both
mozilla and IE7.

http://www.parcsystems.com/newsite/dropdownmenutest5.html

If this all proves too much for me I may cheat and buy a drop down
menu editor such as AllWebMenus 5.0. Sob Sob!!

 

[Newbie]

See above. But let me add a third menu example to the two I
offered you in a previous url in a new url:

<http://dorayme.netweaver.com.au/inlineCentredListNoWrap.html>

..

Humble apologies once again. Should have visited your link above
before posting my last reply. Great solution!! Now all I have to do is
incorporate the java code into that. That'll be fun. <G!!>

 

[Captain Paralytic]

Humble apologies once again. Should have visited your link above
before posting my last reply. Great solution!! Now all I have to do is
incorporate the java code into that. That'll be fun. <G!!>

Not so much fun as impossible. When Java runs on a client it does so
as a Java application, not as interpreted code.

 

[Beauregard T. Shagnasty]

Not so much fun as impossible. When Java runs on a client it does so
as a Java application, not as interpreted code.

I'd guess Newbie meant to say JavaScript. Java != JavaScript

ECMAScript must have been too hard to pronounce. How many wish they'd
picked a different name other than JavaScript?
Raise your hands!