2009-06-11 4 views
0

Ich habe eine MasterPage, die zwei Spaltenlayout ist, linke Spalte Menü, rechte Spalte Inhalt. Die ganze Seite ist XHTML/Divs/CSS Layout. Also sind die Spalten Divs mit CSS, um sie zu skalieren.Temporäre Überschreibung Thema CSS in ASP.NET

Für eine Seite, eine Rasterseite, möchte ich nur eine Spalte (die Inhaltsspalte) 100% Breite für maximale Sichtfläche.

Wie kann ich dieselbe Hauptseite und dasselbe Thema auf dieser Ausnahmeseite verwenden?

Erstellen einer ganz neuen Masterpage und Hinzufügen einer neuen CSS-Eigenschaft zum Thema nur für diese eine Seite scheint wie Overkill. Gibt es eine Möglichkeit, die CSS-width -Eigenschaft des Inhaltsbereichs auf dieser Seite zu überschreiben? Ich bin kein Experte für CSS, aber ich dachte, es gibt einen Weg, dies zu tun.

Ich habe einige Vorbehalte dagegen, die Clientseite dazu zu bringen, zu übersteuern; aus Kompatibilitätsgründen. Ich würde eine serverseitige Überschreibung bevorzugen.

Irgendwelche Vorschläge?

+0

ich glaube, die Art und Weise diese schmerzlos zu lösen, ist eine andere Inhaltsbereich hinzufügen, dass fungiert als eine Spalte. Dieses div kann den Stil haben, der 100% Breite hat. Ich poste mit Ergebnissen. – Fireworks

Antwort

0

Arbeitete wie ein Charme. Die Lösung besteht darin, der Masterpage eine weitere Region mit einem neuen div hinzuzufügen, dem die 100% -Breite CSS zugewiesen ist. Erstellen Sie auch einen neuen Stileintrag in Ihrer CSS-Datei. Platzieren Sie auf der Inhaltsseite den Inhalt, dessen Breite 100% betragen soll, in der Region, die den Stil für 100% aufweist und nicht in dem Bereich, der dem zweispaltigen Layout entspricht.

Danach ist es nur eine Frage, die Inhaltsseite zu setzen, um entweder den Masterpage-Inhalt des Inhalts der Inhaltsseite zu verwenden.

Masterpage:

<!-- start page --> 
<div id="page"> 
    <!-- start content --> 
    <div id="contentOneColumn" > 
     <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server"> 
     <!-- content that needs 100% width, one column --> 
    </asp:ContentPlaceHolder> 
    </div>  
    <div id="content" > 
     <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server"> 
     <!-- content that works with two column --> 
     </asp:ContentPlaceHolder> 

CSS:

/* Content */ 

content { 
    float: right; 
    width: 600px; 
} 

/* ContentOneColumn */ 
contentOneColumn { 
    float:none; 
    width: 850px; 
} 
0

Sie können etwas ähnliches verwenden:

#content { 
    /* Some styles */ 
    width: 100% !important; 
} 
+0

Ich nehme an, dass Sie so auf dem Client überschreiben? – Fireworks

1

jede Seite Geben Sie eine eindeutige CSS-Klasse in Code, und diese Klasse in Ihrem CSS Ziel. Hier ist eine dumme-einfache Art und Weise zu erreichen:

Ihre eigene Masterpage-Klasse erstellen:

class MyMasterPage : MasterPage 
{ 
    public string BodyClass {get;set;} 
} 

in Ihrer Master-Seite:

<%@ Master Inherits="MyNamespace.MyMasterPage" %> 
... 
<body class="<% =this.BodyClass %>"> 
    <asp:ContentPlaceHolder ... /> 
</body> 
... 

Und in dem Code-Behind Ihrer Seite:

void Page_Load(object sender, EventArgs e) 
{ 
    ((MyMasterPage)Master).BodyClass = "specialpage"; 
} 

Und in Ihrer CSS-Klasse:

.specialpage .mainColumn {width:100%;} 
.specialpage .otherColumn {display:none;} 
+0

Interessant. Allerdings müsste ich alle Seiten ändern, um eine Ausnahme zu berücksichtigen. Ich habe keine Anforderungen über diese Seite hinaus, um einen anderen Stil für ein geteiltes div basierend auf der Seite anzuwenden.Hat mir aber eine Idee gegeben. – Fireworks

0

Verwenden OnPreRenderComplete Ereignis, wie folgt aus:

protected override void OnPreRenderComplete(EventArgs e) 
    { 
     base.OnPreRenderComplete(e); 
     rfv_login.CssClass = "ValidatorReset"; 
     rfv_pwd.CssClass = "ValidatorReset"; 
    }