468,537 Members | 1,844 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,537 developers. It's quick & easy.

horizontally centering an absolute positioned div

What I'm trying to do is have two different sets of input elements
which occupy the same space on the page, only one of which is visible
at a time. You switch between the two with a bit of javascript. How
I've done it is to have one of the two sets be absolutely positioned.
Here is a short version:

<html>
<body>
<script>
function toggleAdvanced() {
var basic = document.getElementById("base.result");
var advanced = document.getElementById("advanced.result");
var advancedmode = false;
if (advancedmode)
{
basic.style.visibility="visible";
advanced.style.visibility="hidden";
advancedmode=false;
}
else
{
basic.style.visibility="hidden";
advanced.style.visibility="visible";
advancedmode=true;
}
}
</script>
<div style="position:relative;text-align:center">
<div class="input" id="base.result"
style="overflow:auto;width:100%;height:200px;min-height:200px;max-height:200px;margin-left:0;margin-right:0;text-align:center;visibility:visible">
<input type="text" name="first" value="start">
</div>

<div class="input" id="advanced.result"
style="overflow:auto;width:700px;min-width:700px;max-width:700px;height:200px;min-height:200px;position:absolute;top:0;text-align:center;max-height:200px;visibility:hidden">
<textarea style="width:560;height:160" name="advanced.result.text">
</textarea>
</div>
</div>
<a href="javascript:toggleAdvanced()">advanced</a>
</body>
</html>

It works, but I cannot get the absolutely positioned part to be
horizontally centered. I've tried "left:0;right:0",
"left-margin:0;right-margin:0", "left:50%;right:50%",
"text-align:center" etc. etc. etc.

I am viewing this using firefox 1.0 on Linux (red hat 9).

I have searched and searched and tried all kinds of things, but nothing
seems to work quite right. Any and all help would be greatly
appreciated! Thanks.

--J

Jul 23 '05 #1
10 3723

"jlub" <el******@yahoo.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
What I'm trying to do is have two different sets of input elements
which occupy the same space on the page, only one of which is visible
at a time. You switch between the two with a bit of javascript. How
I've done it is to have one of the two sets be absolutely positioned.
Here is a short version:
If you use display:none instead of visibility:hidden, you don't need to do
any positioning. Display: none takes the element to which it applies out of
the flow.

<html>
<body>
<script>
function toggleAdvanced() {
var basic = document.getElementById("base.result");
var advanced = document.getElementById("advanced.result");
var advancedmode = false;
if (advancedmode)
{
basic.style.visibility="visible";
advanced.style.visibility="hidden";
advancedmode=false;
}
else
{
basic.style.visibility="hidden";
advanced.style.visibility="visible";
advancedmode=true;
}
}
</script>
<div style="position:relative;text-align:center">
<div class="input" id="base.result"
style="overflow:auto;width:100%;height:200px;min-height:200px;max-height:200
px;margin-left:0;margin-right:0;text-align:center;visibility:visible"> <input type="text" name="first" value="start">
</div>

<div class="input" id="advanced.result"
style="overflow:auto;width:700px;min-width:700px;max-width:700px;height:200p
x;min-height:200px;position:absolute;top:0;text-align:center;max-height:200p
x;visibility:hidden"> <textarea style="width:560;height:160" name="advanced.result.text">
</textarea>
</div>
</div>
<a href="javascript:toggleAdvanced()">advanced</a>
</body>
</html>

It works, but I cannot get the absolutely positioned part to be
horizontally centered. I've tried "left:0;right:0",
"left-margin:0;right-margin:0", "left:50%;right:50%",
"text-align:center" etc. etc. etc.

I am viewing this using firefox 1.0 on Linux (red hat 9).

I have searched and searched and tried all kinds of things, but nothing
seems to work quite right. Any and all help would be greatly
appreciated! Thanks.

--J


Jul 23 '05 #2
On 20 Dec 2004 12:50:19 -0800, "jlub" <el******@yahoo.com> wrote:
What I'm trying to do...


