Problem centering UL and LI elements

[Newbie]

Hi,

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

TIA
Newbie thicko

 

[richard]

Hi,

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

TIA
Newbie thicko

it breaks when window is downsized.
put the entire thing in a containing div and style that div for margin:1px
auto;
In your body styling, declare the width.
body {width:100ft;}

 

[Beauregard T. Shagnasty]

In your body styling, declare the width.
body {width:100ft;}

*Please* refrain from giving advice.

(Some statement about "a paper bag" comes to mind.)

 

[richard]

*Please* refrain from giving advice.

(Some statement about "a paper bag" comes to mind.)

no sense of humor you have.
What exactly is the "body" but the main container?
If you set the width, nothing inside the window will break.

 

[dorayme]

Hi,

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

TIA
Newbie thicko

Very roughly, and just changing a few things without looking
deeper into what would be better still, I would say to at least
make following changes.

An id must be unique and you use id of "sddm" more than once. So,
in the following, change to class in the html and dot instead of
hash in the css.

To centre a block element like a ul, you need to give it a width.
How about making these changes at least to the css:

..sddm {
margin: auto;
width: 55em; /*crucial width guess */
padding: 0;
z-index: 30;
overflow: hidden;
/* overflow to remove need for special extra clearing div for
most modern browsers, though some IE might need the div! */
}

..sddm li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold .80em arial;
/* Dont use px and especially not flyspeck like 9px! */
}

..sddm li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
background: #df7000;
color: #FFFFCC;
text-align: center;
text-decoration: none;
}

and in the html, at least:


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

<ul class="sddm" style="padding-top: .5em;">
<!-- padding-top to make a gap that you seem to want between the
first and second ULs -->

 

[Beauregard T. Shagnasty]

no sense of humor you have.

I have a great sense of humor, Yoda. You, on the other hand, have no

What exactly is the "body" but the main container?
If you set the width, nothing inside the window will break.

I know what the "body" of a web page is, doofus. My point, which you
missed, was:
"Why the sam hell did you set the width to a HUNDRED *FEET*!

BTW, it's "sam hill" ...
http://en.wikipedia.org/wiki/Sam_Hill_(euphemism)

 

[richard]

I have a great sense of humor, Yoda. You, on the other hand, have no


I know what the "body" of a web page is, doofus. My point, which you
missed, was:
"Why the sam hell did you set the width to a HUNDRED *FEET*!

As I said, so sense of humor.
There is no style attribute for "ft" dipshit.
It was just one of those things I do for the fun of it.

 

[Newbie]

As I said, so sense of humor.
There is no style attribute for "ft" dipshit.
It was just one of those things I do for the fun of it.

If I knew that a polite request for help was going to cause so much
friction............!! Although I must admit I was a bit bemused by
the 100ft???

 

[Newbie]

Very roughly, and just changing a few things without looking
deeper into what would be better still, I would say to at least
make following changes.

An id must be unique and you use id of "sddm" more than once. So,
in the following, change to class in the html and dot instead of
hash in the css.

To centre a block element like a ul, you need to give it a width.
How about making these changes at least to the css:

.sddm {
margin: auto;
width: 55em; /*crucial width guess */
padding: 0;
z-index: 30;
overflow: hidden;
/* overflow to remove need for special extra clearing div for
most modern browsers, though some IE might need the div! */
}

.sddm li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold .80em arial;
/* Dont use px and especially not flyspeck like 9px! */
}

.sddm li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
background: #df7000;
color: #FFFFCC;
text-align: center;
text-decoration: none;
}

and in the html, at least:


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

<ul class="sddm" style="padding-top: .5em;">
<!-- padding-top to make a gap that you seem to want between the
first and second ULs -->

Hi and thanks,

As a 54 year old amateur web designer, you will have to give me a
while to digest that. Once I have got my head round it perhaps you
could discuss better ways. I am always open to suggestion.

Kind regards
Newbie Thicko

 

[dorayme]

....

As a 54 year old amateur web designer, you will have to give me a
while to digest that. Once I have got my head round it perhaps you
could discuss better ways. I am always open to suggestion.

