CSS à effet partiel

**Samy010976** · 09/04/2009, 16h41

Bonjour à tous,
Informations utiles
- VS 2008 Professional Edition
- Framework 3.5
- Firefox 3 et/ou Internet Explorer
- Langage C#
Problèmes rencontrés
Mon CSS ne s'applique pas à tous les contrôles (div, image de fond, asp:Button, ...) lorsque je fais un Browse de la page dans un navigateur (Firefox et/ou Internet Explorer)
En mode Design sous VS 2008, le css est bien appliqué sur tous mes contrôles, la présentation de la page est telle que décrite dans le CSS (div entête, div centrale divisée en div gauche et div droite, div pied) MAIS lorsque je regarde la page dans un navigateur, seule la présentation de la page est correcte, par contre les contrôles sont devenus invisibles dans le div entête.
MERCI A VOUS DÉJÀ POUR VOS SUGGESTIONS ET CONSEILS.
Code du CSS

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
body{
	font-family: calibri, Arial;
}
#d_Conteneur{
	width: 100%; 
	height: 100%; 
	margin-left: 5px; 
	margin-right: 5px;
}
#d_Entete{
	width: 100%; 
	margin-top: 0px; 
	margin-left: 0px; 
	margin-right: 0px;
}
#Ent_MenuNiv1{
	width: 100%; 
	float: left; 
	height: 24px; 
	background-image: url(/img/INF_Haut.png); 
	background-repeat: repeat-x; 
	font-size: 14px;
}
.asp1_Button{
	background-color:Transparent;
	border-width:0px; 
	font-family:Calibri;
	color:White;
	width:150px;
}
#Ent_MenuNiv2{
	width: 100%; 
	float: left; 
	font-size: 13px; 
	background-image: url(/img/INF_Rempl.png); 
	background-repeat: repeat-x; 
	height: auto;
}
.asp2_Button{
	background-color:Transparent;
	border-width:0px; 
	font-family:Calibri;
	color:Black;
	width:150px;
}
#Ent_MenuNiv3{
	background-image: url(/img/INF_Rempl.png); 
	background-repeat: repeat-x; 
	font-size: 12px; 
	font-family: Calibri; 
	float: left; 
	width: 100%; 
	height: auto;
}
.asp3_Button{
	background-color:Transparent;
	border-width:0px; 
	font-family:Calibri;
	color:Black;
	width:100px;
}
#Cen_Gauche{
	border: 1px ridge #C0C0C0; 
	background-color: #FFFFFF; 
	width: 79%; 
	float: left; 
	margin: 10px 0px 10px 0px;
}
#Cen_Droite{
	background-color: #B8B8B8; 
	width: 20%; 
	float: right; 
	margin: 10px 0px 10px 0px
}
#d_Pied{
	clear: both; 
	margin-top: 10px; 
	padding-top: 5px; 
	font-family: calibri; 
	font-size: 11px;
}
#Pie_Titre{
	 float: left; 
	 border-width: 1px; 
	 margin: 0px; 
	 background-image: url(/img/INF_Rempl.png); 
	 background-repeat: repeat-x; 
	 text-transform: uppercase;
}
#Pie_Detail{
	border: 1px solid #B8B8B8; 
	float: left; 
	padding-top: 3px; 
	padding-right: 10px; 
	margin: 0px; 
	background-image: url(/img/INF_Rempl.png); 
	background-repeat: repeat-x; 
	width: 100%; 
	height: 20px;
}