[bla bla bla, snip]

And yet another Googlenaut, puih...

Did we not have this "war" some years back with C-Net?

At least they took the hint and for most of the time has left the
"Big-8" Usenet NG's alone since then.

Time again?

--
Rex
Jul 23 '05 #3
Thanks, works like a charm.

Except there appears to be a bug in Firefox 1.0 where the 'height' is
not honored after setting the style to "none" and back to "inline"
dynamically. I'll have to check to see if it's a known problem.

--J

Jul 23 '05 #4
And which of us is polluting the newsgroup?

Sorry I didn't ask you what constitutes proper newsreader software
before posting. Please post your home phone number so in the future I
can get permission to use any other software I might use in a way which
disturbs you.

--J

Jul 23 '05 #5
in comp.infosystems.www.authoring.html, jlub wrote:
Thanks, works like a charm.

Except there appears to be a bug in Firefox 1.0 where the 'height' is
not honored after setting the style to "none" and back to "inline"
dynamically. I'll have to check to see if it's a known problem.


Might be the fact that height does not apply to inline content?

And I saw no inline elements in you snippet (but could have easily missed
it as you didn't give URL), maybe you should use display:block?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 23 '05 #6
Thanks, works like a charm.

Except there appears to be a bug in Firefox 1.0 where the 'height' is
not honored after setting the style to "none" and back to "inline"
dynamically. I'll have to check to see if it's a known problem.

--J

Jul 23 '05 #7
Ah, thanks. The reference I was looking at
(http://www.blooberry.com/indexdot/cs...fy/display.htm)
said that 'inline' was the default, so that confused me. The same page
does say later on that in CSS1 the default is 'block'. In any case, I
still had to do a little monkeying around, since Firefox wouldn't allow
things to be 'display:none' at first render time (presumably for layout
purposes). It just showed them. Also, I had 'widths' set differently
in the two sections, which was causing problems.
In any case, seems to work now, so thanks for the help.

Jul 23 '05 #8
On 20 Dec 2004 15:00:31 -0800, "jlub" <el******@yahoo.com> wrote:
And which of us is polluting the newsgroup?
You are!
Sorry I didn't ask you what constitutes proper newsreader software
before posting.
Well; after Google filters it does not show what soft way you use to
post in the first place.
Please post your home phone number...
Glad to: it's +46(0)26181340
I'm awaiting your call.
...so in the future I can get permission to use any other
software I might use in a way which disturbs you.


Feel free to discuss that issue over phone ?

Or mayber better just here in the NG?

I'm sure you will get lots of suggestions.

--
Rex
Jul 23 '05 #9
Previously in comp.infosystems.www.authoring.html, jlub
<el******@yahoo.com> said:
And which of us is polluting the newsgroup?


Wha-? Whe-? Who are you talking to?

--
Mark Parnell
http://www.clarkecomputers.com.au
Jul 23 '05 #10
JRS: In article <11**********************@f14g2000cwb.googlegroups .com>
, dated Mon, 20 Dec 2004 15:07:12, seen in news:comp.infosystems.www.aut
horing.html, jlub <el******@yahoo.com> posted :
Thanks, works like a charm.

Except there appears to be a bug in Firefox 1.0 where the 'height' is
not honored after setting the style to "none" and back to "inline"
dynamically. I'll have to check to see if it's a known problem.

--J


When posting to Usenet, please use proper attributions, quoting, and
signatures, just like the intelligent people do. The conventions have
been developed over the years, by an international expert community, to
give the best overall experience for all users.

For this you may need to choose a better-designed service and/or better
local software; for good results, one needs to choose good tools. Those
choosing not to post in the conventional manner should expect a less
satisfactory response.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Ken Kast | last post: by
14 posts views Thread by Harlan Messinger | last post: by
4 posts views Thread by Mercury Mercurius | last post: by
4 posts views Thread by mike eli | last post: by
2 posts views Thread by Rob R. Ainscough | last post: by
4 posts views Thread by lister | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.