Discussion:
Center asp.net menu control
(too old to reply)
Ed Frazier
18 years ago
Permalink
I've been working all morning, trying to get as asp.net menu control to
center on my page (http://admin.renegadesprints.org/jan_28.aspx). There are
two menu contorls on the master page. The second one is the one I'm having
problems with.

It is centered when viewed in IE7, but in FireFox it is left justified. I've
tried putting it inside a div, inside an asp.net panel and also just wrapping
it in <p> elements and using text-align=center, but nothing seems to word
when viewed from FireFox.

Any suggestions?
Thanks,
Ed
Michael
18 years ago
Permalink
I notice that you have this code at the 2nd menu area. <div
class="alignCenter">

I think what you were trying to do or might try is <div align="center">

I didn't see a class called alignCenter in your css or html.

align is not the best way to handle but you also have some FrontPage code
that will need to be rewritten in the future also.
...
Ed Frazier
18 years ago
Permalink
Thanks for the reply Michael,

I do have a class called .alignCenter defined in the external style sheet.
The only element in it is margin: 0 auto;, but it didn't solve the problem.

And the only FrontPage code in there should be an include, used for the
footer menu. From reading other posts here, includes are not really FP server
side code so should be OK to leave in.

Since writing this post yesterday, I've done some research on asp.net
controls and it seems that most asp.net controls such as the menu control,
grid control and others are rendered as tables when the page is called. It
seems a bit odd that we go to all this trouble to make a page without tables,
and then Microsoft takes what we've written and turns it back into tables. Go
figure... If you look at the source for that page, it is full of tables, but
my code does not include a single one, anywhere.

There does seem to be a workaround of sorts, using something called asp.net
2.0 CSS Control Adapters (http://www.asp.net/CSSAdapters/WhitePaper.aspx) to
instruct asp.net to generate CSS rather than tables, but I haven't had time
to do much more than read the description of their use.

Thanks again for taking a look,
Ed
...
Cheryl D Wise
18 years ago
Permalink
Do you have a width specified for that div somewhere?

Center using margin: 0 auto; only works with a width and a valid doctype.
--
Cheryl D Wise
MS MVP FrontPage
http://by-expression.com
Online instructor led training http://starttoweb.com
`````````````````````````````````````````````````````````````````````````````````````````````````````
win a copy of Expression Web at http://forum.by-expression.com
`````````````````````````````````````````````````````````````````````````````````````````````````````
...
Kevin Spencer
18 years ago
Permalink
margin: auto also only works (sets left and right margins to the same value)
when both margins are set to auto, and with static positioning, or relative
positioning (normal flow).
--
HTH,

Kevin Spencer
Microsoft MVP
Software Composer
http://unclechutney.blogspot.com

The shortest distance between 2 points is a curve.
...
Cheryl D Wise
18 years ago
Permalink
CSS shorthand for two values margin: 0 auto: translates out to
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

So using margin: 0 auto; does work I use it all the time but it does require
a valid doctype and a width on the element you are trying to center. It does
not work if the container is take out of the flow with CSS positioning.
--
Cheryl D Wise
MS MVP FrontPage
http://by-expression.com
Online instructor led training http://starttoweb.com
`````````````````````````````````````````````````````````````````````````````````````````````````````
win a copy of Expression Web at http://forum.by-expression.com
`````````````````````````````````````````````````````````````````````````````````````````````````````
Post by Kevin Spencer
margin: auto also only works (sets left and right margins to the same
value) when both margins are set to auto, and with static positioning, or
relative positioning (normal flow).
--
HTH,
Kevin Spencer
Microsoft MVP
Software Composer
http://unclechutney.blogspot.com
Kevin Spencer
18 years ago
Permalink
I wan't disagreeing with you, Cheryl. I was mentioning something that had
not been mentioned. If the OP had used any positioning scheme that was not
"Normal Flow" the auto settings for the margins would not work. I had not
seen his markup, so I didn't assume that he was using a default positioning
scheme.
--
HTH,

Kevin Spencer
Microsoft MVP
Software Composer
http://unclechutney.blogspot.com

The shortest distance between 2 points is a curve.
...
Michael DeHaan
18 years ago
Permalink
Curious...did you try the <div align="center> on the second menu?
...
Michael DeHaan
18 years ago
Permalink
Okay try this: in the .ctl00_Menu2_2 class add margin: auto;

This should have the effect of putting 50% space on either side of the block
containing the 5 buttons which use the above class.

You could also be specific with margin-left: auto; margin-right: auto;
...
Ed Frazier
18 years ago
Permalink
Cheryl and Michael,

First, I want to thank you both for your help. The .alignCenter class did
not have a width attribute set, although a parent <div> did. I set the width
in .alignCenter and set margins to "0 auto", but it still did not work in
FireFox (works fine in IE7).

I tried your suggestion, Michael, and set align="center" and that *did*
work, but it was flagged as deprecated code and suggested I use another
construct.

All of those .ct100_Menu... classes are created at runtime when the page is
rendered, so I have no way to control them independently. The only thing that
I put on the page is the asp.net Menu control with a web.sitemap file to
populate the buttons. There are a *ton* of tags associated with the Menu
control, but I haven't been able to find one that will center the menu in a
<div>.

As I stated in a previous post, ALL those tables are created when the page
is rendered on the server. I coded none of that. The same is true for all the
other tables on the page as well. Those are the result of using asp.net
GridView controls connected to a database.

I did manage to get the second menu to work in FireFox by removing the width
attribute in .alignCenter and assigning fixed left and right margins of 120px
and 130px respectively. (works in this case but would not work on a
variable-width page) I'm beginning to think that using DHTML menus is a
better choice for now, at least until I learn enough asp.net programming to
take advantage of the dynamic aspects of Menu controls.

Thanks again for your help,
Ed
...
Ed Frazier
18 years ago
Permalink
Immediately after writing my last post, I took one last stab at the problem
and think I found the solution!

You have to use the CssClass tag property to assign a class (set CssClass
property to .asignCenter) for it to work. Just wrapping the Menu control in a
<div> with class="alignCenter" does not work.

Thanks again for all your suggestions. They were all helpful in arriving at
a solution.
Ed
Loading...