Link to home
Start Free TrialLog in
Avatar of cbrick04
cbrick04

asked on

Center aspx wepage for all screen resolutions

I have an aspx site with C# code behind created with VWD 2005. I've spent alot of time reading through questions from others trying to figure out how to center the pages with screen resolution changes with no solution. I have created a test site with a master page, and a default page, the panels are set to fit a 800x600 screen. I would like to center all of the content for all pages by changing code im my masterpage file. Can this be done and how? Here is the code from the master and default pages :

The Master page:
----------------------------------------------------------------------------------------------------------------
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body bgcolor="#ff3344">
    <form id="form1" runat="server">
    <div>
   
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
        <asp:Panel ID="Panel1" runat="server" BackColor="Lime" Height="124px" Style="z-index: 100;
            left: 0px; position: absolute; top: 0px" Width="779px">
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" BackColor="#FFFF80" Height="800px" Style="z-index: 102;
            left: -3px; position: absolute; top: 122px" Width="125px">
        </asp:Panel>
    </div>
    </form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------
the .cs file:
----------------------------------------------------------------------------------------------------------------------------
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}
-------------------------------------------------------------------------------------------------------------------
The default page :
-------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Panel ID="Panel1" runat="server" Height="800px" Style="z-index: 100; left: 122px;
        position: absolute; top: 123px" Width="659px" BackColor="#8080FF">
        &nbsp;</asp:Panel>
</asp:Content>
----------------------------------------------------------------------------------------------------------------------
The .cs file :
----------------------------------------------------------------------------------------------------------------------
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}
----------------------------------------------------------------------------------------------------------------------
Avatar of gnoon
gnoon
Flag of Thailand image

I not sure this can solve, but please try to specify width of div

    <div align=center>
   
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
        <asp:Panel ID="Panel1" runat="server" BackColor="Lime" Height="124px" Style="z-index: 100;
            left: 0px; position: absolute; top: 0px" Width="779px">
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" BackColor="#FFFF80" Height="800px" Style="z-index: 102;
            left: -3px; position: absolute; top: 122px" Width="125px">
        </asp:Panel>
    </div>
typos, I want to said alignment, not width .. sorry
Avatar of cbrick04
cbrick04

ASKER

 <div align=center>
doesnt change anything
I think maybe because the panels are positioned absolutly
How about this?

<body>
    <form id="form1" runat="server">
        <div>
            <div style="text-align: center;">
                <div style="width: 779px">
                    <asp:Panel ID="Panel1" runat="server" BackColor="Lime" Height="124px" Style="z-index: 100;">
                        1
                    </asp:Panel>
                    <div style="width: 100%; text-align: left;">
                        <asp:Panel ID="Panel2" runat="server" BackColor="#FFFF80" Height="800px" Style="z-index: 102;
                            width: 125px">
                            2
                        </asp:Panel>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
This does work for this simple page with 2 panels, but the actual page that I intend to use it on has many panels and graphics. I'm using VWD and I really like the fact that I can absolutly position all of the panels and graphics by dragging them around the page til i like it. Is there not a way that I can just move everything together?
Or is there a way that I can force the resolution for the page to 800x600 regaurdless what the users screen resoultion is?
Choices I can thought :
- popup to user about changing resolution to 800x600 for the best view
- make those width/height as variables, then write script at the first page to get client resolution, then use it in another pages. By javascript, just using screen.width/screen.height in modern browser
- change to flowlayout so an item will wrapped next to the previous item
I think that the option I'm after is to change the flow layout, can you show me an example? I'm thinking that using the absolute positioning feature is not it my best intrest, is it at all possible to center the webpage when everything on the page is absolutly positioned?
If I just put everything in a table can I just change the left margin depending on the resolution?
Could I possibly get c# code to get the users resolution settings, then I could put all of my content into a table, then assign the left margin as a variable and change it depending on the users settings? Then I could still absolutly position everything within the table, and the table itself. This seems like it should be a vey simple problem to solve, I obviously dont understand alot. Is using the absolute position feature a bad thing?
If you go down the position absloute path your in for a world of pain if you try to center it.  It's what it say "absloute".

If you looking to continue to build webpages your problally best of not using absloute for general development (there are cases when you need to and it works well then).
You'll be teaching yourself bad habits.

If you must use the position, why not try have a wrapper to a certan width and then everything inside that uses position:relative
http://www.w3schools.com/css/pr_class_position.asp
Also, if you want to see a good working example, the page you are looking at right now is somewhere to start.

Something that you might want to do is download firefox (you should have it to test different browsers anyway) and then install firebug.  It's one of the best web development tools you can find (and its free).

THen click the [inspect] button and you can see how they made this page and all the css involved.
Can you tell me more about how to use a wrapper?
ASKER CERTIFIED SOLUTION
Avatar of UnexplainedWays
UnexplainedWays

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Looks like this may work for me, can you explain to me what you did and how it works?
<div >this is the outer wrapper, stretches the whole page and centers everythign in it.
    <div this is your main panel.  it will be centered and is a fixed with>
           <div this is an element of the site></div>
    </div>
</div>

This is not the way i make webpages, i'd advice against it and go down the normal path.  Untill you get to the "Offset from parent", that code is fine, when you get to relative, then if you want to move something, then you have to go and update numbers all over the shop.