I have two div elements inside a div element as follows.
<div style="display: inline;">
<div style="display: inline; float: left;width:90%;">
<p style="display: block; float: left;">
<%# DataBinder.Eval(Container.DataItem,"Text") %>
</p>
</div>
<div id="divImage" runat="server" style="display: inline; float: right; width: 10%;">
<a href='<%= ImagePath%><%# Eval("Image") %>'>
<img src="<%= ImagePath%><%# Eval("Image") %>" alt="Text" width="40px" height="40px" /></a>
</div>
</div>
I want to display both the child div elements with (90% and 10% width respectively) when the image path is valid. If an image is not available, I would like to hide the second child div (id:divImage). So the text would cover the entire available space. Can anyone suggest how to achieve this?
Thanks.
You can always use JQuery to do it at client side
http://api.jquery.com/css/
From server side
<div runat="server" id="divControl">...</div>
Class of the Page:
protected System.Web.UI.HtmlControls.HtmlGenericControl divControl;
OnLoad/Other function:
divControl.Style.Add("height", number / anotherNumer);
Related
I need help with HTML / .css
I am trying to setup Image and Text in the center of Web Form Page. Also Image should be on the left of Text.
I've tried 2 solutions, but when I create table - it display on the left of screen and can't go middle.
A
<section class="main-page">
<div class="image-wrapper">
<asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %></h1>
</hgroup>
</div>
</section>
B
<table>
<tbody>
<tr>
<th><h1><%: Title %></h1></th>
<th><asp:Image ID="Image2" Height="35px" runat="server" ImageUrl="~/Images/Origin/logo.jpg" /></th>
</tr>
</tbody>
</table>
.css
.content-wrapper {
margin: 0 auto;
/*max-width: 960px;*/
}
You need to place the image/text in a container with text-align:center; defined in order for them to be centred, then the text should simply precede the image.
If for whatever reason the img element cant be placed following the text, you may need to float the elements to rearrange their ordering.
If the text is within a block level element, you will also need to set display:inline-block on it
As a basic demo:
HTML
<section>Text
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</section>
CSS
section {
text-align:center;
vertical-align:Center;
}
Demo Fiddle of example A
HTML
<section class="main-page">
<div class="image-wrapper">
<img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' />
</div>
<div class="content-wrapper">
<hgroup class="title">
<h1>Title</h1>
</hgroup>
</div>
</section>
CSS
body{
text-align:center;
}
div, section{
display:inline-block;
}
div:first-child{
float:right;
}
div:last-child{
float:left;
}
Demo Fiddle of example B
HTML
<table>
<tbody>
<tr>
<th><h1>Title</h1></th>
<th><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRdw26b_dwa8moS-gRSFpaG3dwJTB6Nqtqxexmb7PscuD5gVP-P' /></th>
</tr>
</tbody>
</table>
CSS
body{
text-align:center;
}
table{
display:inline-block;
}
Based on this answer StackOverflow #Nikita Rybak I have created a set of labels and textboxes following his solution which shows to be working on JSFiddle.
I have copied this and added a few more categories to my ASP project but when loaded into chrome the boxes and text are all out of align.
This is my html file
<div id="User">
<div>
<div class="left">
<asp:Label ID="lbl_UserName" runat="server" Text="User Name"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_UserName" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_FirstName" runat="server" Text="First Name"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_FirstName" runat="server"></asp:TextBox>
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_Password" runat="server" Text="Password"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_Password" runat="server"></asp:TextBox>
</div>
</div>
<div>
<div class="left">
<asp:Label ID="lbl_ConfPassword" runat="server" Text="Confirm Password"></asp:Label>
</div>
<div class="right">
<asp:TextBox ID="txtbx_ConfPassword" runat="server"></asp:TextBox>
</div>
</div>
</div>
and my CSS file
#Content
{
position: relative;
float:none;
border: 1px solid #000000;
float: left;
padding: 80px 40px 60px 40px;
text-align:center;
background-color: #F8F8F8;
left: 0px; right: 0px;
text-align: center;
}
#User .left {
width: 30%;
float: left;
text-align: right;}
#User .right {
width: 65%;
margin-left: 10px;
float:left;}
Is there a reason why mine does not work?
It should work okay, though you have a few too many divs in there unnecessarily, and you also have a line break that may be screwing things up. Check out this fiddle
HTML
<div id="User">
<div class="left">
<label>User name</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>First name</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>Password</label>
</div>
<div class="right">
<input type="text" />
</div>
<div class="left">
<label>Confirm password</label>
</div>
<div class="right">
<input type="text" />
</div>
</div>
CSS
#User .left {
width: 30%;
float: left;
text-align: right;}
#User .right {
width: 65%;
margin-left: 10px;
float:left;}
Also, you have a #Content element defined in your CSS nut it is not in the HTML, so that could be causing the problem.
EDIT
The only other thing I can think of is that the label control wraps the text in a - maybe try a literal control? The fiddle works fine, so it must be something with webforms controls.
Float sHould be used very carefully. Instead yo can use position attribute to position your div's accordingly.
I have a label with in a div in ASP.NET just before a text box but I am not sure how can I center align my asp.net label,
<div style="float: left; width: 65%;">
<asp:Label ID="lba" CssClass="aa" runat="server" Text="aaa" />
</div>
In the div element add style text-align: center to center the text
<div style="float: left; width: 65%; text-align: center;">
<div style="float: left; width: 65%; text-align: center;">
<asp:Label ID="lba" CssClass="aa" runat="server" Text="aaa" />
</div>
<div style="text-align:center; width:100%;">
<asp:Lable ID="lba" style="margin:0 auto;" CssClass="aa" runat="server"/>
</div>
you can also try style="margin:0 auto;" to label and width 100% to parend div.
I have an image that links to my homepage. Is there an attribute that I can specify to right align the image within its column (my code below)? I don't want to use anything more complicated than using just an attribute. Thanks.
Please note: I just want to right align ONLY this image. Not the whole div.
<div class="leftCol">
<asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
Use CSS:
<style type="text/css">
.leftCol a img { float: right; }
</style>
<div class="leftCol">
some text here <asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
or (better)
<style type="text/css">
.rightAlign { float: right; }
</style>
<div class="leftCol">
some text here <asp:HyperLink CssClass="rightAlign" ID="HyperLink" runat="server" ImageUrl="~/home.jpg" NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
Its recommended to place the CSS in your stylesheet file, but for demonstration purposes, I included the style inline here.
<div class="leftCol">
<div>
Stuff that should align left
</div>
<div style="float:right; display:inline;">
<asp:HyperLink ID="HyperLink" runat="server" ImageUrl="~/home.jpg"
NavigateUrl="http://myhomepage.edu">HyperLink</asp:HyperLink>
</div>
</div>
<style type="text/css">
.link
{
float: right;
}
</style>
<div>
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/logo.png" CssClass="link">HyperLink</asp:HyperLink>
</div>
</form>
I am usually using table to do layouting. But I would like to try out the layouting in Div. Here is the problem, When I "float: left" a div, it makes the succeeding div to float with it. I tried to put "float: none" to the next div to make it break a line but it does not work.
Here is what I want to do using table:
<hr style="width: 100%;" />
<table>
<tr>
<td>
<div id="divLeftPane">
...
</div>
</td>
<td>
<div id="divCenterPane">
...
</div>
</td>
<td>
<div id="divRightPane">
...
</div>
</td>
</tr>
</table>
<hr style="width: 100%;" />
Here is what I have so far tried with div using float:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane">
...
</div>
</div>
<hr style="width: 100%;" />
The problem with the use of div is the bottom is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?
This will give you the desired effect:
<hr style="width: 100%;" />
<div id="divContainer">
<div id="divLeftPane" style="float: left;">
...
</div>
<div id="divCenterPane" style="float: left;">
...
</div>
<div id="divRightPane" style="float:left; ">
...
</div>
<div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />
Floating the 3 divs left will make them appear side by side, but you'll notice that divContainer does not take the height of the div tags inside it. Adding the div with clear:left basically undoes this.
edit: Avoid inline styles when you do this for real.
Use the attribute
clear:left;
on the bottom element.
adding
#divContainer {
overflow: hidden;
}
will accomplish this without the extra div at the end