OK, first things first... Junior! <g>

Do you see that it works to get you a fair bit of centring, by
actually trying it in say Firefox and Safari? Or are you having
trouble seeing what changes I am proposing? Second of the first
things, is there anything about the markup changes that you do
not understand. Like, for example, that IDs must be unique on a
webpage doc? Or that to centre a block element, one needs to
limit it by giving it a width? The idea of overflow: hidden is
probably a little hard to digest, you can forget about it and use
a clearing div instead, though it is not quite as elegant.

About possible later further suggestions, let me give you a
little peep into one I am liable to make: centring is over-rated
and actually can lead to untidiness and even a waste of space!

 

[Beauregard T. Shagnasty]

[snippage]
What exactly is the "body" but the main container? If you set the
width, nothing inside the window will break.

I know what the "body" of a web page is, doofus. My point, which you
missed, was:
"Why the sam hell did you set the width to a HUNDRED *FEET*!

As I said, so sense of humor.
There is no style attribute for "ft" dipshit.

I know that, asshat. You also missed the second point.

It was just one of those things I do for the fun of it.

So, for the "fun of it" you purposefully lead newbies astray. There can
only be two answers: you are malicious, or you didn't know in the first
place. I'd go with "you didn't know".

 

[Newbie]

OK, first things first... Junior! <g>

Do you see that it works to get you a fair bit of centring, by
actually trying it in say Firefox and Safari? Or are you having
trouble seeing what changes I am proposing? Second of the first
things, is there anything about the markup changes that you do
not understand. Like, for example, that IDs must be unique on a
webpage doc? Or that to centre a block element, one needs to
limit it by giving it a width? The idea of overflow: hidden is
probably a little hard to digest, you can forget about it and use
a clearing div instead, though it is not quite as elegant.

About possible later further suggestions, let me give you a
little peep into one I am liable to make: centring is over-rated
and actually can lead to untidiness and even a waste of space!

Hi,

As Craig Reville-Hall would say "That was an absolute disaaaaaaster
daaaarling!"

Below is my original link which works as I want it to with all the
drop down menus. Problem is the page breaks up when the window is
downsized and also it is not centered. Underneath it is a link to the
page with your suggested changes in which the drop down menus no
longer work, the text is all a different size and the homepage menu is
no longer part of the menubar. What on earth have I done wrong?

The good news is that at least it doesnt break when the window is
downsized AND it is more central. However, I cannot see how that would
work under different screen resolutions. In addition I cannot see why
you removed the width:60px from the #sddm li a style as I want a fixed
width for each menu. Take your point about removing the br tag and
replacing it with top padding in the next ul.

http://www.parcsystems.com/newsite/dropdownmenutest.html
http://www.parcsystems.com/newsite/dropdownmenutest2.html

Kind Regards
Newbie Thicko

 

[dorayme]

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
....

 

[dorayme]

As Craig Reville-Hall would say "That was an absolute disaaaaaaster
daaaarling!"

Below is my original link which works as I want it to with all the
drop down menus. Problem is the page breaks up when the window is
downsized and also it is not centered.

How does it *break*? The menu items wrap, and that is actually a
good thing! All you need is a very little more CSS to separate
the wrapped links vertically, I addressed this in my last post,
with a little margin.

Underneath it is a link to the
page with your suggested changes in which the drop down menus no
longer work, the text is all a different size and the homepage menu is
no longer part of the menubar. What on earth have I done wrong?

I think a couple of things. You have:

<ul class="sddm" style="padding-top: 0.5em;" #=""
onmouseover="mopen('m1')" onmouseout="mclosetime()">Homepage
<div st

??

the major problem, to be brief, being that a UL must have as
first child, a LI, can't be a DIV. Check your changes again.

The good news is that at least it doesnt break when the window is
downsized AND it is more central. However, I cannot see how that would
work under different screen resolutions.

Yes, I agree that 55em for width will make it too rigid, but I
have posted a variation for you since, using percentages for this
very reason.

In addition I cannot see why
you removed the width:60px from the #sddm li a style as I want a fixed
width for each menu.

