?
Solved

ul list both horizontal and vertical

Posted on 2010-09-12
3
Medium Priority
?
608 Views
Last Modified: 2013-12-17
Hi.

How can I make a ul list both horizontal and vertical from a database in a datalist like this:
id1        id2        id3
id4        id5        id6
id7        id6        id9
0
Comment
Question by:bongii
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 5

Expert Comment

by:pschrama
ID: 33656234
If I take your question literally, you could use a UL list in the following way.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UnnumberedList.aspx.cs"
    Inherits="Experimentation.Pages.UnnumberedList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .bulletList
        {
            list-style-type: none;
        }
        .bulletList li
        {
            float: left;
            margin-left: 10px;
        }
        .bulletList li.firstInRow
        {
            clear: both;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:BulletedList ID="BulletedList1" runat="server" CssClass="bulletList">
        </asp:BulletedList>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Experimentation.Pages
{
    public partial class UnnumberedList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 0; i < 9; i++)
            {
                ListItem li = new ListItem("id" + (i + 1).ToString());

                if (i % 3 == 0)
                    li.Attributes.Add("class", "firstInRow");

                BulletedList1.Items.Add(li);
            }
        }
    }
}

Open in new window

0
 
LVL 5

Accepted Solution

by:
pschrama earned 2000 total points
ID: 33656241
If you mean an actual datalist though, which would make more sense, it would look like this (with generated data rather than database access as an example):
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataList.aspx.cs" Inherits="Experimentation.Pages.DataList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
        <ItemTemplate><%# Container.DataItem %></ItemTemplate>
        </asp:DataList>
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Experimentation.Pages
{
    public partial class DataList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // build example data
            List<string> words = new List<string>();
            for (int i = 0; i < 9; i++)
            {
                words.Add("id" + (i + 1).ToString());
            }

            // bind data
            DataList1.DataSource = words;
            DataList1.DataBind();
        }
    }
}

Open in new window

0
 

Author Comment

by:bongii
ID: 33751862
pschrama: Sorry for my late response time, didnt see your answer.
I will check it out tonight, thanks :)
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question