• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 538
  • Last Modified:

Dreamweaver CS5, centering on the page

ok, I want to create a web page that is no larger than 1024 by 768 no matter what size monitor or res screen my viewers use.  I want it centered top/bottom and left/right in the browser window.

having the devil figuring that out.

I've tried dropping my pic into a blank page and centering and I've tried dropping in a table and now I'm googling the DIV option.

would love some help here and please, I"m working in design mode and don't really want to type in any code.

thanks

cliff
0
crp0499
Asked:
crp0499
  • 3
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
>> I"m working in design mode and don't really want to type in any code.


At some point you are going to have to learn the codes to get what you want.  Design Mode does not allow everything.

>> I want to create a web page that is no larger than 1024 by 768 no matter what size monitor or res screen my viewers use.  I want it centered top/bottom and left/right in the browser window.

Do you want it always at 1024 x 768 (which is wrong by the way...you need to consider the pixels removed by the browser toolbars and scrollbars) or do you want it to max out at those dimensions?
0
 
crp0499Author Commented:
i can type and work in HTML. i don't want to and I'm willing to seek out and learn alternate methods to achieve my goals without having to.

I want the page to always be 1024x768 and centered top/bottom and left/right.  So, if my viewer has a screen res of 1024x768 then their screen is full and if my users has a huge screen with a huge res, i want my tiny little 1024x768 page to be right in the middle of their screen.

:)
0
 
Jason C. LevineNo oneCommented:
Okay, the size is easy.

On your page, you need to insert a div that starts and stops with the body tag.  

<body>
<div>
rest of page code here
</div>
</body>

If you select the whole page and do Insert | Layout Objects | Div you will get what you want.  DW will prompt for a CSS class or ID.  Create a new ID named "container" and give it the following CSS properties:

width: 1024
height: 768
margin: auto

That will center it left/right at those dimension.  Give me a couple of minutes to research vertical centering.
0
 
Jason C. LevineNo oneCommented:
To add vertical centering, try this addition to the #container div:

position:absolute;
top:50%;
margin-top:-384px;

So the overall CSS for the container should be:

width: 1024px
height: 768px
margin-left: auto
margin-right: auto
margin-top: -384px
position: absolute
top: 50%
0
 
crp0499Author Commented:
works perfectly.  thank you.  :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now