Align Text Column Without Tables Using Css - Is it possible to get a 3 column alignment without using tables with C

sonesay

Nov 25 2007, 06:50 AM

I know I can use tables to get this effect but I am not sure if CSS can do it. I have not found any examples so far, the only alignments with CSS I have come across are whole div elements and nothing for inside formatting like tables offer.

Heres my current stage of my layout so far. select a character to see output.

http://sonesay.trap17.com/chars.php
http://sonesay.trap17.com/profile.css

The attached file is of my original plan but at this stage I cannot do a php+ajax pagination for characters because of lack of knowledge so I went with the simple drop down list.

There are some extra functions I decided to add on soon too (those two buttons but they dont do anything yet). So there are some few changes I did not think of first round but the overall layout should not change too much.

my main concern at the moment is of aligning elements inside the main DIV's 'stats' and eventually 'merits' vertically. Is tables the only solution or can CSS achieve this?

Saint_Michael

Nov 25 2007, 07:18 AM

I think I know what you going for, and yes its possible, I have seen templates and designs with 4 columns.

Here are some templates that show the bare bones of 3 columns.

This one includes everything i.e headerm nav bar, 3 columns, and footer.

This one just includes the columns themselves to implement them within the design itself.

If your looking for ajax scripts this site will help you greatly especially in content loading and stuff, and most of the sites come with a how to install it and stuff. Of course some reguire you to install software since most of them are plug in and what, but you should be able to find what your looking for and stuff.

sonesay

Nov 25 2007, 07:33 AM

Thanks for the links. The overall layout is not what I'm trying to fix atm. I was afraid i would be unclear with my english. What I am after is a possible CSS solution to align the text:

HP, MP, STR, DEX, VIT, AGI, INT, MND, CHR (all vertcally)
100-, 250, 88, 67, 52, 75, 50, 55, 66 (all vertically)
Bonus stats (all vertically)

link in my attached picture.

so if I was to do that in a table I would have a 3 column table. I'm starting to think that I will need to have 3 divs for the 3 columns inside the main div? I'm not that expericenced with CSS to be honest so I want to get this right and use it through out the rest of the page contents.

I hope that makes it abit clear of what I am after.

sorry for repost. the attached image here is what I'm after. the effect of the right side. the left side is the default output with no alignment. I hope this is more clear. is it better just to use tables or css to try and get this vertical alignment effect.

jlhaslip

Nov 25 2007, 07:56 AM

You should be able to do that with div's, too, however, it looks to me that the data itself is "tabular", so done properly, it is very likely that a Table would be suitable for the task. Is the data from a database?

sonesay

Nov 25 2007, 08:02 AM

yes its retrieved from mysql and put through some functtions then outputed.

CODE

$hp = GetHP($race_index, $main_job_class, $sub_job_class, $main_job_level, $sub_job_level);
	$mp = GetMP($race_index, $main_job_class, $sub_job_class, $main_job_level, $sub_job_level);
	echo "HP " .$hp;
	echo "<br />";
	echo "MP " .$mp;
	echo "<br />";
	echo "<br />";
	
	// output attributes
	$atrb[2] = "STR";
	$atrb[3] = "DEX";
	$atrb[4] = "VIT";
	$atrb[5] = "AGI";
	$atrb[6] = "INT";
	$atrb[7] = "MND";
	$atrb[8] = "CHR";
	
	
	
	for ($stat_index = 2; $stat_index <=8; $stat_index++ ) {
		$stat_lvl = GetStat($race_index, $main_job_class, $sub_job_class, $stat_index, $main_job_level, $sub_job_level);
		
		echo $atrb[$stat_index] . " " . $stat_lvl . "<br />";
	}
	

I wont get stoned for using tables will I

jlhaslip

Nov 25 2007, 08:09 AM

Not for tabular data layout, but place the Table inside a div and use the div for the page structure is the correct manner to handle this application.

(otherwise we stone you)

truefusion

Nov 25 2007, 12:21 PM

Some have taken advantage of unordered lists for situations like these. They make use of the table-cell value for the display property for list item elements. They, then, adjust the width to make it look evenly distributed.

sonesay

Nov 25 2007, 06:21 PM

Can you show an example of how to use an unordered list for something like this please

truefusion

Nov 26 2007, 04:05 AM

QUOTE(sonesay @ Nov 25 2007, 01:21 PM)

Can you show an example of how to use an unordered list for something like this please

Sure.

CSS:

CODE

ul.header, ul.col {
list-style: none;
margin: 0;
padding: 0;
}

ul.header:first-line {
text-align: center;
font-weight: bold;
}

ul.col {
border-top: 1px solid black;
}

ul.col li {
display: table-cell;
width: 150px; //change the width to whatever you want.
}

For the example, we'll use a 3-row, 3-column unordered list-table.

Unordered list HTML:

CODE

<ul class="header">
<li>Header
<!-- Row 1 -->
<ul class="col">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
</ul>
<!-- Row 2 -->
<ul class="col">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
</ul>
<!-- Row 3 -->
<ul class="col">
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
</ul>
</li>
</ul>

Please note that this code has not been tested, but it should work for the most part.

sonesay

Nov 26 2007, 08:26 AM

Thanks a lot thats exactly what i am after. Later on I'm planning to use this same technique for a 3 column alignment similar to the example we just did. But the only difference is column widths need to be different. I hope I can assign individual widths to each li element will work. I will test this out soon.

cheers

Latest Entries

sonesay

Jan 30 2008, 06:34 PM

Thinking it over last night as I went to bed I think It would be much easier to use tables to structure the output. It will get clutered with tags but the upside is no futher tweaking of the CSS tabs would need to be done to accomodate the extra inner divs.

Thanks for your input truefusion.

truefusion

Jan 30 2008, 02:01 PM

QUOTE(sonesay @ Jan 28 2008, 10:58 PM)

Width does not work with all inline-level elements.

QUOTE(sonesay @ Jan 28 2008, 10:58 PM)

Ok I'm still looking for a suitable solution that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

My code only hides the "inactive" ones by default, but i am unsure on what to tell you for the solution. If Internet Explorer lacks, then it lacks. You could try to persuade visitors to switching to a better browser. It's interesting that IE7, though it had a noticable improvement with CSS, lacks such an option. I am unsure of any IE CSS hacks (there may not be any) for this. I'm quite sure i can turn my tab script to use tables instead of divisions, even if it creates unnecessary clutter.

sonesay

Jan 29 2008, 03:58 AM

Sorry to bump up an old thread but I've found a problem with IE7 and this solution. IE 7 does not support display:table-cell (one of manythings IE 7 really sucks at). The only way to get <li> elements displaying in the same line similar to the effect of display:table-cell solution in this post is

display:inline;

But there is still another problem in IE7.

CODE

li.col1 {
width:120px;

The width class we have been using to give our widths dont work also. So you see IE 7 offically is the worse compliant broswer out there. I have no doubt I will find more features it does not support and it will continue to make life for us designing webpages as painful as possible.
If anyone has a solution to the width spacing for 'display:inline;' method please share.

edit:

Ok I'm still looking for a suitable sultion that works in IE 7 but the only thing I know is tables now. I'm trying to test out if I can use more divs inside to structure it but with truefusions code it hides all div by default as you can see in the source code in the screen shot. I'm still not fimilar with how to modify it to not include the inner divs.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE