valign "middle" not working

#1 04-20-2007, 01:41 PM

Hi Steve,

First, place a text box in the middle of your page layout and hit Ctrl+T
which brings up an html insertion box.

Paste the following code inside the box:

<div style="border: 0; background-color: white; height: 50%; width: 50%;
position: absolute; left: 25%; top: 25%; color: black; overflow: auto;
padding:10px;">
<h1>Your Heading goes here</h1>
Normal text goes here. <br><br>
Set *overflow* to auto in case content exceeds the height or width of user's
screen. <br><br>

This is dummy text. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In sagittis. Nulla dictum, dui vitae egestas vestibulum, tellus eros
tincidunt lorem, ac commodo arcu nisi ac libero. Suspendisse interdum
laoreet libero. Etiam auctor neque at libero. Aliquam nonummy facilisis leo.
Quisque metus orci, adipiscing a, tempus quis, tempor vitae, nibh. Vivamus
nisi odio, sagittis vitae, feugiat quis, adipiscing non, dui. Praesent in
orci. Integer urna arcu, tristique a, pulvinar a, blandit consequat, enim.
Fusce non augue. Aenean auctor tortor sed libero. In est elit, porttitor
tristique, accumsan et, auctor eu, enim. Pellentesque porttitor felis id
magna. Phasellus vel metus interdum ante gravida viverra. <br><br>

Morbi libero magna, auctor non, luctus rhoncus, consequat et, magna.
Vestibulum lacinia, leo ac tincidunt vehicula, ligula neque scelerisque
quam, ac viverra urna mauris at erat. In eros tellus, aliquam in, aliquam
ut, sollicitudin id, dolor. Praesent varius, tortor pellentesque malesuada
tincidunt, nisl ligula lacinia magna, ac aliquam nulla sem fermentum enim.
Etiam ultricies, purus in eleifend rutrum, neque libero pellentesque lorem,
vitae elementum felis erat eu justo. Nulla felis ipsum, iaculis a, mollis
non, congue sit amet, ante. Nullam vestibulum. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean sit
amet nibh in nulla pulvinar pulvinar. Nullam at libero. </div>

--Nancy

"Steve" <steveSPAMSTOPPER@metamotion.co.uk> wrote in message
news:f0a9ag$s0r4@flsun90netnews01.netobjects.com.. .
> Hi, I'm trying to set vertical alignment so that my page appears centred
> both horizontally and vertically in the browser window using Explorer and
> Firefox. I've tried the DIV coding which I found at Workbench. This
centred
> horizontally but not vertically. Could anyone advise on this matter
please.
>
>

#2 04-20-2007, 03:48 PM

Hi, I'm trying to set vertical alignment so that my page appears centred
both horizontally and vertically in the browser window using Explorer and
Firefox. I've tried the DIV coding which I found at Workbench. This centred
horizontally but not vertically. Could anyone advise on this matter please.

#3 04-20-2007, 03:53 PM

I am using NOF MX - I did look at that group to post but there is no
activity (being old) so I've posted this message on most active in hope of
getting some help.
Thanks,
Steve.

> Hi, I'm trying to set vertical alignment so that my page appears centred
> both horizontally and vertically in the browser window using Explorer and
> Firefox. I've tried the DIV coding which I found at Workbench. This
> centred horizontally but not vertically. Could anyone advise on this
> matter please.
>

#4 04-20-2007, 04:00 PM

I forgot to mention 2 other important things.

1) you should use a zero margins border for this technique.

2) Also insert this code into the html of your page layout in the *beginning
of body tab* (if you have one in MX) or the *between body tab* - it's been
so long since I used MX I can't remember.

<body style="height: 100%; width: 100%; margin: 0; padding: 0;>
and this in the end of body tab:
</div>

This division will then stay centered on the display even if user's adjust
viewport size.
See attached screenshot to see how it looks in FF.

--Nancy

"Nancy O" <nancyoshea1@NOSPAMverizon.net> wrote in message
news:f0atuq$s09@flsun90netnews01.netobjects.com...
> Hi Steve,
>
> First, place a text box in the middle of your page layout and hit Ctrl+T
> which brings up an html insertion box.
>
> Paste the following code inside the box:
>
> <div style="border: 0; background-color: white; height: 50%; width: 50%;
> position: absolute; left: 25%; top: 25%; color: black; overflow: auto;
> padding:10px;">
> <h1>Your Heading goes here</h1>
> Normal text goes here. <br><br>
> Set *overflow* to auto in case content exceeds the height or width of
user's
> screen. <br><br>
>
> This is dummy text. Lorem ipsum dolor sit amet, consectetuer adipiscing
> elit. In sagittis. Nulla dictum, dui vitae egestas vestibulum, tellus eros
> tincidunt lorem, ac commodo arcu nisi ac libero. Suspendisse interdum
> laoreet libero. Etiam auctor neque at libero. Aliquam nonummy facilisis
leo.
> Quisque metus orci, adipiscing a, tempus quis, tempor vitae, nibh. Vivamus
> nisi odio, sagittis vitae, feugiat quis, adipiscing non, dui. Praesent in
> orci. Integer urna arcu, tristique a, pulvinar a, blandit consequat, enim.
> Fusce non augue. Aenean auctor tortor sed libero. In est elit, porttitor
> tristique, accumsan et, auctor eu, enim. Pellentesque porttitor felis id
> magna. Phasellus vel metus interdum ante gravida viverra. <br><br>
>
> Morbi libero magna, auctor non, luctus rhoncus, consequat et, magna.
> Vestibulum lacinia, leo ac tincidunt vehicula, ligula neque scelerisque
> quam, ac viverra urna mauris at erat. In eros tellus, aliquam in, aliquam
> ut, sollicitudin id, dolor. Praesent varius, tortor pellentesque malesuada
> tincidunt, nisl ligula lacinia magna, ac aliquam nulla sem fermentum enim.
> Etiam ultricies, purus in eleifend rutrum, neque libero pellentesque
lorem,
> vitae elementum felis erat eu justo. Nulla felis ipsum, iaculis a, mollis
> non, congue sit amet, ante. Nullam vestibulum. Class aptent taciti
sociosqu
> ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean sit
> amet nibh in nulla pulvinar pulvinar. Nullam at libero. </div>
>
>
> --Nancy
>
>
>
>
> "Steve" <steveSPAMSTOPPER@metamotion.co.uk> wrote in message
> news:f0a9ag$s0r4@flsun90netnews01.netobjects.com.. .
> > Hi, I'm trying to set vertical alignment so that my page appears centred
> > both horizontally and vertically in the browser window using Explorer
and
> > Firefox. I've tried the DIV coding which I found at Workbench. This
> centred
> > horizontally but not vertically. Could anyone advise on this matter
> please.
> >
> >
>
>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode