473,594 Members | 2,663 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS - Multicolumn lists

I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?
Jul 20 '05 #1
7 3630
Chris Stout wrote:
I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?


Small example with fixed width in px ignoring accessibility here for a
moment. We have the following unordered list:

<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
</ul>

That is the markup. Now it is time to style:

ul{
margin:0;
padding:0;
list-style:none;
width:600px;
}
ul li{
margin:0;
padding:0;
display:block;
float:left;
width:200px;
}

That is it, I hope :-)
--
Anne van Kesteren
<http://www.annevankest eren.nl/>
Jul 20 '05 #2
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.


You mean you want a list to go down the screen, and then start again
at the top of the next column? Quite a bit more difficult then you
might imagine. You can position different elements in different
columns on a graphical browser, but not the same e.g. ul element that way.

The only thing you can try is to break up the list into several lists,
and float them left. But if the text is really one list, then you
absolutely should not mark it up as anything but one list. IMHO, of
course.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #3
Brian wrote:
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.

You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.


element{
float:top; /* [1] */
}

I want CSS3 now!

[1] <http://www.w3.org/TR/2002/WD-css3-box-20021024/#float>

--
Anne van Kesteren
<http://www.annevankest eren.nl/>
Jul 20 '05 #4
*Chris Stout*:

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists.


I've a test page for this at
<http://webdesign.criss ov.de/temp/multicol-lists>, the English original is
at <http://www.fu2k.org/alex/css/cssjunk/ListColumns.mht ml>.

--
"Show me a sane man and I will cure him." -- C.G. Jung
Jul 20 '05 #5
Below is an example from a book which I was playing around with.
I was unfortunately unable to determine how to vary the column lengths so
that the TOP of page links would correspond to the column text lengths.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>U.S. History: Declaration of Independence</title>
<style type="text/css">
body, p, li, address { font-family: "Times New Roman", Times, serif;
font-size: 16px; }