The reason it is a bad idea is that if your visitor uses a bigger
text size than you are expecting, the text might not fit into a
fixed px box. If you must dictate the size, pick the longest list
item text, and set the width by its standard in ems. A bad idea
though because it is a waste of space for shorter items, better
to let the list items grow or shrink according to the content.
Floats are shrink-to-fit, shame to not use the magic of this.

 

[richard]

You must be new here. We call that guy "Richard the Stupid," and for
good reason. It's best to just ignore him.

sherm--

It is always bad advice if I give it. If dorayme or Beau the shithead gives
it, word for word, it's good advice.

There are always those in every newsgroup who believe they are the high and
mighty and if YOU are not in their league, you are a dumbass.

So tell us oh great high and mighty one, what is YOUR solution to his
problem? Same as mine?

 

[richard]

Hi,

As Craig Reville-Hall would say "That was an absolute disaaaaaaster
daaaarling!"

Below is my original link which works as I want it to with all the
drop down menus. Problem is the page breaks up when the window is
downsized and also it is not centered. Underneath it is a link to the
page with your suggested changes in which the drop down menus no
longer work, the text is all a different size and the homepage menu is
no longer part of the menubar. What on earth have I done wrong?

The good news is that at least it doesnt break when the window is
downsized AND it is more central. However, I cannot see how that would
work under different screen resolutions. In addition I cannot see why
you removed the width:60px from the #sddm li a style as I want a fixed
width for each menu. Take your point about removing the br tag and
replacing it with top padding in the next ul.

http://www.parcsystems.com/newsite/dropdownmenutest.html
http://www.parcsystems.com/newsite/dropdownmenutest2.html

Kind Regards
Newbie Thicko

In #2, I notice you changed "ssdm" from ID to class. This causes havoc in
the javascript as the script is looking for the ID.
You still did not put it all in a container. When you do, change any
"absolute" to "relative".

I copied the code into my editor and it is having holy fits. Tag pairs are
not matching as they should. I would suggest you go through your coding and
make sure all the quotes and tags are properly matched.

If you need to, strip out all but the bare essentials.Then one by one, add
the working code back in.

 

[richard]

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">

 

[Newbie]

How does it *break*? The menu items wrap, and that is actually a
good thing! All you need is a very little more CSS to separate
the wrapped links vertically, I addressed this in my last post,
with a little margin.


I think a couple of things. You have:

<ul class="sddm" style="padding-top: 0.5em;" #=""
onmouseover="mopen('m1')" onmouseout="mclosetime()">Homepage
<div st

??

the major problem, to be brief, being that a UL must have as
first child, a LI, can't be a DIV. Check your changes again.


Yes, I agree that 55em for width will make it too rigid, but I
have posted a variation for you since, using percentages for this
very reason.


The reason it is a bad idea is that if your visitor uses a bigger
text size than you are expecting, the text might not fit into a
fixed px box. If you must dictate the size, pick the longest list
item text, and set the width by its standard in ems. A bad idea
though because it is a waste of space for shorter items, better
to let the list items grow or shrink according to the content.
Floats are shrink-to-fit, shame to not use the magic of this.

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.

Cheers

 

[Newbie]

It is always bad advice if I give it. If dorayme or Beau the shithead gives
it, word for word, it's good advice.

There are always those in every newsgroup who believe they are the high and
mighty and if YOU are not in their league, you are a dumbass.

So tell us oh great high and mighty one, what is YOUR solution to his
problem? Same as mine?

Dont really want to get involved in this ding dong battle BUT at the
end of the day it is only richard and dorayme that have come up with
any sort of solution.

 

[Newbie]

This is a technical group, not kindergarten - good intentions don't
count for anything here. When someone is spouting nonsense (as Richard
did, and usually does) I think it's helpful to point that out, to help
keep him from confusing the issue even further.

What's more, Richard didn't even have good intentions - he admitted out
of his own mouth that he posts misleading nonsense "for fun." That is,
he enjoys leading newbies astray, and does so deliberately.

sherm--

Thanks for the advice <g!>