8 replies [Last post]
theotigno
Offline
newbie
Phoenix, AZ
Last seen: 16 years 41 weeks ago
Phoenix, AZ
Joined: 2004-04-12
Posts: 6
Points: 0

Hello everyone. Newbie question here.

I'm trying to create a table grid using just LIs, and I'm having some problems on getting the widths to line-up:

http://wwwdev.bluesquarestudios.com/theoDev/test.html

I've tried adding widths to various fields, but I haven't had much success. Any help would be greatly appreciated. Thanks.

theo

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Grid Using LI's

This CSS may get you closer:

body {
	margin: 0;
	padding: 0;
}

/* meeting-grid */
#meeting-grid ul {
	margin-left: 0;
	padding-left: 0;
	display:block;
	width:28em;
} 
#meeting-grid ul li {
	display: block;
	float:left;
	border-left:1px solid #fff;
	padding: .1em .5em;
	list-style: none;
	text-align:right;
	background:#ccc;
}
/* meeting-one */
#meeting-one ul {
	background:#ccc;	
} 
#meeting-one ul li {
	list-style: none;
	width:3.5em;
	text-align:center;
}
/* meeting-two */
#meeting-two ul {
	background:#aaa;	
} 
#meeting-two ul li {
	margin-left: 0;
	list-style: none;
	width:3.5em;
	background:#dedede;
}
but by defining your ul as a block with a fixed width, you make the divs redundant. In order to be able to specify widths the element has to be a block - inline elements cannot have width properties, if the list items are blocks, they will wrap, so you have to float them. I have specified a width so that all the added padding and borders will not exceed the allotted width for the #meeting-grid UL.

Play around with this, anyhow - but check your HTML as well, I think you will find the divs are redundant to your needs.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

theotigno
Offline
newbie
Phoenix, AZ
Last seen: 16 years 41 weeks ago
Phoenix, AZ
Joined: 2004-04-12
Posts: 6
Points: 0

Thanks for the response

DCElliott,

Thanks for the response. I'll try to mess around with floating divs to see if I can get the desired effect.

Theo

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Grid Using LI's

Just a word of warning - if you try to create tables out of divs, you end up using as much code as for a table. If you are presenting tabular data, a table is actually semantically the most appropriate element to contain and display the information. I thought there was some reason to be using the unordered list element to fulfill some other requirement.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 1 week ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Grid Using LI's

Tables from divs are perfectly possible and, I think, easier to follow.
Though they do take a bit of setting up.

I have converted phpBB to a totally table free template just as an exercise 'to see if it was possible'.
http://portal.portland.co.uk/forum
(Some of the style is still embeded in the html as the template was taken up before it was completed.)

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

theotigno
Offline
newbie
Phoenix, AZ
Last seen: 16 years 41 weeks ago
Phoenix, AZ
Joined: 2004-04-12
Posts: 6
Points: 0

Grid Using LI's

DCElliott,

Actually, the reason why we're trying to develop a grid using LI's is because we're giving our clients access to an online WYSIWYG editor to make updates and we're restricing the use of tables.

LI's are not restricted, so we thought that if we could enclose UL's and LI's within DIV tags, they would be able to edit the list in the WYSIWYG editor and it would show up as a table. I was trying to see if it was possible.

Theo

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 41 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Grid Using LI's

I'd tend to agree with DCElliott. The example you've posted is exactly the type of data a table is for. To try and reinvent the wheel to emulate what a table is actually best for is probably a waste of your time. It smacks of jumping from one extreme of using tables for structure and stylin... into another of using (relatively) new found techniques of utilising lists for conventional tabulated data.

I'd spend time at looking at fine-tuning the options to the client for table usage.

Smile

The next sentence is true. The previous sentence is false. Discuss...

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Grid Using LI's

Stu wrote:
I have converted phpBB to a totally table free template just as an exercise 'to see if it was possible'.
http://portal.portland.co.uk/forum
(Some of the style is still embeded in the html as the template was taken up before it was completed.)
Stu, I am a member of another web development forum using phpBB. We have been discussing going to a table-less format (practicing what we preach, in effect) and would be interested in knowing if your template is available. We are currently using a Vjacheslav Trushkin variant.

The biggest difficulty with creating div-tables is in controlling a very regular grid layout. You have to wrap each row in a div to manage horizontal spacing if the cell content wraps. Plus you lose conveniences such as <col width="..." />. In fact, I don't have a problem with un-nested tables being used for presentation of forum posts, after all, the information is "data" retrieved from a database that is appropriately displayed in row and column format. What I object to is the multiple nesting of tables (up to 7 deep on one forum I checked). In addition, php and some templating applications all have built in abilities to generate table rows for each row of an array which makes development quite straightforward.

I have to agree with co2 agreeing with me Laughing out loud - it is all about achieving a proper balance and using the html element that is most appropriate for containing the content we are wishing to display. The semantic relevance of the content ranks high on my criteria for choosing the appropriate element. With CSS, we can apply stylings not available in html and achieve a rich and compelling visual palette without resorting to javascript trickery or anything else.

BE THE CSS

*takes bow, smiling in mocking self-irony*

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 1 week ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Grid Using LI's

This was a 'special' one off that I did for the portal, and as I have said, it was taken on before the css was neat and tidy.

It all came about after a discussion on 'css v tables', with a few members claiming that a forum could not be converted successfully to all css as it would not be possible to control the divs.
So I took up the challenge and the results are there to be seen.

The method I used to control the look was to use fixed width floating divs with one variable width filler div which works very well when resizing. But I doubt that I would do it the same way again as I have learnt a lot more about css since doing this conversion.

You could approach the owner of the portal web site for a copy of the template but I doubt he'll want to let anyone else use it.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk