Creating a template

1 posts, 0 answers
  1. Antony
    Antony avatar
    10 posts
    Member since:
    Aug 2010

    Posted 26 Jul 2011 Link to this post

    I have created a page that consumes an rss feed. I have six boxes that display the feeds, I have attached a screenshot, there are three at the top and three below.
    I have used the following markup:
    <div id="allNewsTop" class="allNews">
        <div id="newsDiv1" class="newsItem" runat="server">
            <asp:Image ID="Image1" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink1" runat="server"></asp:HyperLink>
            <p id="desc1" runat="server"></p>
        </div>
        <div id="newsDiv2" class="newsItem" runat="server">
            <asp:Image ID="Image2" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink2" runat="server"></asp:HyperLink>
            <p id="desc2" runat="server"></p>
        </div>
        <div id="newsDiv3" class="newsItem" runat="server">
            <asp:Image ID="Image3" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink3" runat="server"></asp:HyperLink>
            <p id="desc3" runat="server"></p>
        </div>
    </div>
    <div id="allNewsBottom" class="allNews">
        <div id="newsDiv4" class="newsItem" runat="server">
            <asp:Image ID="Image4" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink4" runat="server"></asp:HyperLink>
            <p id="desc4" runat="server"></p>
        </div>
        <div id="newsDiv5" class="newsItem" runat="server">
            <asp:Image ID="Image5" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink5" runat="server"></asp:HyperLink>
            <p id="desc5" runat="server"></p>
        </div>
        <div id="newsDiv6" class="newsItem" runat="server">
            <asp:Image ID="Image6" runat="server" />
            <br />
            <asp:HyperLink ID="HyperLink6" runat="server"></asp:HyperLink>
            <p id="desc6" runat="server"></p>
        </div>
    </div>
    I have the following CSS:
    .newsItem
    {
        width:220px;
        height:225px;
        float:left;
        margin-left:5px;
        margin-top:5px;
        border: 1px solid white;
        padding-left:5px;
    }
    .allNews
    {
        padding-left:8px;   
    }
    .searchLists
    {
        width:689px;
        height:50px;
        margin-left:13px;
    }
    #sourceSearch
    {
        width:335px;
        padding-left:5px;
        float:left;
        padding-top:2px;
    }
    #teamSearch
    {
        width:335px;
        padding-left:5px;
        padding-top:2px;
        float:right;
    }
    .newsItem img
    {
        padding-left:10px;
        padding-top:10px;
        padding-bottom:10px;
        width:130px;
        height:70px;
    }
    .newsItem a
    {
        padding-bottom:10px;
        padding-right:5px;
    }
    .newsItem p
    {
        padding-right:5px;
    }


    It then dawned on me to use a list view with paging so that i can display further feeds as at the moment the page can only display the first six feeds retrieved.

    I have attempted using the radlistview but i dont know how to make the page have two rows of three boxes, the display always puts 6 boxes in a single row.

    Do i need to use nested listviews? Not sure how that works.

    Any help isappreciated.
Back to Top