Align layer in the middle of the page??

@ovisopaApr 17.2003

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 :

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 800×600 -> 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

to post a comment

JavaScript

22 Comments(s) _↴

@khalidali63Apr 17.2003 — #how about <div align="center"></div>

Cheers

Khalid

@ovisopaauthorApr 17.2003 — #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_gorApr 17.2003 — #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)

@khalidali63Apr 17.2003 — #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

@ovisopaauthorApr 17.2003 — #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

@khalidali63Apr 17.2003 — #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

?

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.

@ovisopaauthorApr 17.2003 — #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

@pyroApr 17.2003 — #Here is a cross-browser way to vertically and horizonally center a layer. http://www.infinitypages.com/research/verticalcentereddiv.htm

Hope that helps...

@tim_gorApr 17.2003 — #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.....

@khalidali63Apr 17.2003 — #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_gorApr 17.2003 — #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!

@khalidali63Apr 17.2003 — #?

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_gorApr 17.2003 — #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..

@NevermoreApr 17.2003 — #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:
[CODE]<div style="position:absolute; top:50%; left:50%;">Hello</div> [/CODE]
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.

@DrDaMourApr 17.2003 — #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

@ovisopaauthorApr 17.2003 — #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

@DrDaMourApr 18.2003 — #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

@pyroApr 18.2003 — #[i]Originally posted by DrDaMour [/i]

[B]alternatively you can have screen.height and screen.width as your values, the choice is up to you[/B][/QUOTE]But, 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).

@DrDaMourApr 18.2003 — #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_gorApr 21.2003 — #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_gorApr 21.2003 — #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?

@pyroApr 21.2003 — #[i]Originally posted by tim_gor [/i]

[B]I thought this problem was solved already?

Someone posted a link which has cross-browser code for centring a layer? [/B][/QUOTE]
Yup, I posted a link way back when... ? I would have thought that would have solved it as well... :rolleyes:

Also in #JavaScript _↴

Object that dont exist...Dynamicaly change text font, size and colour.build an order form with javascript

Success!

Help @ovisopa spread the word by sharing this article on Twitter...

Tweet This

Align layer in the middle of the page??

22 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Align layer in the middle of the page??

22 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

22 Comments(s) _↴

Also in #JavaScript _↴