I would like to produce a slight reflection on the two Hyperlink images i have embedded within div tags. What styles would I have to use? Any good links would be great too
Thanks
<div class="paneStyle">
<asp:Label ID="followUs" runat="server" Text="Follow us on:" CssClass="followUsStyle"></asp:Label><br style="line-height:30px;"/>
**<div id="FB" class="IconStyle"><asp:HyperLink ID="facebook" runat="server" ImageUrl="/_layouts/Facebook.png" NavigateUrl="http://www.........w"></asp:HyperLink></div>
<div id="TW" class="IconStyle"><asp:HyperLink ID="twitter" runat="server" ImageUrl="/_layouts/Twitter.png" NavigateUrl ="http:........"></asp:HyperLink></div> **
</div>
Related
Is there a possible way to skip an item in asp:repeater? I have <ul> and <li>s where I need the ul to be repeated only once. Since it has id and ids must be unique.
Here I need to skip repeating the <ul id="lightgallery"> then continue repeating the <li> tags.
<asp:Repeater ID="rptBlogs" runat="server">
<ItemTemplate>
<div class="blog-post">
<div style="display:none;" id="video<%# Eval("ID") %>">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="<%# !Eval("ArticleTypeValue").ParseString()%>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="post-left-img">
<ul id="lightgallery"> //this needs to be skipped
<li class="video" style="position: relative;" data-poster="/<%# Eval("ThumbImage").ParseString() %>" data-sub-html="<%# Eval("Description") %>" data-html="#video<%# Eval("ID") %>" >
<a href="javascript:void(0)">
<img class="img-responsive" src="/<%# Eval("ThumbImage").ParseString() %>" />
<div class="demo-gallery-poster">
<img src="/assets/images/play-button.png">
</div>
</a>
</li>
</ul>
</div>
</ItemTemplate>
</asp:Repeater>
I know the common sense fact where the structure should be:
<ul>
<asp:repeater>
...
</asp:repeter>
</ul>
But that can't be done because of the HTML structure.
Solved but still open to better ideas. See below for my solution.
I used:
<ul id="lightgallery<%# Eval("ID") %>">
Instead of:
<ul id="lightgallery">
Then used jquery starts with selector:
$('[id^=lightgallery]')
I think a repeater in your repeater might allow you to get what you are looking for you just may have to tweak the data that you are binding.
Check out this answer
Repeater in Repeater
If that doesn't work then you can add an OnDataItemBound (similar to what is shown in the link) to find/remove your control on the server side.
I am designing an ASP.NET page with using some data from SQL Server Database. I used <DataList> to call data and fill any place I want to in the page. My problem is, CSS seems not working for the element in <HeaderTemplate>. I searched some posts but I couldn't find an answer.
I tried to style <p> like you see in the code, and I tried to style the data I called with <span> too. Then I tried to use both of them at the same time as you see. None of them works.
Here is my code:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Last News</h2>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><p style="text-align:center;"></HeaderTemplate>
<ItemTemplate><span style="text-align:center;"><%#Eval("news_header") %></span></ItemTemplate>
<FooterTemplate></p></FooterTemplate>
</asp:DataList>
<p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
UPDATE and SOLUTION:
When I looked at the codes in browser while localhos was working, I saw the problem was table that Datalist creates. So I framed that table with div just out of Datalistcode and write the CSS class to make it work with all screen sizes. Here is the codes:
Asp.Net Side:
<div class="col-lg-4">
<img class="img-circle" src="../Images/icons/1.png" alt="Generic placeholder image" height="120" width="120" style="position:relative;">
<h2>Son Haberler</h2>
<div class="col-lg-12"><asp:DataList ID="DataList1" runat="server">
<HeaderStyle CssClass="deneme2"/>
<ItemTemplate>
<span><%#Eval("haber_baslik_tr") %></span>
</ItemTemplate>
</asp:DataList></div>
<br /><p><a class="btn btn-default" href="haberler.aspx" role="button">Devamını Oku »</a></p>
</div>
CSS Side:
.col-lg-12 table{
width:100%;
}
.col-lg-12 table tbody tr td{
text-align:center;
}
Use DataList.HeaderStyle
<HeaderStyle CssClass="MyHeaderClass">
</HeaderStyle>
this is my asp codes in my page
<asp:GridView BorderStyle="None" BorderColor="White" BorderWidth="0px" CellPadding="0" AlternatingRowStyle-BackColor="" ID="grdProducts" Width="100%" runat="server" AutoGenerateColumns="False" ShowHeader="False" AllowPaging="True" DataSourceID="sqldsProducts">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<!--begin col-lg-6 col-md-6 -->
<li class="list_item col-lg-12 col-md-12 portfolio">
<div class="recent-item">
<figure class="portfolio_1">
<div class="bwWrapper touching medium">
<asp:Image ID="Image1" ImageUrl='<%# Eval("PImg") %>' runat="server" />
</i>
</div>
<figcaption class="item-description">
<h5 id="PTitle"><%# Eval("PTitle") %></h5>
<p id="PDesc"><%# Eval("PDesc") %></p>
<div class="go_link">
Read More
</div>
</figcaption>
</figure>
</div>
</li>
<!--end col-lg-6 col-md-6 -->
<div style="height:20px;"></div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<pagerstyle cssclass="pagination" HorizontalAlign="Center" />
</asp:GridView>
for example i want to add some css attributes for this code
h5 id="PTitle"<%# Eval("PTitle") %>/h5 but i dont know how to find this id and add attributes
You can do this using jQuery. Make sure you have jQuery embedded in your page.
Then you can access PTitle element using jQuery selector and assign CSS to it as follows
$( document ).ready(function() {
$("#PTitle").css('background-color','#ff0000');
});
EDIT:
If you have ASPX page
<h5 id="PTitle" runat="server">Test</h5>
Then Code Behind:
PTitle.Style.Add("display", "none");
Depends on when you want to add the Styles. Here are few options.
If you want to add it in design time just add a style attribute as you would for other html elements.
<h5 id="PTitle" style="font-size:12px"><%# Eval("PTitle") %></h5>
If you want to do it from code behind (server side) you need to add the runat="server" attribute to the element first. In this case you won't add the style attribute in design time.
<h5 id="PTitle" runat="server"><%# Eval("PTitle") %></h5>
Then you can access this control in code behind using it's id as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Style.Add("font-size", "12px");
}
}
Or, you could use the Attributes property as follows.
for (int i = 0; i < grdProducts.Rows.Count; i++)
{
HtmlGenericControl PTitle = (HtmlGenericControl)grdProducts.Rows[i].FindControl("PTitle");
if (PTitle != null)
{
PTitle.Attributes.Add("style", "font-size:12px");
}
}
If you need to do this in client side make use you JavaScript/ JQuery.
Okay here's all I needed to solve my problem:
LiteralControl litc=new LiteralControl();
litc.Text = "<style type='text/css'> #PTitle{text-align:right} #PDesc{text-align:right} </style>";
this.Page.Header.Controls.Add(litc);
.displayed1
{
position: fixed;
top: 275px;
right: 341px;
}
<img class="displayed1" src="Images/NewProjectCohesive02.jpg" alt="" />
How can I add a hyperlink of AddnewPage1.aspx to the image? Is it necessary for the image to be in a <form id="form1" runat="server"> tag?
Wrap it in an <a> tag.
<a href="AddnewPage1.aspx">
<img class="displayed1" src="Images/NewProjectCohesive02.jpg" alt="" />
</a>
Modifying the CSS won't be necessary, except to remove the border if you prefer (and most do). Also, given that this appears to be an important navigation link, please be sure to provide alt-text in the name of accessibility.
<asp:HyperLink ID="hpr1" runat="server">
<img src="img/bg-breadcrumbs-homebtn.png" />
</asp:HyperLink>
(Using Asp.net)
I have done something like
<a href='<%#AdUr(DataBinder.Eval(Container.DataItem,"Title"), DataBinder.Eval(Container.DataItem,"AdId"))%>'>
<asp:Image ID="Image1" ImageUrl='<%# Eval("ImageUrl") %>' runat="server" class="img-responsive" title='<%# Eval("Title")%>'/>
</a>
Remember, use single quotes for Evals.
I have a couple divs and they are set up to be sepereate. but when I load the page they all go underneath the first div that is created. So the example below SiteFullControl is the first div, everything just falls underneath here when the page load. any ideas?
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
</div>
<div id="SitePartialControl" >
<partialalbum:partialalbum ID="partialcontrolalbums" runat="server" />
</div>
<div id="SiteViewOnlyAlbums" class="">
<viewonly:viewonly ID="viewonlyalbums" runat="server" />
</div>
<div id="SitePublicAlbums" class="">
<publicalbum:publicalbum ID="publicalbum" runat="server" />
</div>
<div id="SiteFavoriteAlbums" class="">
<favoritealbum:favoritealbum ID="favoritealbum" runat="server" />
</div>
<div id="SiteFriends" class="">
<friends:friends ID="friend" runat="server" />
</div>
<div id="SiteCreateAlbum" class="">
<createalbum:createalbum ID="createalbums" runat="server" />
</div>
Example of whats happen when the page load
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
I checked the css with firebug and it does not have any position for the css.
use this CSS rule, it may work:
display:block;
no more help can be given without accessing CSS properties.