I'm trying to create an Asp.Net page (without razor) to list and show some products from a database. I need image, explanation and PDF path to show from my SQL Server 2008 R2 database.
I have been looking for examples but many of them are about filling tables, not ul elements. I have seen some razor page examples but I have no idea how that works.
Note: I don't want to change this style, because I used some cool bootstrap css hover things. I don't want to mess with that, but if you think it is necessary to change it, then of course I can figure out something.
Code:
<ul class="grid cs-style-5" id="thumbs">
<li>
<figure>
<img class="img-responsive" src="#">
<figcaption>
<h4>Product Name/h4>
<span>Explanation here.</span>
Technical Info
</figcaption>
</figure>
</li>
</ul>
Update:
I figured out how to do what I needed. I am posting here in case someone else needs too. I didn't use asp:repeater but I used DataList. It worked perfectly.
Fixed Code:
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><ul class="grid cs-style-5" id="thumbs"></HeaderTemplate>
<ItemTemplate>
<li>
<figure>
<img class="img-responsive" src='<%# Eval("urun_resim") %>' />
<figcaption>
<h4>Product Name: <%#Eval("urun_isim") %>i</h4> <br />
</figcaption>
</figure>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>
Repeater is good option. I agree with that solution. Even this will help you for responsive design. This is even light weight to load.
Related
I have a repeater that shows a list of albums and each div is wrapped by a <a> tag. Ideally I would be able to click on the image and it would redirect me to the full album.
But what is actually happening that for some reason the <a> tag when spawned by the repeater does not wrap around the divs but instead just appears before the div it should be wrapping. See below...
and my code
<asp:Repeater runat="server" DataSourceID="Sqlds_Albums">
<ItemTemplate>
<div class="col-sm-4">
<a href="\">
<div class="image-card" style="background-image: url('<%# Eval("PhotoID","../Media/Gallery/{0}.jpg") %>')">
<div class="card-text-bottom">
<div class="album-link">
<asp:HyperLink ID="albumLink" Font-Bold="true" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("AlbumID","~/Album.aspx?AlbumID={0}") %>' />
</div>
<div class="album-nophotos">
<asp:Label ID="lbl_NofPhotos" runat="server" Text='<%# Eval("TotalPhotos","{0} Photos") %>'></asp:Label>
</div>
<div class="album-visits">
<asp:Label ID="lbl_NofVisits" ForeColor="#333333" Font-Size="11px" runat="server" Text='<%# Eval("NofVisit","(Visited {0} times)") %>'></asp:Label>
</div>
</div>
</div>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
Rendered HTML
<div class="col-sm-4">
<a href="\">
</a>
<div class="image-card" style="background-image: url('../Media/Gallery/3568.jpg')"><a href="\">
</a>
<div class="card-text-bottom"><a href="\">
</a>
<div class="album-link"><a href="\">
</a><a id="Body_ctl00_albumLink_0" href="Album.aspx?AlbumID=99" style="font-weight:bold;">2017 Photos</a>
</div>
<div class="album-nophotos">
<span id="Body_ctl00_lbl_NofPhotos_0">24 Photos</span>
</div>
<div class="album-visits">
<span id="Body_ctl00_lbl_NofVisits_0" style="color:#333333;font-size:11px;">(Visited 683 times)</span>
</div>
</div>
</div>
What I tried
Used all the asp: hyperlinks, imagebutton, button etc but no luck.
as usual any guidance greatly appriciated.
EDIT
The problem was the hyperlink inside the .album-link div. Removing it fixed the issue but as recommended below will try to use a different approach to a link div.
In a nutshell, you're trying to do this:
<a><div></div></a>
Technically speaking, that's not valid HTML only valid for HTML5+, and not for HTML4. Under HTML4, <div> is a block-level element, <a> is an inline element, and in the strictest, most standards-compliant sense, inline elements are not allowed to contain block level elements. I know it's a pain; I used to do it all the time, too. But modern browsers now enforce this more strictly than they used to.
Since you're looking at album covers that are effectively images, one option is to use an actual img element, instead of setting the background on a div. This new element would fill the contents of the parent div. Then you can use css to overlay your labels on top of the image, and since img is an inline element you can nest that inside of your original <a> element.
If you have your heart set on keeping one div, the best solution I've seen is here:
Make a div into a link
If I had any clout with the W3C, I'd just add a new block-level link element already, or maybe just allow an href attribute on a few existing block-level elements.
Update:
Reading more on this, you might be able to fix this just by changing your DOCTYPE. The symptoms in the question are consistent with a browser treating this as HTML4, rather than HTML5. HTML4 still has the block/inline distinction, but HTML5 allows <a> to be either "flow-content" (block) or "phrasing-content" (inline).
With that in mind, this should be legal as long your browser knows to interpret this as an HTML5 document, rather than HTML4, which you can do by setting a doctype (which you should do anyway). Then the browser should stop needing to mangle your HTML to produce a compliant DOM.
After inserting an image into my template, a set of boxes further down the page seem to have drifted out of sync with the rest of the template and I'm baffled as to why. I have tried messing with certain padding and margins and can't seem to keep the image along with the correct alignment.
The Code
<div id="SuperContentsWrapper">
<div id="SuperContents">
<div id="SuperContentsSub">
<h1>
<div align="center">
<font color="#A35E41"><em><font color="#000000">Batman Vs Superman Boys' T-Shirt</font></em></strong></font>
</div>
</h1>
<p>
<div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
<p>
<div align="center">
<font size="3">Great for all occasions, this Batman Boys T-Shirt will receive a great reception anywhere. This T-Shirt looks and feels great and is made with 100% innovative SofSpun Cotton and has a longer-line for a more fashionable looking T-Shirt.</font>
</div>
<p> </p>
<div align="center">Brand: Fruit Of The Loom </div>
The image causing the issue is: <div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
Please let me know if there is anymore code needed to understand why this is happening!
To expand my answer in the comments, the lack of a closing </div> tag after the image meant that the browser engine would render everything following that unclosed <div> as being inside that <div> until a matching closing tag was found, which will cause damage to the entire visual layout thereon downwards.
I'm trying to integrate CSS pagination into a thumbnail gallery I have set up on my site. So far, I haven't found any tutorials pointing to how to customize pagination into a existing script.
From what I see out there, there are a lots of great CSS pagination solutions. Here's a page with lots of pagination stylings (no plugins, integration seems to be very general so any will do). I've downloaded a few in hope that a tutorial directs me to what I want but have had no luck so far.
My code is taken from Pure CSS image gallery. I had a look at integrating Gallerific but found the instructions difficult, and so I'm looking for a pure CSS solution.
At first I wanted to used multiple div's for the same gallery, much like Gallerific, only to find JavaScript (or some kind of jQuery solution) would be needed to connect the links necessary for the gallery to work like that.
Currently, the gallery is contained within one div (the way it has to be in order to work). I'm looking at adding pagination just on the thumbs e.g. "...<a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" />
..."
And here for purpose of the post is my code so far:
<div id="gallerycenter">
<ul id="gallery">
<li>
<a href="#prev01"><img src="images/img/thmbs/01.jpg" alt="" class="thumb" />
<span><img src="images/img/01.jpg" id="prev01" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev02"><img src="images/img/thmbs/02.jpg" alt="" class="thumb" />
<span><img src="images/img/02.jpg" id="prev02" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev03"><img src="images/img/thmbs/03.jpg" alt="" class="thumb" />
<span><img src="images/img/03.jpg" id="prev03" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev04"><img src="images/img/thmbs/04.jpg" alt="" class="thumb" />
<span><img src="images/img/04.jpg" id="prev04" class="showcase" alt="" /></span></a>
</li>
<li>
<a href="#prev05"><img src="images/img/thmbs/05.jpg" alt="" class="thumb" />
<span><img src="images/img/05.jpg" id="prev05" class="showcase" alt="" /></span></a>
</li>
</ul>
</div>
The only thing I have thought of but haven't tried is changing the ".thumb" to ".pagination" in order to start the "pagination" in a class form but still, that doesn't give me enough to go on
Can anyone help me piece together the possibilities or confirm that I'm crazy and I'm asking way too much of CSS?
You've misunderstood the link you posted. It is providing style only, not functionality, because CSS does not provide this functionality. Pagination is not a matter of adding style to a page, it is achieved programatically, either server-side or in client-side JavaScript. You should pick an existing jQuery pagination plugin and use it, you will not find a solution which uses only CSS to provide pagination as that is fundamentally not what CSS is for.
What I want to do is to split-up the globalnavigation bar on the sharepoint 2010 so I can control what menu-items should be floated to the left or right of the bar.
Is there a way to do this without a complete customized version of it, so I only have to edit the current one. Or do I actually have to make a complete new one?
What I have tried so far is just copying all of the UL > LI's there's used to display the menu-items like this:
<div class="s4-tn">
<div class="menu horizontal menu-horizontal">
<ul class="static">
<li class="static dynamic-children">
<a href="#" CssClass="static dynamic-children menu-item">
<span class="additional-background">
<span class="menu-item-text">Custom Dropdown</span>
</span>
</a>
<ul class="dynamic">
<li class="dynamic">
<a href="#" class="dynamic menu-item">
<span class="additional-background">
<span class="menu-item-text">Test subsite</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
But it doesn't seem to trigger the dropdown functionality. Might just be a naive attempt.
Any links to guides or tutorials about this subject would be a great help.
For future reference, here's the content from the linked blogpost.
This uses an asp:Repeater instead of a sharepoint:AspMenu as the former allows much cleaner html and better styling. Also I've created several datasources on the masterpage which return the correct items I need to display.
<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">
<HeaderTemplate>
<ul id="main_menu_ul" class="">
</HeaderTemplate>
<ItemTemplate>
<li><a href="<%# Eval("Url")%>" class="link">
<%# Eval("Title")%></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:SiteMapDataSource SiteMapProvider="CombinedNavSiteMapProvider" ShowStartingNode="false"
StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
EnableViewState="true" ID="selectedSiteMap" runat="server" />
I found out which datasources to use with a little help of this post: http://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/
They are listed for SharePoint 2007, but most work for 2010 also.
Using several repeaters and datasources on the page you can create a very clean menu. Along with some javascript and css styling you can create every menu you want.
If I unput a certain piece html into my page, it seems to be truncating:
<div id="slideshow">
<img style="cursor: pointer;" src="files:img/slideshow/3.png" id="left_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/1.png" id="center_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/2.png" id="right_slide" alt=""/>
</div>
It all looks good in the preview, but when I save it it becomes:
<div id="slideshow">
<img style="cursor: pointer;" src="http://local.drupal.com/sites/default/files/img/slideshow/3.png" id="left_slide" alt="" />
</div>
I'm at a loss! I'm not using any nasty WYSIWYG editors and the input format is full html. The second code example indicates that I'm using the path filter module but I've also tried disabling that and resaving. It still truncates.
I'm using Drupal 6.19.
You certainly print the teaser only.
To publish to the front page the complete node Go to Administer > Content Management > Post Settings > Choose 'unlimited' from the 'length of trimmed post' select box.
You can also manually controlling the teaser break point by inserting:
<!--break-->
If you use a views you can control if you want to show the complete node or the teaser in the settings of the view.