At the top of my screen, I have an ASP.NET Hyperlink with an image representing the company and the application. I want to use CSS layers to place text or some control displaying text on top of the hyperlink/image at bottom right hand corner representing the productEdition.
I can't post the ASP.NET Hyperlink markup because it causes error but it has an ImageUrl. Oh, it's in a panel. See below:
<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>
Using the techniques in some of the answers, I have this working - the text is on top of the picture but it's all the way to the left. I need it to be all the way to the right.
<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>`
You could create a div to overlap the image with the Edition in it. You can read about overlapping elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps and Good Luck!
You could have a DIV wrapping around the linked image as well as around the text (also within a DIV). Give the wrapping DIV a style "position:relative" and give the text DIV absolute positioning. Or, instead of using absolute positioning, you could float it right or left, center it, using margins, etc.
Here are a few tutorials for you:
http://www.html.net/tutorials/css/lesson15.php
OR
http://www.xul.fr/en/css/text-over-image.php
Here's the 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>
Related
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I have created a user control that generates list item , how can i make the whole field clickable rather than just a text ( now the hyperlink is wrapped around the merchants name) , wrapping the list in a hyperlink will mess up the entire flow of the table and ive already run out of ideas.
<li>
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<asp:Label ID="lblMerchantName" runat="server" />
</asp:HyperLink>
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</li>
Wrap your div in the link, and make sure it takes up the whole space of your li:
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<div ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</div>
</asp:HyperLink>
</li>
What you actually wind up doing here will depend on your layout, but something like this.
<li>
<asp:HyperLink ID="hypTrendingMerchant" CssClass="merchantName-width" runat="server" >
<span ID="divmech" class = "hint--top" data-hint="" runat="server">
<asp:Label ID="lblMerchantName" runat="server" />
<asp:Label ID ="lblMerchantDifference" class="gecko-right gecko-trend-arrow pad gecko-col-secondary" font-bold="true" runat="server" />
</span>
</asp:HyperLink>
</li>
don't put block elements like DIV inside inline elements like A. instead wrap all li content in the link.
then from CSS, make A as block, and if you need the span #divmech as block element, then do that from CSS too. Don't forget to set LI padding to 0 so A element would take most of the space
li{
display:block;
padding:0;
}
a.merchantName-width{
display:block;
}
#divmech{
display:block;
}
I have modified my master page to move the site collection title from the body, to be inside my upper suite bar. So I move the following h1 div code to be inside the Suite bar DIV as follow:-
<div id="suiteLinksBox">
<SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
</div>
<h1 id="pageTitle" class="ms-core-pageTitle" style="color:white;float:left">
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="true"
SiteMapProvider="SPContentMapProvider"
CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">
<PATHSEPARATORTEMPLATE>
<SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE>
</SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
<SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">
<a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;">
<span id="ms-pageDescriptionImage"> </span>
</a>
<span class="ms-accessible" id="ms-pageDescription">
<asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
</span>
<SharePoint:ScriptBlock runat="server">
_spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");
</SharePoint:ScriptBlock>
</SharePoint:AjaxDelta>
</h1>
The result is that the Site title (in my case the Dicusion forum) will be on the right side of the screen although i have defined float:left for the h1 div, so is there a way to move it to the left just beside the logo ?
Can anyone advice please, if he know how to do it ?
pageTitle {position: absolute; left: 400px; top: 30px} will work fine
I am using ASP.NET 2.0.
I have Image and ImageButton Side by Side by like this.
<div style="width:80px">
<asp:Image ID="innerImgDesk1" runat="server" ImageUrl="~/images/advlefttop.png" Width ="60px"/>
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
I want the ASP.NET Imagebutton on top of Image. I should see image button kind of indicator, where Imagebutton color will be changing. But Image color remains same.
Currently using the above code, it displays like below.
I want it to be displayed like below,
Could anyone tell me What I should do to display ImageButton on Image.
Thank you
Try setting the image as background image of the div tag like the following code:
<div style="width:80px; background: url(images/advlefttop.png)">
<asp:ImageButton ID="ImgDeskIndicator1" runat="server" Width="20px" ImageUrl="~/images/Indicators/blue.png"/>
</div>
Hope this helps!
Corix
if you are just worried about displaying button over image-button than you can do this by using div absolute position like
<div style="position:relative">
<div style="position:absolute">image button</div>
<div style="position:absolute> button</div>
</div>
I have two listboxes and two buttons. Each listbox is in its own div and the two buttons are in their own div. One listbox should be on the left and the two buttons should be to the right of that with the other listbox to the right of the buttons. This is the markup I am using, but it is putting the 2nd listbox below the Remove button.
<p>Available Colors</p>
<div style="float:left; margin:5px;">
<asp:ListBox ID="lstAvailableColors" runat="server"></asp:ListBox>
</div>
<div>
<asp:Button ID="btnAdd" runat="server" Text="Add" /><br />
<asp:Button ID="btnRemove" runat="server" Text="Remove" />
</div>
<div style="margin:5px;">
<asp:ListBox ID="lstSelectedColors" runat="server"></asp:ListBox>
</div>
You should probably float them all left to get the layout you described. divs are by default rendered with block-display, which will put a linebreak between #2 and #3, if you don't float them.
Float all three divs to the left.
Also, you must set an explicit width for floated elements.
The fisrt div with a listbox will float to the left and the other divs will take up the remaining space on the page which will be to the right of the div that is floated left.
Is it a 3 column layout you need?
If so you need something like this
<div style="float:left; width:66%">
<div style="float:left; width:50%"></div>
<div style="float:right; width:50%"></div>
</div>
<div style="float:right; width:33%"></div>