Solved

ul list both horizontal and vertical

Posted on 2010-09-12

1 solution

607 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

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

Join The Community

3 Comments

LVL 5

Expert Comment

by:pschrama

ID: 336562342010-09-12

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

LVL 5

Accepted Solution

by:pschrama

pschrama earned 500 total points

ID: 336562412010-09-12

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

Author Comment

by:bongii

ID: 337518622010-09-24

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

Featured Post

Question has a verified solution.

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

SQL CLR .Net Integration in 2015 (year not product version)

Article by: Éric

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…

.NET Programming

DRY Exception Handling with PostSharp

Article by: Alexandre

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.

Webinar - Percona Software News and Roadmap Update

Video by: Percona

Come and listen to Percona CEO Peter Zaitsev discuss what’s new in Percona open source software, including Percona Server for MySQL (https://www.percona.com/software/mysql-database/percona-server) and MongoDB (https://www.percona.com/software/mongo-…

Percona

NetCrunch network monitor live walk-through

Video by: AdRem

NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…