Databases
StackOverflow2013
Postsdbo
POGallery design with hr after every four items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGallery design with hr after every four items
    text
    copied!<p>I need to design a gallery as show in the image below. So far i have completed it but i am facing design issue.</p> <p>I need to show four items in a container of width 800 pixels with each div padding on right and bottom plus border-bottom:1px.</p> <p><img src="https://i.stack.imgur.com/SkILZ.png" alt="enter image description here"></p> <p>Assuming page 4 has only one Item then it shows up as. i am not sure how to design it in such a way so that i can have line after every four elements &amp; if the last page has 1,2,3 items then the line should be across the whole width not just under that item. The way i have it i don't think it is possible. I am not sure how to add a horizontal line after every 4th item.</p> <p>I am doing this in asp.net using repeater control.</p> <p>I would appreciate a pointer.</p> <p>My code </p> <pre><code> &lt;asp:Repeater ID="rptVideoGallery" runat="server" &gt; &lt;ItemTemplate&gt; &lt;div class="video-wrapper"&gt; &lt;asp:HyperLink ID="hylnkvideo" CssClass="youtube" NavigateUrl='&lt;%# getURL(Eval("VID"), Eval("YoutubeID")) %&gt;' runat="server"&gt; &lt;div class="video-image-wrapper"&gt; &lt;asp:Image ID="imgvideo" ImageUrl='&lt;%# getImagePath(Eval("thumbnail"), Eval("YoutubeID")) %&gt;' AlternateText='&lt;%# getTitle(Eval("Title")) %&gt;' runat="server" CssClass="vthumbnail" /&gt; &lt;/div&gt; &lt;div class="playVideo"&gt; &lt;asp:Image ID="imgPlay" runat="server" ImageUrl="~/images/playVideo.png" BorderWidth="0" /&gt; &lt;/div&gt; &lt;div class="video-title"&gt; &lt;asp:Label ID="lblTitle" CssClass="vname" runat="server" Text='&lt;%#Eval("Title") %&gt;'&gt;&lt;/asp:Label&gt; &lt;asp:Label ID="lblDate" CssClass="vdate" runat="server" Text='&lt;%# Eval("Date") %&gt;'&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;/asp:HyperLink&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/asp:Repeater&gt; </code></pre> <p><strong>Update</strong>: Other idea i have to add hr tag after every 4th item &amp; remove boder from all items... </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload