I would place a <div> with an id immediately inside the "body" tag of your HTML. Make sure that the <div> closes AFTER the last element you want included inside the box. From there, it's a simple matter of styling to your needs.
Example:
Your general HTML would look like this, with any more content place between the div tags.
-
<html>
-
<body>
-
<div id=box>
-
<p>Here is where you would fill in the content you want inside the box.</p>
-
............
-
</div>
-
</body>
-
</html
-
The necessary CSS looks something like this:
-
#box{
-
position: absolute;
-
height: xx;
-
width: xx;
-
background-color: xx;
-
border: xx (optional);
-
}
-
You can center a box using this general method:
1. Position the box absolutely.
2. Set the left: attribute to 50% (i.e left:50%;)
3. Make the left margin of the box the negative value of half it's width.
Let's say we have a box that is 100px wide. If we position it using left:50%, the left edge of the box will be in the middle of the browser window. This is obviously not centered because we want the middle of the box to be in the middle of the viewing area. To achieve this, we now take half of the box's width (50px;) , and set the box's left-margin to the negative of this value.
#thenameofyourid{
position:absolute;
left: 50%;
margin-left: -50px;
}
That should take care of you horizontally.
You can do the same thing vertically by setting top:50% and making the the top margin the negative value of half the box's height.
Hope this is clear, let me know about any questions
Tom
67
