472,967 Members | 1,922 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,967 software developers and data experts.

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 3878

"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
14
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...
4
by: Mercury Mercurius | last post by:
This page looks great in Netscape 7, but it simply will not center the bottom <div> in IE6: http://www.lawtonfineart.com/index3.htm I want the bottom <div> to be centered beneath the graphics,...
9
by: Faz | last post by:
Hi I'm having some real trouble with a header I have created within a container. I have two problems; firstly the menu (a horizontal UL) will not centre within the surrounding header, despite...
4
by: mike eli | last post by:
Hi, I have several absolute positioned elements inside an absolute positioned DIV. I would like one of the nested elements to have a dynamic width. I set it's left and right attributes to 5, so...
2
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...
3
by: BT | last post by:
I have taken over the support of an existing webpage and I need to revise the page so that it is centered (left and right) on the screen instead of aligned on the left. I can do this easily, but...
4
by: lister | last post by:
I am trying to center a DIV horizonally, but I want the DIV fluid so that it is just wide enough to encompass its contents. I've tried margin:auto with no joy :( I've set up a demo here:...
7
by: chemlight | last post by:
I am having an issue with HTML elements not printing when positioned absolutely when they extend beyond the first page. I am working on some foreign tax refund forms. The forms are cut into multiple...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.