Link to home
Start Free TrialLog in
Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa

asked on

Displaying list items side by side

Hi There

I would like to display list items side by side.

The items must be displayed 2 by 2 until there is 4 rows then right the new records to the side of it

rec rec rec rec rec
rec rec rec rec rec
rec rec rec rec rec
rec rec rec rec rec

My problem is that I have created a LI thats displays inline with float left but when I have more than 8 records 4x2 then the rest of the records are written beneath it. So my div is expanding down not to the right.

I want to display 8 records on the screen then I am going to have a Jquery scroller to the left or right that will display the rest of the records.

ASPX


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="showcase.ascx.cs" Inherits="Controls_showcase" %>

 
<div class="showCaseWrapper">

    <div class="showcaseHeading">
        <h2><asp:Label ID="lblShowcase" runat="server">Showcase</asp:Label></h2>
    </div>

    <div class="clear"></div>
   <div class="showcaseContent">
     
      <div class="showcaseSlider"><asp:Literal ID="litContent" runat="server"></asp:Literal></div>
      
   </div>

   <div class="showcaseNav tabs">
	    
	    <ul class="nav tabs">
		    <li id="liShowcase" class="selected" runat="server">
                <asp:LinkButton ID="hpShowCase" class="lbNav"  runat="server" onclick="hpShowCase_Click" ><span></span><strong>Showcase</strong></asp:LinkButton>
            </li>
		    <li id="liDesign" class="" runat="server">
                <asp:LinkButton ID="hpDesign" class="lbNav"  runat="server" onclick="hpDesign_Click" ><span></span><strong>Design</strong></asp:LinkButton>
            </li>
		    <li id="liOutdoor" class="" runat="server">
                <asp:LinkButton ID="hpOutdoor" class="lbNav"  runat="server" onclick="hpOutdoor_Click" ><span></span><strong>Event</strong></asp:LinkButton>
            </li>
		    <li id="liPrint" class="" runat="server">
                <asp:LinkButton ID="hpPrint" class="lbNav"  runat="server" onclick="hpPrint_Click" ><span></span><strong>Print</strong></asp:LinkButton>
            </li>
		    <li id="liRadio" class="" runat="server">
                 <asp:LinkButton ID="hpRadio" class="lbNav"  runat="server" onclick="hpRadio_Click" ><span></span><strong>Radio</strong></asp:LinkButton>
            </li>
		    <li id="liTV" class="" runat="server">
                 <asp:LinkButton ID="hpTV" class="lbNav"  runat="server" onclick="hpTV_Click" ><span></span><strong>TV</strong></asp:LinkButton>
            </li>
            <li id="liDigital" class="" runat="server">
                 <asp:LinkButton ID="hpDigital" class="lbNav"  runat="server" onclick="hpDigital_Click" ><span></span><strong>Digital</strong></asp:LinkButton>
            </li>
	    </ul>
    </div>

 
</div>

Open in new window




CS

private void PopulateData(IQueryable<XMLCampaign> CampaignData)
    {

       
        string strData = "";

        strData += "<ul class=\"ShowcaseTable\">";

       int iCounter = CampaignData.Count();

        foreach (var item in CampaignData)
        {
            string description = item.Client;

            strData += "<li class=\"ShowcaseCell\"><img  width=\"201px\" height=\"128px\" src=\"media/" + item.ThumbPicture + "\" alt=\"" + item.Client.ToString() + "\" title=\"" + item.Client.ToString() + "\"></a></li>";

           
        }


        strData += "</ul>";

        litContent.Text = strData;
    }

Open in new window


CSS

/* ShowCase */


.showCaseWrapper
{
    width:660px;
    height:700px;
}
.showcaseHeading
{
}

.showcaseContent
{
    width:500px;
    height:600px;
    float:left;
    overflow:hidden;
}

.showcaseNav
{
    float: right;
    width:150px;
    padding-left:10px;
   
}

.lbNav
{
    
}

.showcaseSlider
{
   
    height:600px;
   
   
}


.ShowcaseTable
{
   
   height:600px;
   padding-left:10px;
   padding-bottom:20px;
   
}

.ShowcaseCell
{
   
    padding:10px;
    float:left;
    display:inline;
   
}

Open in new window

/* ShowCase */


.showCaseWrapper
{
    width:660px;
    height:700px;
}
.showcaseHeading
{
}

.showcaseContent
{
    width:500px;
    height:600px;
    float:left;
    overflow:hidden;
}

.showcaseNav
{
    float: right;
    width:150px;
    padding-left:10px;
   
}

.lbNav
{
    
}

.showcaseSlider
{
   
    height:600px;
   
   
}


.ShowcaseTable
{
   
   height:600px;
   padding-left:10px;
   padding-bottom:20px;
   
}

.ShowcaseCell
{
   
    padding:10px;
    float:left;
    display:inline;
   
}

Open in new window

Avatar of ienaxxx
ienaxxx
Flag of Italy image

try with overflow scroll...
Avatar of Stanton_Roux

ASKER

Overflow scroll just creates a vertical scroll bar.
I will be doing the scrolling usng Jquery animate.

But The items are still displaying below each other not next to each other
ASKER CERTIFIED SOLUTION
Avatar of Britt Thompson
Britt Thompson
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
... or you can use min-width, instead of width ...

the float: left is goung to send li items next to each other, doesn't it?