Code du MasterPage

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<%@ 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">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head id="Head1" runat="server">
		<title>Logiciel de gestion ...</title>
        <link href="css/moncss.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<form id="form1" runat="server">
		    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager_Ajax" />
            <div id="d_Conteneur">
				<div id="d_Entete">
					<div id="Ent_MenuNiv1"> 
					    <asp:Button ID="Mn1_01" runat="server" CssClass="asp1_Button" Visible="true" OnClick="Clk_Mn101" Text="Dossier PERMANENT" ToolTip="Dossier PERMANENT"/>
					    <asp:Button ID="Mn1_02" runat="server" CssClass="asp1_Button" OnClick="Clk_Mn102" Text="Dossier ANNUEL"/>
					    <asp:Button ID="Mn1_03" runat="server" CssClass="asp1_Button" OnClick="Clk_Mn103" Text="UTILITAIRES"/>
					</div>
                    <div id="Ent_MenuNiv2">
                        <asp:UpdatePanel ID="Upanel_MenuNiv2" runat="server">
                            <ContentTemplate>
				                <asp:Button ID="Mn2_01" runat="server" CssClass="asp2_Button" Visible="false" Text="Comptabilité"/>
				                <asp:Button ID="Mn2_02" runat="server" CssClass="asp2_Button" Visible="false" Text="Fiscalité"/>
				                <asp:Button ID="Mn2_03" runat="server" CssClass="asp2_Button" Visible="false" Text="Social"/>
				                <asp:Button ID="Mn2_04" runat="server" CssClass="asp2_Button" Visible="false" Text="Juridique"/>
					        </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                    <div id="Ent_MenuNiv3">
					    <asp:UpdatePanel ID="Upanel_MenuNiv3" runat="server">
                            <ContentTemplate>
					                <asp:Button ID="Mn3_01" runat="server" CssClass="asp3_Button" Text="TVA"/>
					                <asp:Button ID="Mn3_02" runat="server" CssClass="asp3_Button" Text="TP"/>
					                <asp:Button ID="Mn3_03" runat="server" CssClass="asp3_Button" Text="IS"/>
					                <asp:Button ID="Mn3_04" runat="server" CssClass="asp3_Button" Text="ORGANIC"/>
					                <asp:Button ID="Mn3_05" runat="server" CssClass="asp3_Button" Text="TA"/>
					                <asp:Button ID="Mn3_06" runat="server" CssClass="asp3_Button" Text="FPC"/>
					                <asp:Button ID="Mn3_07" runat="server" CssClass="asp3_Button" Text="TVS"/>
					                <asp:Button ID="Mn3_08" runat="server" CssClass="asp3_Button" Text="LIASSE FISCALE"/>
					        </ContentTemplate>		
					    </asp:UpdatePanel>
                    </div>
				</div>
			    <div id="d_Centre">
			        <div id="Cen_Gauche">
                        <asp:ContentPlaceHolder id="CPH_Page" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>                            
                    <div id="Cen_Droite">
                        <div id="CenDroi_Haut" style="float: none; height: 70%; background-color: #CECED0; border-width: 1px; font-family: Calibri; font-size: 12px;">
                            <asp:UpdatePanel ID="lst_Taches" runat="server">
                                <ContentTemplate>
                                <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
                                            HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                                            ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" 
                                            TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
                                           <Panes>
                                            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                                                <Header><a href="">1. Accordion</a></Header>
                                                <Content>
                                                    The Accordion is a web control that allows you to provide multiple panes and display them one at a time.
                                                    It is like having several
                                                </Content>
                                            </ajaxToolkit:AccordionPane>
                                            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                                                <Header><a href="">2. AutoSize</a></Header>
                                                <Content>
                                                    <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
                                                    <ul>
                                                        <li><b>None</b> - The Accordion grows/shrinks without restriction.  This can cause other elements
                                                            on your page to move up and down with it.</li>
                                                        <li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height
                                                            property.  This will cause the content to scroll if it is too large to be displayed.</li>
                                                        <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property.  This
                                                            will cause the content to be expanded or shrunk if it isn't the right size.</li>
                                                    </ul>
 
                                                </Content>
                                            </ajaxToolkit:AccordionPane>
                                            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                                                <Header><a href="">3. Control or Extender</a></Header>
                                                <Content>
                                                    The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit.
                                                    The extender expects its input in a very specific hierarchy of container elements (like divs), so
                                                    the Accordion and AccordionPane web controls are used to generate the expected input for the extender.
                                                    The extender can also be used on its own if you provide it appropriate input.
                                                </Content>
                                            </ajaxToolkit:AccordionPane>
                                            <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                                                <Header><a href="">4. What is ASP.NET AJAX?</a></Header>
                                                <Content>
                                                    contenu de la partie 4 : tâche 4
                                                </Content>
                                            </ajaxToolkit:AccordionPane>
                                            </Panes>
                                        </ajaxToolkit:Accordion>
                                    </ContentTemplate>
                            </asp:UpdatePanel>
                        </div>
                        <div id="CenDroi_Bas" style="float: none; background-color: #CECED0; height: 30%; border-width: 1px">
                            <asp:Calendar ID="Calendar1" runat="server" BackColor="White" 
                                        BorderColor="#3366CC" BorderWidth="1px" CellPadding="0" 
                                        DayNameFormat="Shortest" Font-Names="Calibri" Font-Size="8pt" 
                                        ForeColor="#003399" Height="20%" Width="100%">
                                <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                                <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                                <WeekendDayStyle BackColor="#CCCCFF" />
                                <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
                                <OtherMonthDayStyle ForeColor="#999999" />
                                <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                                <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                                <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" 
                                            Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
                            </asp:Calendar>
                        </div>            
                    </div>
                </div>
                <div id="d_Pied">
			        <div id="Pie_Titre">Aide permanente</div>
			        <div id="Pie_Detail">
			            <asp:ContentPlaceHolder id="CPH_AidePerm" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>
		</form>
	</body>
</html>

CSS à effet partiel

CSS

Mode arborescent

Discussions similaires

Partager

Partager