Css Sharepoint 2007自定义页面布局样式

我在为SP 2007制作自定义页面布局时遇到问题

我的意思是，这是一种工作，但编辑时看起来很糟糕：

让我们看看它在编辑时的样子：

我就是这样设计的：

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<WebPartPages:spproxywebpartmanager runat="server" id="ProxyWebPartManager"></WebPartPages:SPProxyWebPartManager>

    <div class="whole-page">
        <div class="page-top">
            <WebPartPages:webpartzone id="g_DD13C117556E4E43B71BB0E43AB15232" runat="server" title="Zone 1"><ZoneTemplate></ZoneTemplate></WebPartPages:webpartzone>    
        </div>
            <div class="page-left">
                <PublishingWebControls:richhtmlfield FieldName="Content" runat="server"></PublishingWebControls:RichHtmlField>
            </div>
            <div class="page-right">
                <WebPartPages:webpartzone id="g_AF32EC71B40C4C819A9366ECF7CDAAD5" runat="server" title="Zone 2"><ZoneTemplate></ZoneTemplate></WebPartPages:webpartzone>
            </div>
        <div class="page-bottom">
            <WebPartPages:webpartzone id="g_ACF726E3F25544FBBCAA9EC4B66843AF" runat="server" title="Zone 3"><ZoneTemplate></ZoneTemplate></WebPartPages:webpartzone>
        </div>
    </div>

</asp:Content>

你们能告诉我为什么在编辑页面上看起来这么糟糕吗

顺便说一句，以下是SP给我的输出：

<div class="whole-page" style="
">
    <div class="page-top">
        <div width="100%"><div align="center"> <nobr class="ms-SPZoneLabel">Zone 1</nobr></div><div class="ms-SPZone"><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <td><table onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_DD13C117556E4E43B71BB0E43AB15232$ctl00,'Zone\u0025201','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');" onmouseover="this.className='ms-SPButton ms-WPAddButton ms-WPAddButtonHover';" onmouseout="this.className='ms-SPButton ms-WPAddButton';" class="ms-SPButton ms-WPAddButton" title="Add a Web Part (opens in new window)" cellspacing="0" cellpadding="0" style="width:100%;">
            <tbody><tr>
                <td><a href="#" title="Add a Web Part (opens in new window)" onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_DD13C117556E4E43B71BB0E43AB15232$ctl00,'Zone\u0025201','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');;event.cancelBubble=true;" style="text-decoration:none;"><nobr><img align="middle" border="0" alt="Add a Web Part (opens in new window)" src="/_layouts/images/wpqaicon.gif">&nbsp;<span>Add a Web Part</span></nobr></a></td>
            </tr>
        </tbody></table></td>
    </tr><tr>

    </tr>
</tbody></table></div></div>    
    </div>
        <div class="page-left">
            <div id="ctl00_PlaceHolderMain_ctl00__ControlWrapper_RichHtmlField" style="display:inline"><div align="left" class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer" nowrap="nowrap"><span class="ms-formfieldlabel" nowrap="nowrap">Content</span></div><div class="ms-formfieldvaluecontainer"><span dir="none">
        <span id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_container" name="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_container" controltype="HtmlEditor" style="width:99.8%">
