Miggy
02-10-2009, 02:08 PM
I got my "picture as a background" issue resolved, thanks to the assistance I got from this board. Now, as I continue to make my website, I have another issue, and I'd like to know if there's a resolution to this.
I have a heading or title that is displayed near the top of the screen and centered. I have researched CSS spacing and how to define an area for a block of text - and how to place it where you want it on the screen. I created an area that extends approx. 3/4 of the way across, scrolls downwards, and should be centered. I knew from my previous attempts at creating a page with CSS spacing that it looks good on my monitor and resolution, but is way off when viewed on a smaller monior / lower resolution. I found the % function and thought that is was the answer. I thought it placed the block of text at a certain percentage of the screen. So I played around with the variables until it looked right on my monitor, uploaded the page, then looked at it with my other PC that is set at a lower resolution. The block of text is off, and skewed to the right.
Is there not any way to get it set up so that anyone who looks at it will view it as I intend? I could use the normal < center > html function, but then the each line of the block of text itself obviously gets centered and that messes up the look.
For reference, here is an example of the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:vladimir script; pristina; brush script mt; font-size:550%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
#fixed {position:absolute; top:25%; left:25%; width:950px; z-index:10; color:#99000; border:3px solid #98AFC7;
padding:10px;}
p.topmargin {margin-top: 1cm}
</style>
</head>
<body>
<div id="scroller">
<div id="content">
</div>
<p class="topmargin">
<center>
<font color="#99000">
This Is The Page Title
</center>
<p>
<br>
<div id="fixed">
<p style="font: 16pt/20pt Garamond, Georgia">
This starts the text that should be displayed with several spaces below the heading and also
centered on the page. It displays this way on my monitor at 1920X1200 resolution; however on
smaller monitors at lower resolution, it is displayed directly below and almost on top of the
heading, and skewed drastically to the right. It was hoped that the % function on the CSS spacing
would put it at at certain location on any monitor / resolution, but this is not so.<br>
The following is random text to fill up space:<br>
<br>
American McGee's<br>
Alice<br>
Observations, Comments, & Walkthrough<br>
By Soren Andersen<br>
<br>
"This is an all new Alice adventure, and can be considered a third chapter in her story. It takes place after Alice's
Adventures in Wonderland and Through the Looking Glass, and although it features many characters and places from those
stories, things have definitely taken a turn for the worst in Alice's childhood dreamland..."<br>
<br>
The foregoing is a quote that I found somewhere. There are a lot of things that are unique about this game, different
from most Adventure games. Actually, it is really a Role Playing Game, which is a very close relative of Adventure games,
or perhaps it may be considered an Action game. The dynamic graphics are exceptional, with much detail and continuously
adjustable perspective. There are whimsical quirks thrown in, just one example of many being Alice's breath becoming
visible in an icy scenario.<br>
<br>
EA Games has provided much supplemental information for and about this game. Go to START>Programs>EA GAMES>American
McGee's Alice>Gameplay Help for an Internet help supplement; in the header will be found several categories on which to
click for expansion. In addition, if in the above Start series you choose Web Resources instead of Gameplay Help you will
have the opportunity to access the game's home page, where under the Wonderland choice you will find descriptions and
illustrations of characters you will meet, and maps with none too accurate florid words concerning many locations,
including animated sketches. I strongly advise you to carefully peruse these two help items at the outset of gameplay,
and in addition I suggest that you print the entire Gameplay Help for ready reference while playing.<br>
<br>
</div>
</p>
</font>
</body>
I have a heading or title that is displayed near the top of the screen and centered. I have researched CSS spacing and how to define an area for a block of text - and how to place it where you want it on the screen. I created an area that extends approx. 3/4 of the way across, scrolls downwards, and should be centered. I knew from my previous attempts at creating a page with CSS spacing that it looks good on my monitor and resolution, but is way off when viewed on a smaller monior / lower resolution. I found the % function and thought that is was the answer. I thought it placed the block of text at a certain percentage of the screen. So I played around with the variables until it looked right on my monitor, uploaded the page, then looked at it with my other PC that is set at a lower resolution. The block of text is off, and skewed to the right.
Is there not any way to get it set up so that anyone who looks at it will view it as I intend? I could use the normal < center > html function, but then the each line of the block of text itself obviously gets centered and that messes up the look.
For reference, here is an example of the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:vladimir script; pristina; brush script mt; font-size:550%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
#fixed {position:absolute; top:25%; left:25%; width:950px; z-index:10; color:#99000; border:3px solid #98AFC7;
padding:10px;}
p.topmargin {margin-top: 1cm}
</style>
</head>
<body>
<div id="scroller">
<div id="content">
</div>
<p class="topmargin">
<center>
<font color="#99000">
This Is The Page Title
</center>
<p>
<br>
<div id="fixed">
<p style="font: 16pt/20pt Garamond, Georgia">
This starts the text that should be displayed with several spaces below the heading and also
centered on the page. It displays this way on my monitor at 1920X1200 resolution; however on
smaller monitors at lower resolution, it is displayed directly below and almost on top of the
heading, and skewed drastically to the right. It was hoped that the % function on the CSS spacing
would put it at at certain location on any monitor / resolution, but this is not so.<br>
The following is random text to fill up space:<br>
<br>
American McGee's<br>
Alice<br>
Observations, Comments, & Walkthrough<br>
By Soren Andersen<br>
<br>
"This is an all new Alice adventure, and can be considered a third chapter in her story. It takes place after Alice's
Adventures in Wonderland and Through the Looking Glass, and although it features many characters and places from those
stories, things have definitely taken a turn for the worst in Alice's childhood dreamland..."<br>
<br>
The foregoing is a quote that I found somewhere. There are a lot of things that are unique about this game, different
from most Adventure games. Actually, it is really a Role Playing Game, which is a very close relative of Adventure games,
or perhaps it may be considered an Action game. The dynamic graphics are exceptional, with much detail and continuously
adjustable perspective. There are whimsical quirks thrown in, just one example of many being Alice's breath becoming
visible in an icy scenario.<br>
<br>
EA Games has provided much supplemental information for and about this game. Go to START>Programs>EA GAMES>American
McGee's Alice>Gameplay Help for an Internet help supplement; in the header will be found several categories on which to
click for expansion. In addition, if in the above Start series you choose Web Resources instead of Gameplay Help you will
have the opportunity to access the game's home page, where under the Wonderland choice you will find descriptions and
illustrations of characters you will meet, and maps with none too accurate florid words concerning many locations,
including animated sketches. I strongly advise you to carefully peruse these two help items at the outset of gameplay,
and in addition I suggest that you print the entire Gameplay Help for ready reference while playing.<br>
<br>
</div>
</p>
</font>
</body>