body { background: #fc9; color: black; margin: 10px; padding: 0 0 10px 0; }

div.top { background: url(blackmarb.j pg); background-color: #039; color:
black; padding-left: 15px; padding-right: 15px; margin-bottom: 0; }

div.main { width: 750px; }

div.left { position: absolute; left: 15px; top: 152px; background:
url(paper2.gif) ; background-color: #cfc; color: black; width: 240px; height:
1665px; text-align: left; padding: 5px 0; text-align: left; margin-right:
1.5%; }

div.center { position: absolute; top: 152px; left: 15px; background:
url(paper2.gif) ; background-color: #cfc; color: black; width: 240px; height:
1665px; padding: 5px 0; text-align: left; margin-left: 250px; margin-right:
auto; }

div.right { position: absolute; left: 500px; top: 152px; background:
url(paper2.gif) ; background-color: #cfc; color: black; width: 240px; height:
1665px; padding: 5px 0; text-align: left; margin-left: 2%; margin-right:
0; }

div.bottompos { position: absolute; left: 15px; top: 1840px; }

div.bottom { position: relative; bottom: 10px; width: 740px; background:
url(tanback.jpg ); background-color: #cfc; color: navy; text-align: center;
margin-top: 10px; padding-bottom: 5px; }
div.pad { padding: 0 5px 0 10px}
div.padtop { padding-top: 0; padding-bottom: 5px; }

div#leftlink { position: absolute; top: 1785px; left: 25px; }
div#leftlink p { text-indent: 0; }

div#ctrlink { position: absolute; top: 1785px; left: 275px; }
div#ctrlink p { text-indent: 0; }

div#rightlink { position: absolute; top: 1785px; left: 525px; }
div#rightlink p { text-indent: 0; }

a { color: blue; background: transparent; }

h1 { color: #fc0; background-color: transparent; text-align: center;
border-bottom: white 1px solid; padding-top: 10px; padding-bottom: 10px;
margin-top: 0;}
h2 { color: #cf9; background-color: transparent; text-align: center;
padding-bottom: 0; }

p { margin-top: 0; margin-bottom: 0; text-indent: 1.5em; }
p.first { text-indent: 0; }

ul { margin-top: 0; margin-bottom: 0; }
li { margin-left: -2em; list-style-position: inside; text-indent: 1em; }

address { padding-top: 1%; padding-bottom: 1%; }

span.drop { float: left; font-size: 40px; font-weight: bold; color: maroon;
background-color: transparent; margin-top: -3px; margin-bottom: -5px; }

</style>
</head>
<body>

<div class="main">
<div class="top">
<div class="padtop">
<h1>The Declaration of Independence</h1>
<h2>In Congress, July 4, 1776</h2>
</div>
</div>

<div class="left">
<div class="pad">

<a name="top"></a>
<p class="first">< span class="drop">W</span>hen in the Course of human
events, it becomes necessary for one people to dissolve the political bands
which have connected them with another, and to assume among the powers of
the earth, the separate and equal station to which the Laws of Nature and of
Nature's God entitle them, a decent respect to the opinions of mankind
requires that they should declare the causes which impel them to the
separation.</p>

<p>We hold these truths to be self-evident, that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights, that
among these are Life, Liberty, and the pursuit of Happiness. That to secure
these rights, Governments are instituted among Men, deriving their just
powers from the consent of the governed. That whenever any Form of
Government becomes destructive of these ends, it is the Right of the People
to alter or to abolish it, and to institute new Government, laying its
foundation on such principles and organizing its powers in such form, as to
them shall seem most likely to effect their Safety and Happiness.</p>

<p>Prudence, indeed, will dictate that Governments long established should
not be changed for light and transient causes; and accordingly all
experience hath shewn, that mankind are more disposed to suffer, while evils
are sufferable, than to right themselves by abolishing the forms to which
they are accustomed.</p>

<p>But when a long train of abuses and usurpations, pursuing invariably the
same object evinces a design to reduce them under absolute Despotism, it is
their right, it is their duty, to throw off such Government, and to provide
new Guards for their future security.</p>

<p>Such has been the patient sufferance of these Colonies; and such is now
the necessity which constrains them to alter their former Systems of
Government. The history of the present King of Great Britain is a history of
repeated injuries and usurpations, all having in direct object the
establishment of an absolute Tyranny over these States. To prove this, let
Facts be submitted to a candid world.</p>

<p>He has refused his Assent to Laws, the most wholesome and necessary for
the public good.</p>

<p>He has forbidden his Governors to pass Laws of immediate and pressing
importance, unless suspended in their operation till his Assent should be
obtained, and when so suspended, he has utterly neglected to attend to
them.</p>

<p>He has refused to pass other Laws for the accommodation of large
districts of people, unless those people would relinquish the right of
Representation in the Legislature, a right inestimable to them and
formidable to tyrants only.</p>

<p>He has called together legislative bodies at places unusual,
uncomfortable, and distant from the depository of their public Records, for
the sole purpose of fatiguing them into compliance with his measures.</p>
</div>
</div>

<div id="leftlink">
<p>Return to <a href="#top">Top </a>.</p>
</div>

<div class="center">
<div class="pad">

<p>He has dissolved Representative Houses repeatedly, for opposing with
manly firmness his invasions on the rights of the people.</p>

<p>He has refused for a long time, after such dissolutions, to cause others
to be elected; whereby the Legislative powers, incapable of Annihilation,
have returned to the People at large for their exercise; the State remaining
in the meantime exposed to all the dangers of invasion from without, and
convulsions within.</p>

<p>He has endeavoured to prevent the population of these States; for that
purpose obstructing the Laws for Naturalization of Foreigners; refusing to
pass others to encourage their migrations hither, and raising the conditions
of new Appropriations of Lands.</p>

<p>He has obstructed the Administration of Justice, by refusing his Assent
to Laws for establishing Judiciary powers.</p>

<p>He has made Judges dependent on his Will alone, for the tenure of their
offices, and the amount and payment of their salaries.</p>

<p>He has erected a multitude of New Offices, and sent hither swarms of
Officers to harass our people, and eat out their substance.</p>

<p>He has kept among us, in times of peace, Standing Armies, without the
consent of our legislatures.</p>

<p>He has affected to render the Military independent of and superior to the
Civil power.</p>

<p>He has combined with others to subject us to a jurisdiction foreign to
our constitution and unacknowledged by our laws; giving his Assent to their
Acts of pretended Legislation:</p>

<ul>
<li>For protecting them by a mock Trial from punishment for any Murders
which they should commit on the Inhabitants of these States:
<li>For cutting off our Trade with all parts of the world:
<li>For imposing Taxes on us without our Consent:
<li>For depriving us in many cases of the benefits of Trial by Jury:
<li>For transporting us beyond Seas to be tried for pretended offences:
<li>For abolishing the free System of English Laws in a neighbouring
Province, establishing therein an Arbitrary government, and enlarging its
Boundaries so as to render it at once an example and fit instrument for
introducing the same absolute rule into these Colonies:
<li>For taking away our Charters, abolishing our most valuable Laws and
altering fundamentally the Forms of our Governments:
<li>For suspending our own Legislatures, and declaring themselves invested
with power to legislate for us in all cases whatsoever.
</ul>

<p>He has abdicated Government here by declaring us out of his Protection
and waging War against us.</p>

<p>He has plundered our seas, ravaged our Coasts, burnt our towns, and
destroyed the lives of our people.</p>
</div>
</div>

<div id="ctrlink">
<p>Return to <a href="#top">Top </a>.</p>
</div>

<div class="right">
<div class="pad">

<p>He is at this time transporting large Armies of foreign Mercenaries to
complete the works of death, desolation and tyranny, already begun with
circumstances of cruelty and perfidy scarcely paralleled in the most
barbarous ages, and totally unworthy the Head of a civilized nation.</p>

<p>He has constrained our fellow Citizens taken Captive on the high Seas to
bear Arms against their Country, to become the executioners of their friends
and Brethren, or to fall themselves by their Hands.</p>

<p>He has excited domestic insurrections amongst us, and has endeavoured to
bring on the inhabitants of our frontiers, the merciless Indian Savages,
whose known rule of warfare is an undistinguished destruction of all ages,
sexes and conditions.</p>

<p>In every stage of these Oppressions We have Petitioned for Redress in the
most humble terms. Our repeated Petitions have been answered only by
repeated injury. A Prince, whose character is thus marked by every act which
may define a Tyrant, is unfit to be the ruler of a free people.</p>

<p>Nor have We been wanting in attentions to our British brethren.</p>

<ul>
<li>We have warned them from time to time of attempts by their legislature
to extend an unwarrantable jurisdiction over us. We have reminded them of
the circumstances of our emigration and settlement here.
<li>We have appealed to their native justice and magnanimity, and we have
conjured them by the ties of our common kindred to disavow these
usurpations, which would inevitably interrupt our connections and
correspondence.
</ul>

<p>They too have been deaf to the voice of justice and of consanguinity. We
must, therefore, acquiesce in the necessity, which denounces our Separation,
and hold them, as we hold the rest of mankind, Enemies in War, in Peace
Friends.</p>

<p>We, therefore, the Representatives of the United States of America, in
General Congress, Assembled, appealing to the Supreme Judge of the world for
the rectitude of our intentions, do, in the Name, and by the authority of
the good People of these Colonies, solemnly publish and declare.</p>

<p>That these United Colonies are, and of Right ought to be Free and
Independent States; that they are Absolved from all Allegiance to the
British Crown, and that all political connection between them and the State
of Great Britain is and ought to be totally dissolved; and that as Free and
Independent States, they have full Power to levy War, conclude Peace,
contract Alliances, establish Commerce, and to do all other Acts and Things
which Independent States may of right do.</p>

<p>And for the support of this Declaration, with a firm reliance on the
protection of Divine Providence, we mutually pledge to each other our Lives,
our Fortunes, and our sacred Honor.</p>
</div>
</div>

<div id="rightlink" >
<p>Return to <a href="home.html ">Home</a>.</p>
</div>

<div class="bottompo s">
<div class="bottom">
<address>
John Smith<br>
E-Mail: <a href="mailto:js ****@us-history.com">js ****@us-history.com</a><br>
Web Address: <a
href="http://www.us-history.com/">http://www.us-history.com/</a>
</address>
</div>
</div>

</div>
</body>
</html>
Jul 20 '05 #6
On 17 Dec 2003 06:11:35 -0800, ch***@williamsb urg.com (Chris Stout)
wrote:
I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?


You might like to look at
http://www.members.iinet.net.au/~abell1/oboe.htm

and associated pages which have the alphabet in three columns + a
blank, and another list below.
Please note that I can't make it work reliably with MSIE for the Mac,
though it does work in MSIE 5.5, Opera 7.23, Mozilla 1.3, and Netscape
6.2

Regards, Alex

Jul 20 '05 #7
Anne van Kesteren <ma**@annevanke steren.nl> wrote in message news:<br******* ***@reader10.wx s.nl>...
Brian wrote:
Chris Stout wrote:

problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.

You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.


element{
float:top; /* [1] */
}

I want CSS3 now!


Hell, I want CSS2 now.
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
2612
by: kackson | last post by:
Hi. I attempted to create a multicolumn listbox for my web based aspx application. I search the net, all I get is something like listview or I need to have system.windwos.form. But for the goodness of my brain, I cant seem to find it anywhere and just not able to do a "using System.WIndows.form". WHere on earth can I get this work? Please help! I just need a simple multicolumn listbox. Why is this so difficult? :(
1
5047
by: zoneal | last post by:
Hi I have a form with a listbox, two comboboxes and two Radiobuttons. What I want to do is make a selection from both comboboxes and either Radiobutton and display these three elements across the top of the listbox eg. 5, 10, 'Go' As I need multiple rows of data I have a button to 'Load' this to the listbox. I'm stuck though as I'm having difficulty loading this correctly. Question: Woulkd I be better off with a datagrid for this job,...
8
2748
by: Jernej Kos | last post by:
I have a multicolumn index on two columns. If i use the columns in ORDER BY like this: ORDER BY col1, col2; The index is used. But, if one column is sorted DESC it is not used: ORDER BY col1 DESC, col2; How can i make this work ? Regards,
5
3060
by: Thomas F.O'Connell | last post by:
We've got a table that has a definition as follows: CREATE TABLE linking_table ( fk int8 REFERENCES source_table( pk1 ), value int8, PRIMARY KEY( fk1, value ) ); I would've thought that the multicolumn primary key would behave as a multicolumn index is supposed to behave per
1
2032
by: Thomas Yagel | last post by:
I have a situtation where a particular table includes a timestamp column and a id column. The query I am working with right now filters based on timestamp and orders based on ID. I have not found enough information about how multicolumn indexes actually work to determine if one will help me in this case, but I think that it might. Right now the index that I have on timestamp is not used because the Primary Key(ID) index is chosen for...
7
6112
by: Paul Bromley | last post by:
How can I use this please - I need 2 columns. I have been having difficulty finding info on this and the 2005 Treeview control today. Many thanks for any links or info, Paul Bromley
2
2034
by: dev.amit | last post by:
Hello Friends I am a new bee to the world of vb. I have an appication in the MS Access and now i have to convert it to the Vb. I am having problem creating multicolumn Listbox in the vb form. I have dont it quite simply with ease in Access but here i am blank. 1.I want to show Three column in the list box. 2. I would populate this with the help of a query which picks data from two tables
5
17733
by: WRH | last post by:
Hello I want to have a multicolumn listbox. I never used one before so I looked at a Help example. I set the multicolumn property and the column width and tested with this example... this.listBox3.Items.AddRange(new object { "Item 1, column 1", "Item 2, column 1", "Item 3, column 1",
3
5636
balabaster
by: balabaster | last post by:
Hey guys and gals, I'm not sure if this is the simplest way to do this or if someone can throw any other ideas out there. I'm looking to build a treeview inside a listbox...or have a multicolumn treeview. Having done some research it seems there was some rather extensive and laborious methods for achieving such an effect in VB6 but none of them satisfactory and the only method I can find that looks anywhere near like it might possibly be...
0
8259
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8377
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8016
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
6669
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
5836
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
3871
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3905
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1487
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1218
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.