Click to See Complete Forum and Search --> : Align layer in the middle of the page??
ovisopa
04-17-2003, 06:51 AM
Hello ppl,
I made a layer for my webpage, and I intent to use it when I add something new major things in the webpage.
The code is this :
<body onload="document.getElementById('pop').style.visibility='visible'">
<div id="pop" style="
position: absolute;
visibility: hidden;
border: 1pt black ridge;
left:300px;
z-index:10;
width: 150px;
height: 200px;">
here is a table with my news... in this table I have a picture [X] which whne is clicked it will set the layer to visibility: hidden.
</div>
What I want to ask you is how can I center the layer in the middle of the page? I wan't to be in the middle for all resolution, if somebody visit my page an has the screen set to 800x600 -> the layer should be in the middle and so on for every resolution.
I found a javascript which set a popup window to be in the center of the screen, but I need to set the top and left coordonates from the div style. How can I do that?
10x
see ya all
khalidali63
04-17-2003, 06:56 AM
how about <div align="center"></div>
Cheers
Khalid
ovisopa
04-17-2003, 07:26 AM
Hy and 10x for help, if this gonna work (I guess it's working) I'm gonna kill my self :)) .. I don't know why I didn't think to do so .
10x
see ya
tim_gor
04-17-2003, 07:41 AM
I may be wrong, but align="center" doesn't work for Layers? I've tried it before and it doesn't work for me...
My solution would be a little script tag following the DIV layer:
<div id="LAYERNAME" style=".... your paramaters as before"></div>
<script>
// Get the dimensions of the browser window
var winwidth = document.body.clientWidth;
var winheight = document.body.clientHeight;
// Get the dimensions of the layer
var layerwidth = LAYERNAME.clientWidth;
var layerheight = LAYERNAME.clientHeight;
// Centre the layer
LAYERNAME.style.left = ((winwidth - layerwidth)/2) + "px";
LAYERNAME.style.top = ((winheight - layerheight)/2) + "px";
</script>
This should work (though only in IE -- the variables for winwidth,winheight,layerwidth and layerheight are different in Netscape! It's rubbish but I guess we have to wait until Netscape and Microsoft get their act together)
khalidali63
04-17-2003, 07:48 AM
If you looked at the code of the original post,its not "NS layer" its about div tags and div tags do have align attribute.
For some odd reason I see "alllots a" people use word layer for divs on these forums..wonder why???????
Khalid
ovisopa
04-17-2003, 07:52 AM
I tried with <div align="center"> and it's not working but now I made the left value in the style like this left : 40%; and it's ok for this resolution , I will cheange the res to 800x600 to see if it's ok .. anyway 10x for help
seeya
khalidali63
04-17-2003, 07:55 AM
if div is not working then there si some other serious problem you did not mention in your code.Its a defecto standard by w3c out for 3 yrs at least since they took out <center> tags,so better address your actual problem in the code
:D
Cheers
Khalid
EDIT:
there is only one situation that I am aware of when div breaks it when you try this
<div align="center">
<form></form>
</div>
And that could be wrong too,but seems like it breaks in the above situation.
ovisopa
04-17-2003, 07:56 AM
Hy tim_gor
I will try your code later, wonder where it will be positioned the layer in the netscape, you know ? in the left side ??
10x for help
see ya
Here is a cross-browser way to vertically and horizonally center a layer. http://www.infinitypages.com/research/verticalcentereddiv.htm
Hope that helps...
tim_gor
04-17-2003, 08:03 AM
khalidali I think you'll find that the DIV tag used in this situation is effectively a Layer, and the ALIGN attribute will not actually work in this case.....
khalidali63
04-17-2003, 08:11 AM
The only possible reason <div align="center" wont work is that the div position:absolute;
Style property is set.
and there are co-ordinates given for it.But I thought that was common sense to not use absolute positioning when trying to use align="center".If one wants to center the div using default align="center" then they would have erased the style properties for positioning the element.
Cheers
Khalid
tim_gor
04-17-2003, 08:15 AM
Yeah but if you don't specifiy "position:absolute" in the style attribute, then this DIV tag is no longer a LAYER!! It just flows with the rest of the document.
Yes ALIGN="center" works, but the text doesn't hover over the page like a layer's supposed to.
Hm... I think for this question, pyro's site offers a pretty decent solution!
khalidali63
04-17-2003, 08:33 AM
:D
exactly,thats what my point was that div works,ofcourse there are other situations where you want to position items absolutely.So its not correct to say something doesnt work,but in a specific situation.
Cheers
Khalid
tim_gor
04-17-2003, 08:44 AM
Well forgive me for stating the obvious... but this IS a specific situation?
The question was about aligning a div LAYER.
I said that "align=center" doesn't work for LAYERS.
I didn't say align=center doesn't work per se.
It just doesn't work in the context of this question..
Nevermore
04-17-2003, 03:37 PM
I'm sure I have got something wrong about this, but wouldn't a more compatible and HTML standards compliant* way of doing this be:
<div style="position:absolute; top:50%; left:50%;">Hello</div>
I'm sure I must have missed something. It is compatible with all browsers. NN4+ at least, so mroe than the JavaScript, and will work if JavaScript is disabled. In some browsers at least, it will even resize without a refresh.
*The 'align' property is not part of the HTML 4.01 specification, which states that CSS should be used instead.
DrDaMour
04-17-2003, 03:49 PM
first off 50% won't center it, it will start it at the center.
that javascript objects window.height and window.width will give you the dimensions of the window, alternatively you can have screen.height and screen.width as your values, the choice is up to you
the formula for centering an object to a parent is
object.x = (parent.width / 2) - (object.height /2)
object.y = (parent.height / 2) - (object.height /2)
and as to why div align="center" didn't work, the style sheet commands of left and top were overriding the align="center"
the optimal solution is dic align="center" with style sheet having some top value, but no left value
ovisopa
04-17-2003, 04:42 PM
You wrote these lines:
object.x = (parent.width / 2) - (object.height /2)
object.y = (parent.height / 2) - (object.height /2)
but how I shold use those lines ? for now I use this left: 40%, as I said in my four post, but now I saw the script which pyro sugest me to use it and I think is the most corect way to do what I want.
Guys ... you helped me alot .. 10x and see ya all
DrDaMour
04-17-2003, 08:29 PM
that script does exactly what i mentions, of course they simplify the math
i had
z = x/2 - y/2
they have
z = (x-y)/2
Originally posted by DrDaMour
alternatively you can have screen.height and screen.width as your values, the choice is up to youBut, there is a very big difference between window.height and screen.height. screen.height returns the height of the screen, so if the browser is not maximized, you numbers will not be correct (actually, they won't be even if it is do to browser chrome) while window.height, or better, window.innerHeight for NN and document.body.clientHeight for IE, will return the size of the window (or with innerHeight, the viewing area).
DrDaMour
04-17-2003, 08:55 PM
i know that, i was saying you coul do it based on whatever you want. For my page i like to force peopel to view in max. I thought it was implied what they were....
tim_gor
04-21-2003, 09:27 AM
Well the problem with using 50% is that you'll have the TOP-LEFT corner of the layer aligned in the centre.
I think someone suggested doing 45% or something like that, but then you're assuming a layer size that's 10% of the screen resolution, so it's not guaranteed to work in all resolutions!
tim_gor
04-21-2003, 09:31 AM
Sorry ignore my previous post... didn't read all the replies
I thought this problem was solved already?
Someone posted a link which has cross-browser code for centring a layer?
Originally posted by tim_gor
I thought this problem was solved already?
Someone posted a link which has cross-browser code for centring a layer?
Yup, I posted a link way back when... :D I would have thought that would have solved it as well... :rolleyes: