Comment faire un calque CSS sur une image ASP.NET?

-2

En haut de l'écran, j'ai un lien hypertexte ASP.NET avec une image représentant la société et l'application. Je veux utiliser des calques CSS pour placer du texte ou un contrôle affichant du texte sur le lien hypertexte/image en bas à droite représentant le productEdition.Comment faire un calque CSS sur une image ASP.NET?

Je ne peux pas publier le balisage ASP.NET Hyperlink car il provoque une erreur mais il a une ImageUrl. Oh, c'est dans un panneau. Voir ci-dessous:

<asp:panel ID="toppanel" CssClass='wrapper' runat="server"> 
<!--Top Menu-->   
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper"> 
    <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" NavigateURl="~/Default.aspx" ToolTip="Home Page"> 
    </asp:HyperLink> 
</asp:panel>

En utilisant les techniques dans certaines des réponses, j'ai ce travail - le texte est au-dessus de l'image, mais il est tout le chemin à gauche. J'ai besoin d'être tout le chemin vers la droite.

<asp:panel ID="toppanel" CssClass='wrapper' runat="server"> 
     <!--Top Menu-->   
     <asp:panel id="menupanel" runat="server" CssClass="menusubwrapper"> 

     <div id="Header" style="position: relative; z-index: 1"> 
      <%--div style="position:absolute;z-index:1">--%> 
       <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" 
       NavigateURl="~/Default.aspx" ToolTip="Home Page"> 
       </asp:HyperLink> 

       <div style="position:absolute;top:60px; right:400px; width:600px; height:100px; z-index:2;font-size:200%"> 
        <b>Testing...</b> 
       </div> 
     <%--</div>--%> 
</div>`

Source

2013-06-27 user2471435

Montrez-nous comment vous le codez, sinon nous ne serons pas en mesure de vous aider. – Renan

Non div mais – user2471435

S'il vous plaît modifier votre question avec cette information, alors. – Renan

Vous pouvez créer un div pour chevaucher l'image avec l'édition. Vous pouvez lire sur les éléments se chevauchant ici: http://www.w3schools.com/css/css_positioning.asp

Espérons que cela aide et bonne chance!

Source

2013-06-27 20:26:11

J'ai regardé et je peux faire un Z-Index de -1 mais comment puis-je m'assurer qu'il est placé au-dessus de l'image dans le contrôle Hyperlink? – user2471435

Placez le contrôle Hyperlink dans un div puis utilisez l'index Z pour contrôler l'élément qui se chevauche. Je place généralement des bordures sur mes divs jusqu'à ce qu'elles soient correctement positionnées. Cela facilite beaucoup la compréhension de ce qui se passe. Par exemple, dans une frontière div mettre: 2px rouge solide; et l'autre mettre la frontière: 2px noir solide; Vous pouvez l'utiliser jusqu'à ce qu'ils soient positionnés, puis supprimez la bordure. –

Vous pourriez avoir un DIV autour de l'image liée ainsi que autour du texte (également dans un DIV). Donnez à l'enveloppe DIV un style "position: relative" et donnez au texte DIV le positionnement absolu. Ou, au lieu d'utiliser le positionnement absolu, vous pouvez le faire flotter à droite ou à gauche, au centre, en utilisant les marges, etc.

Source

2013-06-27 20:28:09 saratogahiker

Voici quelques tutoriels pour vous:

http://www.html.net/tutorials/css/lesson15.php

http://www.xul.fr/en/css/text-over-image.php

Source

2013-06-27 20:32:31 Learner

est ici la solution:

<div id="Header" style="position: relative; z-index: 1"> 

       <asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" 
           NavigateURl="~/Default.aspx" ToolTip="Home Page"/> 

       <div style="position:absolute;top:60px; left:800px; width:600px; height:100px; z-index:2;font-size:200%"> 
        <%--<b>Testing...</b>--%> 
        <asp:Label runat="server" ></asp:Label> 
       </div> 

      </div>

Source

2013-06-28 17:39:22 user2471435

Comment faire un calque CSS sur une image ASP.NET?

Répondre

Questions connexes