css avec master page ou fichier .ascx

**paladice** · 21/06/2013, 09h51

Bonjour à tous,

je suis en stage et je dois modifier une application web faite avec ASP.NET. J'essaie de modifier l'apparence de la master page déjà en place.

Voici un exemple de ce qui est en place :

LE FICHIER ASPX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Login.aspx.cs" Inherits="Methodes.Account.Login" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent">    
 
    <%= Bundle.JavaScript()
        .Add("Login.aspx.js")
        .ForceRelease()
        .Render(RootRelativePath + "Resources/login_#.js")%>
 
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="BodyContent">    
 
    <asp:Login ID="LoginUser" runat="server" EnableViewState="true" RenderOuterTable="false" RememberMeSet="false" DisplayRememberMe="false"  DestinationPageUrl="~/Default.aspx"  >
 
        [...]
 
    </asp:Login>  
 
</asp:Content>

Il y a aussi le Site.Master :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Methodes.SiteMaster" %>
 
<%@ Register TagPrefix="ucf" TagName="Header" Src="~/UC/Header.ascx" %>
<%@ Import Namespace="SquishIt.Framework" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>    
    <link href="~/Styles/redmond/jquery-ui-1.8.16.20111107.css" rel="stylesheet" type="text/css" />
    <%= Bundle.Css()        
        .Add("~/Styles/Site.css")
        .ForceRelease()
        .Render("~/Resources/master_#.css")%>
 
    <script src="<%=RootRelativePath%>Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>        
    <script src="<%=RootRelativePath%>Scripts/json2.js" type="text/javascript"></script>        
    <script src="<%=RootRelativePath%>Scripts/jquery-ui-1.8.16.20111207.min.js" type="text/javascript"></script>
    <%= Bundle.JavaScript()
        .Add(RootRelativePath + "Scripts/jquery-ui-timepicker-addon.js")
        .Add(RootRelativePath + "Scripts/lib.localization.js")
        .Add(RootRelativePath + "Scripts/lib.spread.js")
        .Add(RootRelativePath + "Scripts/lib.session.js")
        .Add(RootRelativePath + "Scripts/Keyboard.js")
        .Add(RootRelativePath + "Scripts/message_dialogs.js")        
        .Add(RootRelativePath + "UC/Header.ascx.js")
        .ForceRelease()
        .Render(RootRelativePath + "Resources/master_#.js")%>
    <asp:ContentPlaceHolder ID="HeaderContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="page" style="width: 100%">
        <div style="height: 80px;" align="left">
            <ucf:Header ID="ucHeader" runat="server" />
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="BodyContent" runat="server" />
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>

Et un Header.acsx (c'est le fichier dont j'ai commencé à modifier le contenu parce que si j'ai bien compris, c'est celui-ci qui représente ma master page) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Header.ascx.cs" Inherits="Methodes.UC.ucFlags" %>
 
<div id="master_blocsBanniereEtCivilite">
 
    <div id="master_blocBanniere">
        <asp:Image ID="master_Banniere" runat="server" ImageUrl="~/Images/banner.jpg"/>
    </div> <!-- Fin blocBanniere -->
 
    <div id="master_blocsCivilites">
 
        <div id="master_blocLangues">
 
            <a runat="server" id="lnkMenu" class="homelink" href="../Default.aspx"><span>Menu</span></a>
            <asp:LinkButton ID="lnkFR" runat="server" CommandName="FR" OnCommand="ImageButton_Command" OnClientClick="return setLanguage('FR')" CausesValidation="false" Text="fr"/>
                <asp:Label ID="lblFR" runat="server" Text="|"/>
            <asp:LinkButton ID="lnkEN" runat="server" CommandName="EN" OnCommand="ImageButton_Command" OnClientClick="return setLanguage('EN')" CausesValidation="false" Text="en"/>
                <asp:Label ID="lblEN" runat="server" Text="|"/>
            <asp:LinkButton ID="lnkSP" runat="server" CommandName="ES" OnCommand="ImageButton_Command" OnClientClick="return setLanguage('ES')" CausesValidation="false" Text="es"/>
                <asp:Label ID="lblSP" runat="server" Text="|"/>
            <asp:LinkButton ID="lnkPT" runat="server" CommandName="PT" OnCommand="ImageButton_Command" OnClientClick="return setLanguage('PT')" CausesValidation="false" Text="pt"/>
 
		</div>
 
		<div id="master_blocCivilite">
            <asp:Label ID="lblUser" runat="server" text="User: " />
            <asp:ImageButton ID="btn_logout" runat="server" Visible="false" CausesValidation="false" ImageUrl="~/Images/banner_exit.jpg"  OnCommand="Logout" Height="15px" />
			<asp:Label ID="lblEnviroment" runat="server"  text="Connecte sur " />   
			<asp:Label ID="lblUsine" runat="server" text="Usine: " />
            <asp:ImageButton ID="btnChangeUsine" runat="server" Visible="false" CausesValidation="false" ImageUrl="~/Images/banner_change_usine.jpg"  OnCommand="btnChangeUsine_Click" Height="20px" />
		</div>
 
    </div> <!-- Fin blocsCivilites -->
 
</div>

Ce que j'aimerais, c'est appliquer un style CSS sur cette master page. J'ai créé le fichier CSS que voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#master_blocsBanniereEtCivilite {
    position : absolute;
    left : 1%;
    width : 98%;
    height : 10%;
    background-color : lightblue;
}
 
#master_blocBanniere {
    width : 75%;
    height : 100%;
    float : left;
    background-color : lightyellow;
}
 
#master_banniere {
    width : 100%;
    height : 100%;
    background-color : lightgreen;
}
 
#master_blocsCivilites {
    width : 25%;
    height : 100%;
    float : left;
    text-align : right;
    background-color : lightcyan;
}

Mais je ne sais pas comment l'appliquer sur la page.

Un peu d'aide SVP ? Merci d'avance

**DotNetMatt** · 21/06/2013, 12h41

Le CSS s'applique au rendu de la page, chez le client, donc si tu références ton fichier dans le HEAD de la MasterPage il sera utilisable dans n'importe quel composant qui sera affiché.

**paladice** · 21/06/2013, 15h44

Merci

ça fonctionne

css avec master page ou fichier .ascx

.NET

Discussions similaires

Partager

Partager