I have the following HTML code:
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%">
I'm not too familiar with HTML, but form all the articles I've seen, this should work fine. If I show the image in an asp.net image control then it shows fine. However, I want to put text on top of it. Can anyone tell me what I'm doing wrong, please?
By default, you cannot use the ~ in the paths of normal HTML elements. That would only be understood by ASP.NET, but your element is being treated as markup and simply sent to the browser without being processed by the server-side script.
You should either add an id attribute and the attribute runat="server" to your <div> so that it is recognized by ASP.NET, or else you would have to use a relative or absolute URL without the ~ in the path:
<div id="mydiv" style="background-image:url(~/Images/MyImage.jpg);" runat="server">
or
<div style="background-image:url(/Images/MyImage.jpg);">
Your div is not evaluated as a server control, thus the "~" char is not recognized as it should. Not 100% sure, but adding runat="server" should work...
<div style="background-image:url(~/Images/MyImage.jpg); width:100%; height:100%" runat="server">
In the case above whatever text you put between the <div ...> </div> would come over the background image.
Also as the runat = server tag is missing it won't even be touched by asp.net. So your url is also wrong by using ~.
Related
I have one div as the following:
<div>
<% # IIF(DataBinder.Eval (Container.DataItem,"Specifiction2").ToString()<> "","")
<div>
I want to hide the above div when "spcefication2" is blank on a .aspx page.
How can I do it?
A couple of things.
You are using IIF, but IIF should never be used. Always use IF instead. The only reason to use IIF is you are stuck with a pre-2008 compiler, and even then, you should use something else.
The easiest way to do what you are describing is via an id and runat="server", you can then either set the visible property (which will mean that the div never gets emitted) or set the style to display:none
If you want to do it inline, per your example, the code is
<div style="display:
<%# IF(string.isnullorwhitespace(DataBinder.Eval(Container.DataItem,"Specifiction2").ToString), "none", "block") %>">
</div>
You are using Eval and container.dataitem, you should look into using ItemType For your grid/repeats, then referencing the value as item.Specification
The above would be much easier if you declared a function in your code behind, taking a string and returning the string none/block.
I have an ASP.NET website that is not passing the W3C XHTML validation.
It doesn't pass validation because I place <div> content into a <asp:Label>, and so the resulting markup looks like:
<span><div>stackoverflow</div></span> <!-- INVALID; DIV INSIDE SPAN -->
However, after replacing all my <asp:Label> with <asp:Literal>, I get errors that <asp:Literal> cannot be nested inside another <asp:Literal>.
I don't really understand how I'm suppose to be solving this, since <asp:Literal> sounds like it would have otherwise been exactly what I wanted.
Is the correct solution to use <asp:PlaceHolder>?
Try this solution
<div id="div" runat="server">
</div>
in code behind
div.InnerHtml = "<div>Example HTML</div>";
Duplicate, answered in: Using Panel or PlaceHolder
Short answer, an <asp:Panel> becomes a <div>, so you want something like
<asp:Panel>
<asp:Label .../>
</asp:Panel>
I have a simple form in a ASPX page that have a lot of <label> and <asp:TextBox> pairing that construct the outlay of the form.
I have a requirement to add a string behind the textbox to indicate that the field is compulsory. I'd tried adding either a <span>, a <em> or a <div> after the field but it will still display the message at the bottom of the textbox.
Any way for me to achieve this?
EDIT:
I mean right hand side of the textbox, not behind as in watermark. My Bad.
EDIT for sample code:
I'd tried all the suggestion but it is still not working, thinking whether it's my code issue or not. Below are my codes:
<label>Telephone No.</label>
<asp:TextBox ID="txtTelNo" runat="server"></asp:TextBox>
<span class="afterInput">test</span>
any pointers? Thanks.
EDIT for Answer
As it turns out the problem lies in the css property. The template that i used has all the input assigned with the display: block property, which makes anything after the <input> element to be pushed down.
After creating a custom css class with display: inline-block and assign to them appropriately, i manage to get the result that i wanted.
Many thanks for the answer provided, especially the :after attributes and the watermark attributes.
See http://jsfiddle.net/ekWG9/
.required:after{
content: "*";
color: red;
}
<label>A box</label><input type="text" value="Hello" /><span class="required"></span>
<!-- alternative HTML -->
<span class="required"><label>A box</label><input type="text" value="Hello" /></span>
Using the :after pseudo element selector allows you to take the literal content out of the markup (e.g. you don't have to repeat "*" over and over).
You can also use relative or absolute positioning to tweak the location of the content of the :after pseudo element. Example: http://jsfiddle.net/ekWG9/1/
By behind the textbox, seems you are talking of watermark text.
You could use the TextBoxWatermark from ajaxcontrol toolkit.
There are also several jQuery alternatives to implement it.
html5 also has browser support for watermarks:
<input name="q" placeholder="Go to a Website">
You could add an attribute to your control to that effect.
Use css for this purpose:
span.clsRequired {
float:left;
margin:2px 0 0 3px;
color:red;
}
And your span before text box looks like:
<span class="clsRequired ">*</span>
you should try something like this
<body>
<form id="form1">
<asp:TextBox ID="TextBox1" runat="server"/> <span>Required field</span>
</form>
</body>
In an ASP.NET project I have the following HTML:
<asp:PlaceHolder ID="plcTitle" runat="server"></asp:PlaceHolder>
<div id="divStrapline" runat="server" />
which are populated with this code:
if (this.TitlePanel != null)
{
plcTitle.Controls.Add(this.TitlePanel);
}
if (this.Strapline != null)
{
divStrapline.Controls.Add(this.Strapline);
}
Are they both the same thing? Is either better than the other? Why?
The <asp:PlaceHolder /> does not generate a div tag.
The PlaceHolder Web server control does not have any visible output and is used as a place holder when we add controls at run time.
Empty div tags (and other container tags like p etc) closed in the opening element itself (as in <div/> instead of <div></div>) might lead to issues in some browsers. Browsers might ignore the fact that it is closed with a / and consider it as a new div and thus break the subsequent mark up.
I once had this issue with Firefox: I was generating html with minidom xml library in python which represented empty div as <div /> - it broke the remainder of my mark up messing up with the subsequent divs. I ended up adding comment nodes to empty elements to make sure that they have a separate closing tag.
I don't understand it.
The ids of html elements in the master page are changed by the same id but with a prefix and it's breaking the css design.
In the master page I have:
<div id="container" runat="server">
<asp:ContentPlaceHolder ...
...
The above code is rendered
<div id="ctl00_ctloo_container">
...
And the CSS styles are gone obviously.
How do I stop it?
Thanks!
WebForms should only rewrite the ID's of server controls (like <asp:ContentPlaceHolder />, not ordinary HTML element like <div id="container"> without runat="server"
You cannot prevent the framework from rewriting ID's on server controls. You can use class names instead, though.
AFAIK you cannot do this. This is the default behaviour because of the control tree.
If you would like to use CSS then set the CSS class directly, don't depend on IDs, like
<asp:Whatever runat="server" id="whatever" CssClass="whateverClass">
Update: Here is a similair thread, but it won't help on your CSS problem.
Do you need the runat="server" tag? If you do not do anything with the div element in your code-behind, remove it.
I do not need the runat="server" tag and have removed it. Don't know why it was there ... Ids are not changed now. Thanks