Problème d'overflow hidden

**Moony Light** · 08/11/2007, 15h36

Je suis probablement pas dans le bon forum pour ca, mais comme le problème arrive juste sur ma page asp.net, j'ai posté ici.... si je suis pas au bonne endroit, rediriger moi svp. J'ai un code en JS pour faire défiler de bas en haut un control datalist. Pour ce faire, dans mon css, je dois mettre un overflow:hidden. Le hic c'est que sur Firefox ca marche, sur IE non, il prend pas en compte l'overflow. Le code d'origine est en html, ca marche très bien sur les 2 browsers, mais une fois mis dans ma page asp.net, IE marche pas. A titre informatif, je mets ma page asp.net:

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
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="accueilJS.aspx.vb" Inherits="accueil" title="NexSolution" %>
<%-- Add content controls here --%>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="Main">
    <div id="menu2"><br />
        <asp:Label ID="Label2" runat="server" Text="Cliquez sur les parapluies !" CssClass="textePetit"></asp:Label>
		   <script language="JavaScript" type="text/javascript">carrouselFlash();function IMG1_onclick(){}</script>
 
	</div>
	<div id="news"><br />
	<div align="center">
        <asp:Label SkinId="titre" ID="Label4" runat="server" Text="Consultez nos spéciaux CAMÉRAS"></asp:Label><br />
        <a href="javascript:window.open('alarme.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" border="0" alt="Spéciaux CAMÉRAS" onMouseOver="rolloverAlarme(alarme,imagesAlarme02)" onMouseOut="rolloverAlarme(alarme,imagesAlarme01)" onMouseDown="rolloverAlarme(alarme,imagesAlarme03)"  onMouseUp="rolloverAlarme(alarme,imagesAlarme02)" class="lien1"><img src="App_Themes/css/images/coverAlarmeUp.jpg" name="alarme" border="0" language="javascript" /></a><br />
        <br />
        <%--<asp:Label ID="Label3" runat="server" SkinID="titre" Text="Consultez nos spéciaux du mois"></asp:Label><br />
        <a href="javascript:window.open('mois.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" border="0" alt="Spéciaux du mois" onMouseOver="rolloverMois(mois,imagesMois02)" onMouseOut="rolloverMois(mois,imagesMois01)" onMouseDown="rolloverMois(mois,imagesMois03)"  onMouseUp="rolloverMois(mois,imagesMois02)" class="lien1"><img src="App_Themes/css/images/coverMoisUp.jpg" name="mois" border="0" language="javascript" /></a><br />
        <br />--%>
        <asp:Label ID="Label1" runat="server" SkinID="titre" Text="Consultez notre catalogue"></asp:Label><br />
        <a href="javascript:window.open('catalogueFlash.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" border="0" alt="Catalogue" onMouseOver="rolloverCat(cat,imagesCat02)" onMouseOut="rolloverCat(cat,imagesCat01)" onMouseDown="rolloverCat(cat,imagesCat03)"  onMouseUp="rolloverCat(cat,imagesCat02)" class="lien1"><img src="App_Themes/css/images/coverCatUp.jpg" name="cat" border="0" language="javascript" /></a><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
 
        &nbsp;</div>
        <asp:SqlDataSource ID="News" runat="server" ConnectionString="<%$ ConnectionStrings:csNex %>" SelectCommand="SELECT * FROM [News] ORDER BY [Date] DESC"></asp:SqlDataSource>
        <asp:DataList ID="DataList1" runat="server" DataSourceID="News" Width="500px" BackColor="Transparent" >
            <ItemTemplate>
                <div id="titreNews">
                    <asp:Label ID="titreNewsLabel" cssClass="titreNewsLabel" runat="server" Text='<%# Eval("Titre") %>'></asp:Label><br />
                </div>
                <div id="dateNews">
                    <asp:Label ID="dateNewsLabel" cssClass="dateNewsLabel" runat="server" Text='<%# Eval("Date", "{0:dd-MM-yyyy}") %>'></asp:Label><br />
                </div>
                <div id="texteNews">  
                    <asp:Label ID="texteNewsLabel" cssClass="texteNewsLabel" runat="server" Text='<%# Eval("Nouvelle") %>'></asp:Label><br />
                    <br />
                    <hr width="450" />
                </div>
            </ItemTemplate>
            <ItemStyle Width="500px" />
        </asp:DataList>
    </div>
    <div id="un" style="text-align:center;float: right;width:110px;background-image:url('images/milieuGrisBleu2.gif');background-repeat: repeat;height:578px;overflow: hidden;padding:10px" onmouseover="clearTimeout(timer)" onmouseout="go()">
    <div id="deux" style="text-align:center;position:relative;width:100px;top:200px">
        <asp:SqlDataSource ID="Pub" runat="server" ConnectionString="<%$ ConnectionStrings:csNex %>" SelectCommand="SELECT * FROM [Pub]"></asp:SqlDataSource>
       <asp:DataList SkinId="pub" ID="DataList2" runat="server" DataSourceID="Pub" BackColor="Transparent">
            <ItemTemplate>
                <div class="titrePubLabel">
                    <asp:Label ID="TitreLabel" runat="server" Text='<%# Eval("Titre") %>'></asp:Label><br /><br />
                </div>
                <div class="textePubLabel">
                    <asp:Label ID="TexteLabel" runat="server" Text='<%# Eval("Texte") %>'></asp:Label><br /><br />
                </div>
                <div class="imagePubLabel">
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>' Width="90px" /><br /><br />
                </div>
                <div class="prixPubLabel">
                    <asp:Label ID="PrixLabel" runat="server" Text='<%# Eval("Prix")&"$" %>'></asp:Label><br />
                    <br />
                    <hr />
                </div>
            </ItemTemplate>
           <ItemStyle Width="120px" BackColor="Transparent" />
        </asp:DataList>
        </div>
	</div>
