[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Center aspx wepage for all screen resolutions

Posted on 2007-10-13
17
Medium Priority
?
341 Views
Last Modified: 2008-01-09
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)
    {

    }
}
----------------------------------------------------------------------------------------------------------------------
0
Comment
Question by:cbrick04
  • 9
  • 5
  • 3
17 Comments
 
LVL 16

Expert Comment

by:gnoon
ID: 20072691
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>
0
 
LVL 16

Expert Comment

by:gnoon
ID: 20072693
typos, I want to said alignment, not width .. sorry
0
 

Author Comment

by:cbrick04
ID: 20072698
 <div align=center>
doesnt change anything
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:cbrick04
ID: 20072703
I think maybe because the panels are positioned absolutly
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 20073023
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>
0
 

Author Comment

by:cbrick04
ID: 20073138
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?
0
 

Author Comment

by:cbrick04
ID: 20073176
Or is there a way that I can force the resolution for the page to 800x600 regaurdless what the users screen resoultion is?
0
 
LVL 16

Expert Comment

by:gnoon
ID: 20073714
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
0
 

Author Comment

by:cbrick04
ID: 20074676
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?
0
 

Author Comment

by:cbrick04
ID: 20074933
If I just put everything in a table can I just change the left margin depending on the resolution?
0
 

Author Comment

by:cbrick04
ID: 20074964
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?
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 20075046
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
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 20075056
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.
0
 

Author Comment

by:cbrick04
ID: 20075461
Can you tell me more about how to use a wrapper?
0
 
LVL 12

Accepted Solution

by:
UnexplainedWays earned 2000 total points
ID: 20075528
<html>
<body style=" height:100%;">

<div style="text-align:center; background:blue; height:100%;">
    <div style="width:500px; background:yellow;text-align:left; height:100%;">
       
        <div style="top:100px; left:100px; position:relative;">Offset from parent</div>
    </div>
</div>

</body>
</html>
0
 

Author Comment

by:cbrick04
ID: 20076026
Looks like this may work for me, can you explain to me what you did and how it works?
0
 
LVL 12

Expert Comment

by:UnexplainedWays
ID: 20076046
<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.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses
Course of the Month20 days, 6 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question