center everything!!

ADoozer · Jun 11, 2003

ok... alopogies... i know this probably isnt the right forum!!

i need to write a script to get the size(pixels) of the viewable IE window, then position all my images centrallly (within that window)!!!

i know his is similar to a question in the past that i have asked but the solution didnt help!!!!

i know a little VBscript and JScript by the way (although i am an ameteur!!!)

any help appreciated

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
A General Guide To Excel in VB FAQ222-3383
The Great Date Debate Thread222-368305
File Formats Galore @

http://www.wotsit.org

or

http://www.filext.com

onpnt · Jun 11, 2003

If you want to center everything then you create a liquid page with the use of nestd tables set to 100% the wodth of the page
eg:
<html>
<body>
<table width="100%" height="100%">
<tr>
<td>
<table width="100%">
<tr>
<td align="center">This will always be in the center!</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table height="100%" width="100%">
<tr>
<td valign="bottom" align="center">This will always be in the center!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

this is crude but the theory of liquid design. if you try resizing the window you will see the values move as staying in the center and at the bottom all times.

there is no scripting to this development. getting the screen.width etc.. will only be a over did script that is not needed.

____________________________________________________
_{get the best answer to your questions by asking the best questions "General FAQ" faq333-2924}

_{^{http://www.onpntwebdesigns.com}}

ADoozer · Jun 11, 2003

onpnt... thanks.. i kinda knew that but ive given up on tables alltogether!! was hoping it was possible to return the screen res and/or window height and width using code)

appreciate your time!

ie looking for code along the lines of!!

(im a firm believer in DIV and CSS now

)

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
A General Guide To Excel in VB FAQ222-3383
The Great Date Debate Thread222-368305
File Formats Galore @

http://www.wotsit.org

or

http://www.filext.com

onpnt · Jun 11, 2003

this information should give you a starting point. just / by 2 to center a <div> etc.. and see how it goes.

Browser window size.
thread216-459119

____________________________________________________
_{get the best answer to your questions by asking the best questions "General FAQ" faq333-2924}

_{^{http://www.onpntwebdesigns.com}}

ADoozer · Jun 12, 2003

that looks like the business i need!!

will give it a go when im back in work (long weekend, hoorah!!!)

thnxs!!

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
A General Guide To Excel in VB FAQ222-3383
The Great Date Debate Thread222-368305
File Formats Galore @

http://www.wotsit.org

or

http://www.filext.com

EdwardMartinIII · Jun 12, 2003

Okay, I tried this, thinking this ought to be a no-brainer using one table:

Code:

<html>
  <head>
    <title>HTML Sample</title>
  </head>
  <body>
      <table border=&quot;1&quot; width=&quot;100%&quot; height=&quot;100%&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
        <tr>
          <td valign=&quot;middle&quot; align=&quot;center&quot;>center</td>
        </tr>
      </table>
  </body>
</html>

And it did a fine job in IE and Mozilla. BUT, once the Mozilla window became somewhat smallish, this refused to get any smaller. In IE, it could get as skinny as the word "center", but in Mozilla, no such luck.

So, yes, you can center everything just hunky dory, it seems, but I'd sure like to know what I'm doing wrong such that this won't do what I want in Mozilla.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

ADoozer · Jun 12, 2003

arghhh... i decided to take a look... the getting the size bit works a treat, excellent if you will!!

but now i have a semi related question!!!

i know how to use CSS to position <DIV>'s but how do i go about dynamically positioning the <DIV> based on the returned screen dimensions....

ie:

//position image (imaginary image 100*100 pixels)
var myleft=(myWidth/2)-50;
var mytop=(myHeight/2)-50;

<DIV top=mytop left=myleft> <IMG src="myimage.jpg"></DIV>

ive tried using <STYLE> and ive tried creating classes but none of these seem to work!!!

im hoping its something really simple to do!!

thnx again in advance!!

PS: edwardmartin3 im a relative newby to HTML/JSCRIPT etc so i cant help you.. sorry!!!

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
A General Guide To Excel in VB FAQ222-3383
The Great Date Debate Thread222-368305
File Formats Galore @

http://www.wotsit.org

or

http://www.filext.com

EdwardMartinIII · Jun 12, 2003

ADoozer,

Does the HTML I posted do what you want to do?

I mean, yeah, you can use some JavaScript to determine the client browser height and width (ah, but different browsers seem to report different numbers), then divide by 2, then add one half the width of the thing you want to center and then programatically adjust the div tags using JavaScript...

...but if you can do it this way, it just seems so much easier.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

ADoozer · Jun 12, 2003

EM3: ive had too many bad experiences with tables, im now a convert to <DIV> and CSS.

i guess what im asking is... can i use the values returned by my JS to position a <DIV>?

ps the code i am using is that posted on the website posted by onpnt... but for claritys sake here it is

<HTML>
<HEAD>
<TITLE>
Center line
</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1170" name="GENERATOR">

</HEAD>

<BODY>

<SCRIPT language="javascript">
var myWidth = 0;
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' )
{
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else
{
if( document.documentElement &&( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else
{
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
}
}

//position image (imaginary image 100*100 pixels)
var myleft=(myWidth/2)-50;
var mytop=(myHeight/2)-50;

</SCRIPT>

</BODY>
</HTML>

thnx in advance!!

If somethings hard to do, its not worth doing - Homer Simpson
------------------------------------------------------------------------
A General Guide To Excel in VB FAQ222-3383
The Great Date Debate Thread222-368305
File Formats Galore @

http://www.wotsit.org

or

http://www.filext.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

center everything!!

ADoozer

Programmer

onpnt

Programmer

ADoozer

Programmer

onpnt

Programmer

ADoozer

Programmer

EdwardMartinIII

Technical User

ADoozer

Programmer

EdwardMartinIII

Technical User

ADoozer

Programmer

Similar threads

Part and Inventory Search

Sponsor