</asp:Content>

Mon 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
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>NexSolution</title>
    <script src="js/js.js" language="JavaScript" type="text/javascript"></script>
    <script type="text/javascript"> 
        var pos=200;
        var acc=100;
        var sens=true;
        function go(){
        if(sens){
        if(pos>-250){pos--}else{pos=200};
        }
        else{
        if(pos<200){pos++}else{pos=-250};
        }
        document.getElementById('deux').style.top=pos+"px";
        timer=setTimeout("go()",acc)
        }
</script>
 
</head>
<body onload=go()>
    <form id="form1" runat="server">
    <div id="container">
        <!-- Header -->
            <div id="header">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/accueil.aspx" ImageUrl="~/App_Themes/css/images/banniereGrisBleu.jpg"></asp:HyperLink>
            </div>
        <!-- Centre -->
            <div id="center">
                <asp:ContentPlaceHolder ID="Main" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        <!-- Pied de page -->
            <div id="footer">
                <asp:Label ID="piedDePage" runat="server" Text="Copyright ® NexSolution 2007" CssClass="footer"></asp:Label>&nbsp;
            </div>
    </div>
    </form>
</body>
</html>

Et mon 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
#un 
{
    text-align:center;
    margin-right:auto;
    margin-left:auto;
    width:110px;
    overflow:hidden;
    border:yellow solid 2px;
    height:200px;
}
 
#deux 
{
    text-align:center;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    width:100px;
    top:200px;
 
}

Si vous avez une idée.... merci a vous!

**mafyoso** · 08/11/2007, 17h35

Bonsoir,

Je suis pas sûr mais essais de mettre l'attribut 'overflow' aprés avoir défini l'attribut 'height'

A suivre....

**Moony Light** · 08/11/2007, 17h45

Ca change rien. J'ai continuer a faire des test, j'ai tout mis dans la même page, le master, le JS, le css, ca marchait mais la j'ai voulu modifier le css et paf, ca marche plus et plus moyen de le faire fonctionné. J'ai une autre page qui m'a servit a faire a faire celle dont je viens de parler, ca marche mais la ma page est décentrer dans IE. Bref, je vais mettre le code de la version "Tout en un":

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
<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>NexSolution</title>
    <script src="js/js.js" language="JavaScript" type="text/javascript"></script>
    <script type="text/javascript"> 
        var pos=200;
        var acc=100;
        var sens=true;
        function go(){
        if(sens){
        if(pos>-250){pos--}else{pos=200};
        }
        else{
        if(pos<200){pos++}else{pos=-250};
        }
        document.getElementById('deuxieme').style.top=pos+"px";
        timer=setTimeout("go()",acc)
        }
</script>
 
<style type="text/css">
#premier {text-align:center;margin-right:auto;margin-left:auto;width:110px;border:yellow solid 2px;height:200px;overflow:hidden}
#deuxieme {text-align:center;margin-right:auto;margin-left:auto;position:relative;width:100px;top:200px}
 
</style>
 
