Centered page template screws up the designer.

Posted by Community Admin on 13-Sep-2012 00:00

My CSS that centers my page and sets the width also screws up the backend designer. Help!

Here's the CSS:

html,

body

margin: 0;

padding: 0;

height: 100%;

background-color: silver;

font-size: 90%; /* default 1.0em = 16px, so 62.5% of 16 = 10. Therefore, 1.0em now = 10px, 1.2em now = 12px etc. */

font-family: Verdana, Arial, "Lucida Grande", sans-serif;

min-width:999px;

form#pageForm

min-height: 100%;

margin-left: auto;

margin-right: auto;

width:1000px;

position: relative;

background-color: white;

#header

background: #ff0;

padding: 10px;

background: url(/styles/olympia/header.png) no-repeat;

#header-right

float:right;

#body

margin-left: 173px;

padding-bottom: 30px; /* Height of the footer */

#content

padding:10px;

#footer

position: absolute;

bottom: 0;

width: 100%;

height: 30px; /* Height of the footer */

text-align:center;

#footer ul

margin: 0;

padding: 0;

font-size: 0.8em;

color: #999;

white-space: nowrap;

#footer li

list-style-type: none;

color: #999;

display: inline;

vertical-align: middle;

#footer img

border:none;

#footer li a

text-decoration: none;

#footer li a:hover

text-decoration: underline;

#left-column

height: 300px;

float: left;

position: absolute;

left: 0;

top: 0;

#left-column-content

position:relative;

width:143px;

float:left;

padding-left:20px;

padding-right:10px;

padding-top:10px;

padding-bottom:10px;

border-right:1px solid silver;

#breadcrumbs

background: url(/styles/olympia/nav-background.png) no-repeat;

background-color: yellow;

line-height: 30px;

height: 33px;

padding-left: 50px;

And the master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="olympia.master.cs" Inherits="KeilWeb.App_Master.Olympia" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="/Styles/olympia/olympia.css" rel="stylesheet" />

</head>

<body>

<form id="pageForm" class="container" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div id="body">

<div id="left-column">

<img src="/styles/olympia/layout_logo.png" style="display: block;" />

<div id="left-column-content">

<asp:ContentPlaceHolder ID="leftColumnContent" runat="server" />

</div>

<div id="header">

<asp:ContentPlaceHolder ID="headerLeft" runat="server"></asp:ContentPlaceHolder>

<div id="header-right">

<asp:ContentPlaceHolder ID="headerRight" runat="server"></asp:ContentPlaceHolder>

</div>

<div id="breadcrumbs">

<asp:ContentPlaceHolder ID="breadcrumbBar" runat="server"/>

</div>

<div id="content">

<asp:ContentPlaceHolder ID="contentArea" runat="server">

</asp:ContentPlaceHolder>

</div>

<div id="footer">

<ul>

<li><a href="/about">About Keil</a></li>

<li> | <a href="/site_map">Site Map</a></li>

<li> | <a href="/news_and_events">Press</a></li>

<li> | <a href="/about/privacy_statement">Privacy</a></li>

<li> | <a href="/about/terms_conditions">Terms & Conditions</a></li>

<li> | <a href="/about/sales_support">Sales & Support</a></li>

<img src="/styles/olympia/arm_text_page_footer.png" alt="ARM"></a></li>

</ul>

</div>

</form>

</body>

</html>

Screenshot atached.

Posted by Community Admin on 17-Sep-2012 00:00

Dave,

You could either add some specificity to the CSS so that it doesn't target the page editor or create a new css file to fix the issues caused by the theme. To load a page in the editor, you could do something like this in Page_Load:

if (this.IsDesignMode())

HtmlLink css = new HtmlLink();

css.Href = "/Sitefinity/WebsiteTemplates/Custom/App_Themes/Custom/CSS/DesignView.css";

css.Attributes["rel"] = "stylesheet";

css.Attributes["type"] = "text/css";

css.Attributes["media"] = "all";

Page.Header.Controls.Add(css);

Posted by Community Admin on 17-Sep-2012 00:00

Ah - hadn't thought of that! Thanks!

Posted by Community Admin on 17-Sep-2012 00:00

No problem!

If you get a second, could you mark my post as helpful?

This thread is closed

All Replies