9 replies [Last post]
john love
john love's picture
Offline
Enthusiast
Last seen: 9 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Let me begin with the code and then ask the question ...

etc ...

etc ...

The question is ... the doCalendar()-generated code is not centering ... everything else on the page is centering, but not this JavaScript-generated code.

I have tried placing text-align in the body style with same result.

John Love

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

We need to see the finished

We need to see the finished page. There could be all sorts of reasons. And you haven't really explained what isn't centering.

In proper browsers "text-align: center" only centers the text and other inline elements (img, select, input, textarea, object). It doesn't center block elements within their containers. For that you need to use "margin-left: auto; margin: right: auto;" on the block element that needs to be centered.

john love
john love's picture
Offline
Enthusiast
Last seen: 9 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Thanks, Chris

Here's the link:

http://freedom.up.net/~jolove/Worship_Folder/Saint_Louis_Folder/slk_weatherPane.html

I found elsewhere on CSSCreator the suggestion I implemented with just:

... content here ...

which definitely works.

What does not seem to work is:

.content { text-align: center; }

... content here ...

Anyway, thanks to you and elsewhere in CSSCreator, I have what works, although I do not understand why the latter approach does not.

Thanks again, Chris

John Love

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Text-align: center is not

Text-align: center is not equal to "center this block element".

The text-align: center; will centrally align any text INSIDE your div.

<div align="center"> will centrally align the div itself on the page.

Verschwindende wrote:
  • CSS doesn't make pies

john love
john love's picture
Offline
Enthusiast
Last seen: 9 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

div align=center works but will not xhtml strict validate

I just discovered that div align="center" will only validate xhtml transitional.

Again, bunches and bunches of thanks.

John Love

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

To clarify, that's not how

To clarify, that's not how to center a site with CSS Laughing out loud

If your container div has a fixed width, instead of using align="center" (which you've discovered won't validate), give it an ID and use something like:

body {
text-align: center;
}

#mainwrapper {
width: 500px;
margin: auto;
text-align: left;
}

that will center it.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No styling attributes in

No styling attributes in markup!!!! :mad:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

john love
john love's picture
Offline
Enthusiast
Last seen: 9 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Thanks bunches

It works .. though you probably knew that already.

John Love

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Yes, I did But Hugo is

Yes, I did Laughing out loud But Hugo is right, keep the styling to an external CSS file.

Glad you got it sorted.

Verschwindende wrote:
  • CSS doesn't make pies

john love
john love's picture
Offline
Enthusiast
Last seen: 9 years 26 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Glad you got it sorted

Your proven technique worked on everything but the Suckerfish drop down menus ... here's what I started with:

/* parent of menubar */ #navParent { position: relative; font-family: arial, helvetica, serif; font-size: 80%; font-weight: bold; top: 0em; left: 3em; width: 50em; padding-top: .5em; z-index: 1000; }

/* menubar */
#nav {
position: static;
list-style: none;
float: left;
background: white;
text-align: left;
height: auto;
padding: 0em;
border: solid .0625em #CC9966;
margin: 0em;
z-index: 1000;
}

Here's what I tried to change it to:

/* parent of menubar */ #navParent { position: relative; font-family: arial, helvetica, serif; font-size: 80%; font-weight: bold; top: 0em; text-align: center; padding-top: .5em; z-index: 1000; }

/* menubar */
#nav {
position: static;
list-style: none;
float: left;
background: white;
text-align: left;
width: 50em;
height: auto;
padding: 0em;
border: solid .0625em #CC9966;
margin: auto;
z-index: 1000;
}

... did not work ... putting the width in #nav(with text-align:left), rather than the width being in #navParent(with text-align:center) made the width of the menubar extend beyond the right solid-endcap on my Mac ... haven't tested on IE(Win) yet to see if the drop menus drop right below the main menu or are displaced to the right.

Any ideas?

John Love

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!