</head>
<body onload="go()">
    <form id="form1" runat="server">
    <div id="container">
        <!-- Header -->
            <div id="header">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/accueil.aspx" ImageUrl="~/App_Themes/css/images/banniereGrisBleu.jpg"></asp:HyperLink>
            </div>
        <!-- Centre -->
            <div id="center">
            <div id="menu2"><br />
        <asp:Label ID="Label2" runat="server" Text="Cliquez sur les parapluies !" CssClass="textePetit"></asp:Label>
		   <script language="JavaScript" type="text/javascript">carrouselFlash();</script>
 
	</div>
	<div id="news"><br />
	<div align="center">
        <asp:Label SkinId="titre" ID="Label4" runat="server" Text="Consultez nos spéciaux CAMÉRAS"></asp:Label><br />
        <a href="javascript:window.open('alarme.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" onMouseOver="rolloverAlarme(alarme,imagesAlarme02)" onMouseOut="rolloverAlarme(alarme,imagesAlarme01)" onMouseDown="rolloverAlarme(alarme,imagesAlarme03)"  onMouseUp="rolloverAlarme(alarme,imagesAlarme02)" class="lien1"><img src="App_Themes/css/images/coverAlarmeUp.jpg" name="alarme" border="0" alt="Spéciaux CAMÉRAS" /></a><br />
        <br />
        <%--<asp:Label ID="Label3" runat="server" SkinID="titre" Text="Consultez nos spéciaux du mois"></asp:Label><br />
        <a href="javascript:window.open('mois.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" onMouseOver="rolloverMois(mois,imagesMois02)" onMouseOut="rolloverMois(mois,imagesMois01)" onMouseDown="rolloverMois(mois,imagesMois03)"  onMouseUp="rolloverMois(mois,imagesMois02)" class="lien1"><img src="App_Themes/css/images/coverMoisUp.jpg" name="mois" border="0" alt="Spéciaux du mois" /></a><br />
        <br />--%>
        <asp:Label ID="Label1" runat="server" SkinID="titre" Text="Consultez notre catalogue"></asp:Label><br />
        <a href="javascript:window.open('catalogueFlash.aspx','_blank','menubar=no, toolbar=no, location=yes, scrollbars=yes, resizable=yes, height=420 width=1050'); void(0);" onMouseOver="rolloverCat(cat,imagesCat02)" onMouseOut="rolloverCat(cat,imagesCat01)" onMouseDown="rolloverCat(cat,imagesCat03)"  onMouseUp="rolloverCat(cat,imagesCat02)" class="lien1"><img src="App_Themes/css/images/coverCatUp.jpg" name="cat" border="0" alt="Catalogue" /></a><br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
 
        &nbsp;</div>
        <asp:SqlDataSource ID="News" runat="server" ConnectionString="<%$ ConnectionStrings:csNex %>" SelectCommand="SELECT * FROM [News] ORDER BY [Date] DESC"></asp:SqlDataSource>
        <asp:DataList ID="DataList1" runat="server" DataSourceID="News" Width="500px" BackColor="Transparent" >
            <ItemTemplate>
                <div id="titreNews">
                    <asp:Label ID="titreNewsLabel" cssClass="titreNewsLabel" runat="server" Text='<%# Eval("Titre") %>'></asp:Label><br />
                </div>
                <div id="dateNews">
                    <asp:Label ID="dateNewsLabel" cssClass="dateNewsLabel" runat="server" Text='<%# Eval("Date", "{0:dd-MM-yyyy}") %>'></asp:Label><br />
                </div>
                <div id="texteNews">  
                    <asp:Label ID="texteNewsLabel" cssClass="texteNewsLabel" runat="server" Text='<%# Eval("Nouvelle") %>'></asp:Label><br />
                    <br />
                    <hr width="450" />
                </div>
            </ItemTemplate>
            <ItemStyle Width="500px" />
        </asp:DataList>
    </div>
  <div id="premier">
	  <div id="deuxieme">
          <asp:SqlDataSource ID="Pub" runat="server" ConnectionString="<%$ ConnectionStrings:csNex %>" SelectCommand="SELECT * FROM [Pub]"></asp:SqlDataSource>
       <asp:DataList SkinId="pub" ID="DataList2" runat="server" DataSourceID="Pub" BackColor="Transparent">
            <ItemTemplate>
                <div class="titrePubLabel">
                    <asp:Label ID="TitreLabel" runat="server" Text='<%# Eval("Titre") %>'></asp:Label><br /><br />
                </div>
                <div class="textePubLabel">
                    <asp:Label ID="TexteLabel" runat="server" Text='<%# Eval("Texte") %>'></asp:Label><br /><br />
                </div>
                <div class="imagePubLabel">
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>' Width="90px" /><br /><br />
                </div>
                <div class="prixPubLabel">
                    <asp:Label ID="PrixLabel" runat="server" Text='<%# Eval("Prix")&"$" %>'></asp:Label><br />
                    <br />
                    <hr />
                </div>
            </ItemTemplate>
           <ItemStyle Width="120px" BackColor="Transparent" />
        </asp:DataList>
        </div></div>
 </div>
 <!-- Pied de page -->
            <div id="footer">
                <asp:Label ID="piedDePage" runat="server" Text="Copyright ® NexSolution 2007" CssClass="footer"></asp:Label>&nbsp;
            </div>
    </div>
    </form>
</body>
</html>

Le hidden fonctionne toujours pas

Problème d'overflow hidden

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager