How can I show the label 'RegularExpressionValidator' on the right to the input
box and align the input box?
Putting it outside the div makes the label to the left on the other side.
<style type="text/css" media="all">
<!--
label{
display:inline-block;
width:100px;
}
-->
</style>
...........
<div style="text-align:center;">
<label>Phone:</label>
<asp:RequiredFieldValidator id="req_Phone" ControlToValidate="formWphone">*</asp:RequiredFieldValidator>
<asp:textbox id="formWphone" runat="server" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="formWphone"
ValidationExpression= "">Enter valid Phone number</asp:RegularExpressionValidator>
</div>
Your issue is that you've center-aligned all of the content in the wrapper div:
<div style="text-align:center;">
When extra text is added, it changes the width of the content to be centered.
Try changing this to:
<div style="text-align:left;">
or remove the style altogether.
Then if you need some space on the left, add some padding or margin to the container 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 need to rotate some text under an image and place it to the left of the image and vertically centre it. Im using this with a CMS so the exact height and width of the image will vary. I also need to centre the image on the page.
This is what I have:
And this is what im trying to achieve:
Here is my fiddle, but I havnt got very far with it: http://jsfiddle.net/FgA8x/5/
This is the rough structure of the html, but this could be changed if needs be:
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="150px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="300px" height="250px" />
<p>This is some caption text</p>
</div>
<div>
<img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="500px" height="250px" />
<p>This is some caption text</p>
</div>
I can't seem to get the spacing right, but this as a general idea of how to get the caption to line up on the left using display: inline on the container and float: left on the caption text. Heres a fiddle:
Fiddle
Hope this helps.
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>
<div style="line-height:25px;">
First line of the content<br />
Second line of the content<br />
Third line of the content<br />
</div>
On usage of break tag in a <div>, the line-height property is not working with any of the attributes:
line-height:20px;
line-height:100%;
line-height:1.5;
Now the three lines are displayed with default line height and not with the specified line-height 25px. But if the <div> contains no break tag between the lines, the line height works. How to override this?
Since <br /> is an inline element, you need to apply line-height to a block element such as <p>.
<p style="line-height: 20px;">
This is some text<br />with a break tag.
</p>
You want to look at this question regarding turning <br /> into a block element.
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>