15 replies to this topic

[sonesay]

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?

Attached Files

•  layout_v1.png   118.74K   13 downloads

[Saint_Michael]

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]

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.

[hr=noshade] [/hr]
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.

Attached Files

•  align_stats.gif   12.49K   7 downloads

[jlhaslip]

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]

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

$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]

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]

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]

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

[truefusion]

sonesay, on Nov 25 2007, 01:21 PM, said:

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

Sure.

CSS:

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:

<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]

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