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>
Related
I have a template in master page in asp.net and I use ContentPlaceHolder.
The issue I'm facing is if the ContentPlaceHolder is larger than the wrapper, then the information displayed in ContentPlaceHolder is hidden behind the footer.
As you can see in this image, the white space is the wrapper. and the TABS end line is behind the footer image. But if you look at the second image (where info is displayed within the wrapper) everything looks normal.
Here's the CSS:
#wrapper {
overflow: hidden;
background-color: #FFFFFF
}
Here's the asp.net code:
<div id="wrapper">
<div id="page" class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<p>
</p>
<p>
<br />
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
</asp:ContentPlaceHolder>
<div style="clear: both;"> </div>
</div>
<!-- end #content -->
<div style="clear: both;"> </div>
</div>
and here's the css for container:
.container {
width: 999px;
margin: 0px auto;
height: 256px;
}
How can I increase the wrapper so if the data in ContentPlaceHolder is larger it increases the height of the wrapper?
I tried to set the
height: auto;
But it doesn't work.
Any suggestions?
This fixed my issue:
<div id="page" class="container" style ="height: auto;">
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);
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 want to use a div to centre a website, should this be done on the site.master or on each page?
thanks
<div id="wrapper">
//Rest Of Masterpage
</div>
in CSS
#wrapper
{
margin: auto;
}
This should center everythign in your masterpage
Add this CSS to your stylesheet
* { margin:0; padding:0; }
body { text-align:center; }
#container { width:960px; margin:0 auto; text-align:left; }
Then in the master page
<div id="container">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div>
<center>
<asp:ContentPlaceHolder ID="Content1" runat="server"/>
</center>
</div>
ASPX:
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
CSS:
#main { margin: 0 auto; }