<input type="hidden" id="ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField" name="ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField" value="">
<input type="hidden" id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_hiddenDisplay" name="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_hiddenDisplay" value="">
<span id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField" title="Content"><div class="ms-toolbarContainer" width="100%"><div width="100%"><div class="ms-toolbarItem ms-selectorlink"><a href="#" onclick="var params=new Array(); params[params.length] = new Array('ValidationContext', 'FONTS=true\u0026REUSABLECONTENT=true\u0026HEADINGS=true\u0026HYPERLINKS=true\u0026IMAGES=true\u0026LISTS=true\u0026TABLES=true\u0026TEXTMARKUP=true\u0026ISREQUIRED=false\u0026RESTRICTURLSTOSITECOLLECTION=false\u0026'); params[params.length] = new Array('CurrentWebBaseUrl', '\u002fsites\u002fhlt'); params[params.length] = new Array('DefaultAssetLocation', ''); params[params.length] = new Array('DefaultAssetImageLocation', ''); params[params.length] = new Array('AllowHtmlSourceEditing', 'True'); params[params.length] = new Array('EnableExtensions', 'True'); params[params.length] = new Array('EditorBackgroundColor', ''); params[params.length] = new Array('DisableCustomStyles', 'False'); params[params.length] = new Array('DisableBasicFormattingButtons', 'False'); params[params.length] = new Array('PrefixStyleSheet', 'ms-rte'); RTE2_LaunchEditor(params, 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel', 'ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField', encodeURI('\u002fsites\u002fhlt'), 'False');if (window.event) { window.event.returnValue = false; window.event.cancelBubble = true; } return false;" tabindex="-1" id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField____EditHtml" selectorid="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField"><img alt="Edit Content" src="/_layouts/images/RTE2EDIT.GIF" border="0"></a><a href="#" onclick="var params=new Array(); params[params.length] = new Array('ValidationContext', 'FONTS=true\u0026REUSABLECONTENT=true\u0026HEADINGS=true\u0026HYPERLINKS=true\u0026IMAGES=true\u0026LISTS=true\u0026TABLES=true\u0026TEXTMARKUP=true\u0026ISREQUIRED=false\u0026RESTRICTURLSTOSITECOLLECTION=false\u0026'); params[params.length] = new Array('CurrentWebBaseUrl', '\u002fsites\u002fhlt'); params[params.length] = new Array('DefaultAssetLocation', ''); params[params.length] = new Array('DefaultAssetImageLocation', ''); params[params.length] = new Array('AllowHtmlSourceEditing', 'True'); params[params.length] = new Array('EnableExtensions', 'True'); params[params.length] = new Array('EditorBackgroundColor', ''); params[params.length] = new Array('DisableCustomStyles', 'False'); params[params.length] = new Array('DisableBasicFormattingButtons', 'False'); params[params.length] = new Array('PrefixStyleSheet', 'ms-rte'); RTE2_LaunchEditor(params, 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel', 'ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField', encodeURI('\u002fsites\u002fhlt'), 'False');if (window.event) { window.event.returnValue = false; window.event.cancelBubble = true; } return false;" title="Edit Content" id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField____EditHtml_LINK" selectorid="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField">Edit Content</a></div></div><div style="display: none" nowrap="nowrap" class="ms-consolestatus" width="100%"></div></div><span id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel" style="display:none;" onclick="if (!window.event || !window.event.ctrlKey) {var params=new Array(); params[params.length] = new Array('ValidationContext', 'FONTS=true\u0026REUSABLECONTENT=true\u0026HEADINGS=true\u0026HYPERLINKS=true\u0026IMAGES=true\u0026LISTS=true\u0026TABLES=true\u0026TEXTMARKUP=true\u0026ISREQUIRED=false\u0026RESTRICTURLSTOSITECOLLECTION=false\u0026'); params[params.length] = new Array('CurrentWebBaseUrl', '\u002fsites\u002fhlt'); params[params.length] = new Array('DefaultAssetLocation', ''); params[params.length] = new Array('DefaultAssetImageLocation', ''); params[params.length] = new Array('AllowHtmlSourceEditing', 'True'); params[params.length] = new Array('EnableExtensions', 'True'); params[params.length] = new Array('EditorBackgroundColor', ''); params[params.length] = new Array('DisableCustomStyles', 'False'); params[params.length] = new Array('DisableBasicFormattingButtons', 'False'); params[params.length] = new Array('PrefixStyleSheet', 'ms-rte'); RTE2_LaunchEditor(params, 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel', 'ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField', encodeURI('\u002fsites\u002fhlt'), 'False');} else { if (window.event.srcElement.href) window.open(window.event.srcElement.href ,'_blank'); }if (window.event) { window.event.returnValue = false; window.event.cancelBubble = true; } return false;" onkeydown="var params=new Array(); params[params.length] = new Array('ValidationContext', 'FONTS=true\u0026REUSABLECONTENT=true\u0026HEADINGS=true\u0026HYPERLINKS=true\u0026IMAGES=true\u0026LISTS=true\u0026TABLES=true\u0026TEXTMARKUP=true\u0026ISREQUIRED=false\u0026RESTRICTURLSTOSITECOLLECTION=false\u0026'); params[params.length] = new Array('CurrentWebBaseUrl', '\u002fsites\u002fhlt'); params[params.length] = new Array('DefaultAssetLocation', ''); params[params.length] = new Array('DefaultAssetImageLocation', ''); params[params.length] = new Array('AllowHtmlSourceEditing', 'True'); params[params.length] = new Array('EnableExtensions', 'True'); params[params.length] = new Array('EditorBackgroundColor', ''); params[params.length] = new Array('DisableCustomStyles', 'False'); params[params.length] = new Array('DisableBasicFormattingButtons', 'False'); params[params.length] = new Array('PrefixStyleSheet', 'ms-rte'); RTE2_LaunchEditor(params, 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel', 'ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField', encodeURI('\u002fsites\u002fhlt'), 'False');" ondragenter="this.onclick()" oncontrolselect="this.onclick()"><!--DisplayHtmlLiteral-->
<div id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_displayContent" style="padding: 8px;width:100%"></div>
<!--/DisplayHtmlLiteral-->
</span><span id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel" style="display:inline;cursor:hand;" onclick="var params=new Array(); params[params.length] = new Array('ValidationContext', 'FONTS=true\u0026REUSABLECONTENT=true\u0026HEADINGS=true\u0026HYPERLINKS=true\u0026IMAGES=true\u0026LISTS=true\u0026TABLES=true\u0026TEXTMARKUP=true\u0026ISREQUIRED=false\u0026RESTRICTURLSTOSITECOLLECTION=false\u0026'); params[params.length] = new Array('CurrentWebBaseUrl', '\u002fsites\u002fhlt'); params[params.length] = new Array('DefaultAssetLocation', ''); params[params.length] = new Array('DefaultAssetImageLocation', ''); params[params.length] = new Array('AllowHtmlSourceEditing', 'True'); params[params.length] = new Array('EnableExtensions', 'True'); params[params.length] = new Array('EditorBackgroundColor', ''); params[params.length] = new Array('DisableCustomStyles', 'False'); params[params.length] = new Array('DisableBasicFormattingButtons', 'False'); params[params.length] = new Array('PrefixStyleSheet', 'ms-rte'); RTE2_LaunchEditor(params, 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_DisplayHtmlPanel', 'ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField_EmptyHtmlPanel', 'ctl00$PlaceHolderMain$ctl00$ctl00$RichHtmlField', encodeURI('\u002fsites\u002fhlt'), 'False');" ondragenter="this.onclick()" onkeydown="this.onclick()"><!--EmptyPanelHtmlLiteral-->
<div class="ms-selectorlink" align="center" valign="center" style="padding: 8px">
   <a href="#" title="Open a new window to edit the content" id="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField____AddContentPromptLink" selectorid="ctl00_PlaceHolderMain_ctl00_ctl00_RichHtmlField" class="ms-toolbar ms-selectorlink">           Click here to add new content   </a></div><!--EmptyPanelHtmlLiteral-->
</span></span></span>

    </span></div></div></div>
        </div>
        <div class="page-right">
            <div width="100%"><div align="center"> <nobr class="ms-SPZoneLabel">Zone 2</nobr></div><div class="ms-SPZone"><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <td><table onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_AF32EC71B40C4C819A9366ECF7CDAAD5$ctl00,'Zone\u0025202','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');" onmouseover="this.className='ms-SPButton ms-WPAddButton ms-WPAddButtonHover';" onmouseout="this.className='ms-SPButton ms-WPAddButton';" class="ms-SPButton ms-WPAddButton" title="Add a Web Part (opens in new window)" cellspacing="0" cellpadding="0" style="width:100%;">
            <tbody><tr>
                <td><a href="#" title="Add a Web Part (opens in new window)" onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_AF32EC71B40C4C819A9366ECF7CDAAD5$ctl00,'Zone\u0025202','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');;event.cancelBubble=true;" style="text-decoration:none;"><nobr><img align="middle" border="0" alt="Add a Web Part (opens in new window)" src="/_layouts/images/wpqaicon.gif">&nbsp;<span>Add a Web Part</span></nobr></a></td>
            </tr>
        </tbody></table></td>
    </tr><tr>

    </tr>
