Discussion :

[Unusual]

Bonjour,
J'utilise VS2008 et j'ai un souci avec une application ASP.NET/C# sur des pages comportant des tableaux de boutons (n lignes, n colonnes). J'aimerais que les boutons soient centrés dans les cellules du tableau, verticalement tout est ok, mais le problème se situe horizontalement.

J'y arrive bien pour IE8, Firefox, Safari, Chrome...mais dans ce cas là, c'est IE7 qui fait n'importe quoi....les boutons partent sur la droite...

Si je le fais bien pour IE7, ce sont les autres navigateurs qui ont des soucis de présentation.

Un tableau se trouve à chaque fois dans un contentplaceholder, j'ai une page maitre, un fichier CSS pour l'application.

Je donne ici le code ASP.NET le plus simple...juste deux boutons (1 ligne, 2 colonnes) ...même si j'ai fait pleins d'essais en variant les attributs de placement, dimensionnement...

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
 
<asp:Content ID="ContentMenuBouton" ContentPlaceHolderID="ContenuClientASP" Runat="Server">
    <div id="Default" style="width:100%;height:100%;vertical-align:middle;">
        <div style="height:100%;vertical-align:middle">
            <table style="width:100%;height:100%;vertical-align:middle;text-align:center">
            <tr style="text-align:center" align="center">
                    <td align="center" style="vertical-align:middle;text-align:center">
 
                       <div class="centrage">
                        <dxe:ASPxButton ID="BtnConsultation" runat="server" 
                            Height="192px" onclick="BtnConsultation_Click" Width="289px" 
                            HorizontalAlign="Center" VerticalAlign="Middle" EnableTheming="True">
                            <Image AlternateText="Consultation" Height="192px" 
                                ToolTip="Module consultation" Url="~/Images/ModuleConsult.png" 
                                Width="289px" UrlHottracked="~/Images/ModuleConsultHover.png">
                            </Image>
                            <Paddings Padding="0px" />
                            <FocusRectPaddings Padding="0px" />
                        </dxe:ASPxButton>
                        </div>
 
                    </td>
                    <td align="center" style="vertical-align:middle;text-align:center">
 
                        <div class="centrage">
                        <dxe:ASPxButton ID="BtnSaisieIntervention" runat="server" Width="289px" Height="192px" 
                            onclick="BtnSaisieIntervention_Click" HorizontalAlign="Center" 
                            VerticalAlign="Middle">
                            <Image AlternateText="Saisie intervention" 
                                ToolTip="Module saisie interventions" Url="~/Images/ModuleInterv.png" 
                                UrlHottracked="~/Images/ModuleIntervHover.png">
                            </Image>
                            <Paddings Padding="0px" />
                            <FocusRectPaddings Padding="0px" />
                        </dxe:ASPxButton>
                        </div>
 
                    </td>
            </tr>
            </table>
        </div>
    </div>    
</asp:Content>

Actuellement, j'ai une classe CSS dans le fichier CSS pour faire le centrage :

Code :

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

1
2
3
4
5
6
7
8
9
 
.centrage 
{
    text-align: center; /* ne pas mettre pour IE7 */    
    position:relative; /* ne pas mettre pour IE7 */
    left:50%;
    margin-left:-144px; /* mettre à 0 pour IE7 */
    width:290px;
}

J'utilise une ruse pour centrer chaque bouton (placement horizontal à 50% et marge gauche négative de la moitié de la largeur du bouton).

En commentaires, j'indique comment cela peut s'avérer correct pour IE7 (cad en enlevant text-align et position et en spécifiant margin-left à 0px).

D'où plusieurs questions :

a) Y a-t-il une méthode plus universelle que celle employée car c'est un peu de la bidouille (pas trouvé mieux tout seul) ?

b) Peut-on faire des déclarations CSS conditionnelles en fonction du navigateur ou d'une version de navigateur ? Si oui, où et comment (dans le CSS, dans la page maitre,...) ?

Même s'il y a une réponse à la question a) la réponse à la question b) m'intéresse aussi. Merci !

N.B. : J'ai bien essayé des astuces CSS qui marchent dans des fichiers HTML simples pour n'appliquer des propriétés CSS qu'à IE7 dans mes classes CSS, mais Visual Studio y fait une allergie à la compilation

[Immobilis]

Salut

a) Y a-t-il une méthode plus universelle que celle employée car c'est un peu de la bidouille (pas trouvé mieux tout seul) ?

b) Peut-on faire des déclarations CSS conditionnelles en fonction du navigateur ou d'une version de navigateur ? Si oui, où et comment (dans le CSS, dans la page maitre,...) ?

La compatibilité entre tous les navigateurs est un problème très courant. De nombreux exemples existent sur le net pour les résoudre. Il existe notamment un "hack" dit "commentaire conditionnel". Exemple:

Code :

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

1
2
3
<!--[if IE]>
   ..ici, code HTML réservé à IE...
<![endif]-->

Dans tous les cas, tu ne devrais pas trop tenir compte des alertes de Visual Studio à ce sujet.

A+