</tbody></table></div></div>
        </div>
    <div class="page-bottom" style="
">
        <div width="100%" style="
"><div align="center"> <nobr class="ms-SPZoneLabel">Zone 3</nobr></div><div class="ms-SPZone"><table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tbody><tr>
        <td><table onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_ACF726E3F25544FBBCAA9EC4B66843AF$ctl00,'Zone\u0025203','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');" onmouseover="this.className='ms-SPButton ms-WPAddButton ms-WPAddButtonHover';" onmouseout="this.className='ms-SPButton ms-WPAddButton';" class="ms-SPButton ms-WPAddButton" title="Add a Web Part (opens in new window)" cellspacing="0" cellpadding="0" style="width:100%;">
            <tbody><tr>
                <td><a href="#" title="Add a Web Part (opens in new window)" onclick="MSOLayout_ShowQuickAddDialog('53e9bd3b-2799-4804-9559-25e7638ab702','7c05cbae-f5a9-4e06-ac76-99190a4d44ca','',true,0,50,QuickAddDialogCallbackctl00$PlaceHolderMain$g_ACF726E3F25544FBBCAA9EC4B66843AF$ctl00,'Zone\u0025203','\u002fsites\u002fhlt\u002f_layouts\u002fwebpartgallerypickerpage.aspx','resizable=yes,status=no,scrollbars=no,menubar=no,directories=no,location=no,width=700px,height=700px');;event.cancelBubble=true;" style="text-decoration:none;"><nobr><img align="middle" border="0" alt="Add a Web Part (opens in new window)" src="/_layouts/images/wpqaicon.gif">&nbsp;<span>Add a Web Part</span></nobr></a></td>
            </tr>
        </tbody></table></td>
    </tr><tr>

    </tr>
</tbody></table></div></div>
    </div>

找到了一个解决方案：

.whole-page .page-bottom
{
    clear: both;
}

.whole-page .page-bottom
{
    clear: both;
}