Ingwe

I'm thinking that this thread is pretty useful. I might provide a little more on floating columns.

Another way of setting up columns...in Internet Explorer 7 and below divs set to an overall width of 100% will throw the last column below the others. In other browsers this doesn't happen, and it's because of a bad box model overall. So another way of making multiple columns is...

Setting up width classes for various widths that are commonly-used on your website layout. w100pc would be the class for 100% width and w050pc would be for 50%. Then floating columns could be set up as such:

Sample HTML:

<div id="section-1" class="pos-l-1">
	<div class="col-l w025pc">25% Column</div>
	<div class="col-l w030pc">30% Column</div>
	<div class="col-l w017pc">17% Column</div>
	<div class="col-l w027pc">27% Column</div>
	<div class="caption">Example 1</div>
	 <div class="col-l w050pc">50% Column</div>
	 <div class="col-l w025pc">25% Column</div>
	 <div class="col-l w007pc">7% Column</div>
	 <div class="col-l w017pc">17% Column</div>
	 <div class="caption">Example 2</div>
</div>

Sample CSS:

.pos-l-1{position:relative;left:0.5%} /* Sets all columns to the left by 0.5% since columns add up to 99% */
.pos-l-2{position:relative;left:1%} /* Just in case columns add up to 98% instead of 99% */
.col-l,.col-r{margin:0 !important;padding:0 !important}.col-l{float:left}.col-r{float:right} /* Floating columns, padding and margins nominal at 0. */
.clear-both,.visual-clear,.caption{clear:both} /* This is a visual clear (three classes for them for the purpose of an example), so that elements below the floating columns don't get mixed up with content below them. */
/* Widths used just for this example */
.w017pc{width:17pc}.w025pc{width:25%}.w027pc{width:27%}.w030pc{width:30%}.w050pc{width:50%}

In the above example, col-r class wasn't used because in this case, it's not really needed. All those columns will display in order as they should, without having to use tables. Positioning is great too, for certain things especially. Floating is good as well though.

Thank you for the reply.

Yes, it is quite illogical, but from level to level the upgrades are less, with the possibility of expansion of other powers (obviously upgrading the powers in the create a hero system makes no sense, but works with regular heroes). Yes it's illogical, but it is a curiosity about a game and not something I want to release. Curiosity is the only thing this is really about. RotWK's balance in any case is always so off when there are things such as the undead berserker to consider. Breaking the game a little more doesn't make much of a difference. xD

It was just a curiosity of mine, mainly because I didn't know why a CAH could be level 15 but nothing above. If that was the case, I'd expect the maximum possible level to be 10, no more.

I can't post all of the code, but experiencelevels_creatahero.inc is the file that has extra levels added. They are mostly copies of level 10 without any upgrades added. createaherogamedata.inc is another file in which the damage and health upgrade amounts are added (just like regular heroes get these lines in the gamedata.ini file). The respawn attributes for CAH follow...obviously the values are all very high especially near the end but balance of something like this comes last. Just is just a test version to see if it works, and it DOES work, up to level 15 that is. The game doesn't crash and CAH's can get up to level 15, with health increases as well. So everything is in place so far as I know...

data/ini/object/createahero/createaherorespawn.inc:

Body = RespawnBody ModuleTag_RespawnBody
		CheerRadius				 = EMOTION_CHEER_RADIUS
		MaxHealth					 = FARAMIR_HEALTH			//BALANCE CreateAHero Health
		PermanentlyKilledByFilter	= NONE						//Who kills me permanently?
		   DodgePercent				  = HERO_DODGE_PERCENT
	End
	Behavior = RespawnUpdate ModuleTag_RespawnUpdate
		DeathAnim					= DYING						//Model condition to play when killed-to-respawn
		DeathFX						= FX_HeroDieToRespawn		//FXList to play when killed-to-respawn
		DeathAnimationTime			= 5000						//How long DeathAnim will take.
		InitialSpawnFX				= FX_HeroInitialSpawn
		RespawnAnim					= LEVELED					//Animation to play when respawning.
		RespawnFX					= FX_HeroRespawn			//FXList to play when respawning.
		RespawnAnimationTime		= 2000						//Time it takes for respawn to play.
		AutoRespawnAtObjectFilter	= NONE +CASTLE_KEEP			//Respawn at this location -- and at it's exit production point if possible.
		ButtonImage					= HIFaramir
		
		//RespawnEntries determine the ruleset for how a character can be revived. Some units may automatically respawn, others
		//may require a specific revive action performed on him. You can specify different values for each level... or use Level:Any
		RespawnRules				= AutoSpawn:No Cost:750 Time:50000 Health:100%
		RespawnEntry =	Level:2				Cost:850		Time:70000   ; Change from 1.07					   ;;50% cost, 1x buildtime;For other levels, only override what is different.
		RespawnEntry =	Level:3				Cost:870		 Time:70000   ; Change from 1.07
		RespawnEntry =	Level:4				Cost:880		 Time:70000   ; Change from 1.07
		RespawnEntry =	Level:5				Cost:895		Time:105000
		RespawnEntry =	Level:6				Cost:935		Time:105000
		RespawnEntry =	Level:7				Cost:975		Time:105000
		RespawnEntry =	Level:8				Cost:1200		Time:140000
		RespawnEntry =	Level:9				Cost:1200		Time:140000
		RespawnEntry =	Level:10			Cost:1200		Time:140000
		RespawnEntry =	Level:11			Cost:1250		Time:140000
		RespawnEntry =	Level:12			Cost:1300		Time:140000
		RespawnEntry =	Level:13			Cost:1350		Time:140000
		RespawnEntry =	Level:14			Cost:1400		Time:140000
		RespawnEntry =	Level:15			Cost:1450		Time:140000
		RespawnEntry =	Level:16			Cost:1500		Time:140000
		RespawnEntry =	Level:17			Cost:1550		Time:140000
		RespawnEntry =	Level:18			Cost:1600		Time:140000
		RespawnEntry =	Level:19			Cost:1800		Time:140000
		RespawnEntry =	Level:20			Cost:2500		Time:200000
		RespawnEntry =	Level:21			Cost:2500		Time:200000
		RespawnEntry =	Level:22			Cost:3000		Time:200000
		RespawnEntry =	Level:23			Cost:3500		Time:200000
		RespawnEntry =	Level:24			Cost:4000		Time:200000
		RespawnEntry =	Level:25			Cost:5000		Time:300000
		RespawnEntry =	Level:26			Cost:5000		Time:300000
		RespawnEntry =	Level:27			Cost:5000		Time:300000
		RespawnEntry =	Level:28			Cost:5000		Time:300000
		RespawnEntry =	Level:29			Cost:5000		Time:300000
		RespawnEntry =	Level:30			Cost:5000		Time:300000
		RespawnEntry =	Level:31			Cost:5000		Time:300000
		RespawnEntry =	Level:32			Cost:5000		Time:300000
		RespawnEntry =	Level:33			Cost:5000		Time:300000
		RespawnEntry =	Level:34			Cost:5000		Time:300000
		RespawnEntry =	Level:35			Cost:5000		Time:300000
		RespawnEntry =	Level:36			Cost:5000		Time:300000
		RespawnEntry =	Level:37			Cost:5000		Time:300000
		RespawnEntry =	Level:38			Cost:5000		Time:300000
		RespawnEntry =	Level:39			Cost:5000		Time:300000
		RespawnEntry =	Level:40			Cost:7500		Time:350000
		RespawnEntry =	Level:41			Cost:7500		Time:350000
		RespawnEntry =	Level:42			Cost:7500		Time:350000
		RespawnEntry =	Level:43			Cost:7500		Time:350000
		RespawnEntry =	Level:44			Cost:7500		Time:350000
		RespawnEntry =	Level:45			Cost:7500		Time:350000
		RespawnEntry =	Level:46			Cost:7500		Time:350000
		RespawnEntry =	Level:47			Cost:7500		Time:350000
		RespawnEntry =	Level:48			Cost:7500		Time:350000
		RespawnEntry =	Level:49			Cost:7500		Time:350000
		RespawnEntry =	Level:50			Cost:10000		Time:400000
		RespawnEntry =	Level:51			Cost:10000		Time:400000
		RespawnEntry =	Level:52			Cost:10000		Time:400000
		RespawnEntry =	Level:53			Cost:10000		Time:400000
		RespawnEntry =	Level:54			Cost:10000		Time:400000
		RespawnEntry =	Level:55			Cost:10000		Time:400000
		RespawnEntry =	Level:56			Cost:10000		Time:400000
		RespawnEntry =	Level:57			Cost:10000		Time:400000
		RespawnEntry =	Level:58			Cost:10000		Time:400000
		RespawnEntry =	Level:59			Cost:10000		Time:400000
		RespawnEntry =	Level:60			Cost:12000		Time:500000
		RespawnEntry =	Level:61			Cost:12000		Time:500000
		RespawnEntry =	Level:62			Cost:12000		Time:500000
		RespawnEntry =	Level:63			Cost:12000		Time:500000
		RespawnEntry =	Level:64			Cost:12000		Time:500000
		RespawnEntry =	Level:65			Cost:12000		Time:500000
		RespawnEntry =	Level:66			Cost:12000		Time:500000
		RespawnEntry =	Level:67			Cost:12000		Time:500000
		RespawnEntry =	Level:68			Cost:12000		Time:500000
		RespawnEntry =	Level:69			Cost:12000		Time:500000
		RespawnEntry =	Level:70			Cost:12000		Time:500000
		RespawnEntry =	Level:71			Cost:12000		Time:500000
		RespawnEntry =	Level:72			Cost:12000		Time:500000
		RespawnEntry =	Level:73			Cost:12000		Time:500000
		RespawnEntry =	Level:74			Cost:12000		Time:500000
		RespawnEntry =	Level:75			Cost:12000		Time:500000
		RespawnEntry =	Level:76			Cost:12000		Time:500000
		RespawnEntry =	Level:77			Cost:12000		Time:500000
		RespawnEntry =	Level:78			Cost:12000		Time:500000
		RespawnEntry =	Level:79			Cost:12000		Time:500000
		RespawnEntry =	Level:80			Cost:15000		Time:500000
		RespawnEntry =	Level:81			Cost:15000		Time:500000
		RespawnEntry =	Level:82			Cost:15000		Time:500000
		RespawnEntry =	Level:83			Cost:15000		Time:500000
		RespawnEntry =	Level:84			Cost:15000		Time:500000
		RespawnEntry =	Level:85			Cost:15000		Time:500000
		RespawnEntry =	Level:86			Cost:15000		Time:500000
		RespawnEntry =	Level:87			Cost:15000		Time:500000
		RespawnEntry =	Level:88			Cost:15000		Time:500000
		RespawnEntry =	Level:89			Cost:15000		Time:500000
		RespawnEntry =	Level:90			Cost:20000		Time:500000
		RespawnEntry =	Level:91			Cost:20000		Time:500000
		RespawnEntry =	Level:92			Cost:20000		Time:500000
		RespawnEntry =	Level:93			Cost:20000		Time:500000
		RespawnEntry =	Level:94			Cost:20000		Time:500000
		RespawnEntry =	Level:95			Cost:30000		Time:500000
		RespawnEntry =	Level:96			Cost:30000		Time:500000
		RespawnEntry =	Level:97			Cost:30000		Time:500000
		RespawnEntry =	Level:98			Cost:30000		Time:500000
		RespawnEntry =	Level:99			Cost:50000		Time:500000
		RespawnEntry =	Level:100			Cost:50000		Time:500000
	End

Third Age is great the way it is, no doubt. I'm not trying to harass anyone if that's the impression I gave.

How I missed this is beyond me, but in responce to "I don't see one line in the example I showed just now that I would agree with," how about </table>?

I would have to agree, if that truly was the -LAST- table ever. A most good point. If they were re-specified to something sensible or used the right way and not so terribly abused, tables still would be alright. Xhtml 2.0's spec for table basically requires a semantic usage of it, but how many sites out there are going to be using that spec in the next 15 years? Tables, as they are used now, are all tr's and td's, with td's and sometimes even tr's nesting other tables inside them. I've heard that Invision Power Board's updates in the future are going to be using other elements for layout instead of tables and that's news I probably have been waiting for for a few years.

For new learners, please don't let them start you out with bgcolor, bgbackground, topmargin, or any presentational attributes or elements. Don't ever let them tell you you can put a table inside of an em tag or use iframes or marquee or things like that. Those methods are actually harder and more tedious than the actual realistic model of design. When your structure is better, you can spend more time (which you will) on making cool graphics, backgrounds, logos, and buttons along with content, and no longer have to worry about repairing the structure. If you learn that way, you'll make a template that you'll not often have to modify (unless you add new blocks to your site, then you can).

The entire example is CSS ZenGarden. They give you a sample of their markup (html) and their css files, of which there are many to choose from. Some of it is memorization and repetition. You need to know how to throw in your doctype, meta info, where to put your scripts (hopefully those are put in separate files), how to import css and xsl, and how to use the properties in css and elements in html.

Basic html means to me a basic standard to follow, not the 1998 model.

With xhtml 2.0 there will be a new line (l) element that will be more semantic than using line breaks (br). That's really nice. Section element will be there too to provide a better structure. In sections will be divisions (divs) and inside can be lists (ul, ol, nl, dl, etc) or paragraphs (p). ol and ul will have li for list lines, dl (definition lists) will have di to group terms with definitions or you can use just dt for term and dd for the definition. Inside of paragraphs are lines (no, not tables, please...God...no). Tables for layout, no-no. The guilatine bug in Explorer can be gotten around with a few different methods, and one method in particular I don't like is having to add an extra empty div just to clear everything below floats, and that doesn't always work either. em and span will still be in that spec, the form method will be XForms; XFrames has not been implemented or completed yet (I've never used frames before, I used positioning though which is just as good, well, better actually). There will be no Xhtml 2.0 Frameset or Transitional, just the flat DTD, kind of how Xhtml 1.1 was/is. style attribute gone (which is good). Cellspacing and padding for tables is gone (thankfully - that was getting annoying to see). If tables were not abused, the element could still be in use. th should be used inside of thead for headings and td for table data - not always the case, well, usually not the case. Trying not to flood your markup with a million classes for css isn't a good idea either. Your css file may go a little above 50kb for a sizeable site, but should really not exceed that. Some see the new spec as jumping on the bandwagon with all the newest and latest stuff that few can use. Hey, if your browser handles XML, it can handle the currently-available Xhtml 1.1 or 2.0 when it arrives. Or stay with Html 4.01 Strict while using stylesheets. If that's all you need, that's all you need. Just don't make excessive use of tables, don't put p's inside of span's, don't overlap tags or nest incorrectly, use css always before inline style attribute or any other presentational attribute (width="100%", border="1" and so on are presentational attributes - don't use them, let css do the presentational work, or if you're daring enough, have some xml using xsl stylesheet). With XML you can make your own elements and if you know DTD you can implement that (though it won't validate with w3c's validator as it only accepts approved document types). So if you want to take use of the section or line (l) elements before the xhtml 2.0 spec is released, that's totally possible and feasible!

On the web development (php+sql) end, when doing SQL queries, try to use is_numeric for numeric values and double-check with the mysql_real_escape_string function (see php.net for more info on that). Afterall, if you've completed a nice template that has a minimal and semantic structure with great css and backgrounds and content, you don't want it torn apart by someone who's testing to see if you've implemented that or not (they don't care if you have or not, they will open any back door that you didn't lock with or without your knowledge or approval - learn to hack your own site if you run your own server and see what doors are unlocked as often as you need to). That way you will not go all too wrong. Your last line of defense is backup. If you run your own server, easy to do. If you don't, get a backup sql file and go from there. At most you'll lose several forum posts if you run a forum and you happen to get unlucky. In addition, server logs serve you well.

Yeah.....I'm in agreeance with Jeeves here. The font tag is one of the most abused elements in Html, and has resulted in phpNuke's layout being FULL of font tags. The font tag is only the extreme beginning of the presentational element in markup/structure. Then there are the presentational attributes. All in all, I don't even like <hr /> or <br /> tags. I like the idea of using the paragraph tag, where spans, em, etc are for the emphasis and styling of text.

That is a good tutorial on the basic Html 3.2 stuff and that's how it was done then. I don't disrespect the old ways of doing it because it's from the disasters of the past (Apollo 1 and Html 2.0,3.2,etc) that we improve upon things. Html 4.01 Strict is the minimal I have actually dealt with since three years. I've been using the XML-Based (Module-based) Extensible Hypertext Markup language (Xhtml 1.1) as well as Xhtml 1.0 Strict and making XML and CSS in sites for a while, and have been thinking about putting a tutorial up for, like, two months I think it is now, but always got side-tracked as of late.

Layouts should not use tables. CSS Positioning and/or floating elements along with clearing those elements (clear:both) to put content underneath them is the best use for layout. Data that must be in a grid that degrades well (in other words, changes with viewport without you having anything over a 100% width, which requires in addition some WML and media="handheld" stylesheets, things like that) can be put in a table, but not so recommended. Turn styles off on your browser (say you have Moz-Firefox and the web developer addon, you can turn off styles on a page) - you can immediately see what the layout would be like with tables and without tables.

One of the sites Jeeves pointed out, which is CSS ZenGarden, works well without styles and lists well, and is compatible with WML. If you were to take styles off on a site with nothing but tables layouts, the widths would not degrade well, in other words it's not very fluid.

For things like statistics and phpmyadmin viewing of MySQL tables, and viewing anything that is a grid, if tables must be used they should be used in a way that doesn't cause overflow off the viewport. Having a minimum width of no more than 640 pixels will virtually guarantee that screen media will be read alright.

How do you accomplish the floating of divs (as opposed to positioning)? Well, the answer comes as somewhat of a surprise. Internet explorer doesn't always react well to it (does it react to anything the way it should - the very existence of an activex/javascript property in css for Internet Explorer is just beyond my ability to figure out why they would do that - that property being expression - just as data, style, and structure should eventually be separated, so should client-side ECMA (Java) script, more or less kept away from each other with a 40-foot cement barrier in between them).

Let's say you have three columns. You are using divs (or if you want to delve into the odd, different types of lists, and they can in cases be good to use for such layouts if they are indeed lists of common data that is being pulled up, like the Revora heads-up menu). You have two choices - positioning or floating. In CSS3 with IE8+Acid2 you'll be able to use a THIRD option. We'll discuss this further in a bit though.

The following div (or you could use a paragraph tag) will clear lines so that your floats don't end up all over the place (if you're like me, you've had it happen to you before):

Html:
<div class="clear_both"></div>

CSS:
.clear_both{clear:both;height:0;max-height:0}

The above clears both sides, right and left, so that the stuff following will not float to the top. The height and max-heights are set as safe-guards against this thing having any kind of size. It simply tricks the browser. To give divs some kind of actual height, you have that as an option, especially in the case that your floating divs have backgrounds or images that you don't want cutting off before the content ends inside

Html:
<div class="article">
<div class="col1"><p>One tequilla</p></div>
<div class="col2"><p>Two tequilla</p></div>
<div class="col3"><p>Three tequilla</p></div>
<div class="floor"><p>FLOOR!!!</p></div>
<div class="clear"></div>
</div>

Css:
.article .col1, .article .col2, .article .col3{float:left;width:25%}
.article .col4{float:right;width:25%}
.article p{border:1px dotted #77f;color:#77f;margin:0.25em;padding:0.25em}
.article .clear{clear:both;height:0;max-height:0}

The paragraph tags will be there just in case you wanna add more lines inside that (which is why I'm going to love Xhtml 2.0 - introduction of the line tag - I have it enabled through XML on my own site though, along with nl (navigation lists), section (a structural element similar to div), separator (which is an empty tag like hr except with the hr (horizontal line) it just seems so presentational in nature)).

In the above example, what you generally get is simply one row. The last clear line simply clears the line so the stuff below it can be display in some dignifying way instead of jumping all over the place. The first three columns float left, the last right. It works in IE7, Mozilla, Opera, and Netscape. I am not sure of IE6 but I imagine it works there, at least to some extent, though while resizing your page in that view in IE you'll likely see the last column jumping to the next row and back up at the end of the row again really quickly as you resize, sort of what you would imagine if your web designer were on a LOT of drugs.

The paragraph tags inside those floating columns have their own text color set by default to #77f (or #7777ff - it can be defined with 3 or 6 characters, depending on what level of complexity in color you wish to have). #77f is a pleasant blue color - not too blue but adds emphasis where needed. It is similar to the color of the arrows on the undo and redo buttons on the post form of the Revora Main Theme. The p tags also have a border of the same color that is dotted. They have margins of 0.25em as well as the same level of padding, so there is consistent padding and margins. If you want to have exactly 0.25em between everything, just remember this:

CSS:
.someclass{margin: top right bottom left}

The margin property can take the auto value as well, and that is useful in the case you want to center a block:

.centerthis{margin: 0 auto}

In that example, 0 is for top and bottom - auto is for left and right.

The "padding" property CANNOT take an auto value.

Fiddle around with that example and see what you can do with that.


Oh, and PLEASE put your style statements at least in an element tag somewhere between the head tags (near all the meta-data) - and not in a style element inside the body tags, or even in an inline style line.


Example of inline styling:

<p style="border: 1px solid #77f">Stuff</p>


The inline style attribute is going to be deprecated in future markup, and is generally confusing anyway since you want all your presentational stuff in one place where you can easily find it - in a CSS file.


Positioning is another way to achieve div columns. Another way will be the display property - the main div would have a style with "display:table" in it and the cells would have "display:table-cell" in them. It's definitely something to consider using eventually, when enough people update to newer browsers that is. Opera and Firefox and Netscape, and Safari, support that alright. Some other browsers just don't.


Now the comparison from the above example to...the older example:

Newer Example:

Html:
 <div class="article">
  <div class="col1"><p>One tequilla</p></div>
  <div class="col2"><p>Two tequilla</p></div>
  <div class="col3"><p>Three tequilla</p></div>
  <div class="floor"><p>FLOOR!!!</p></div>
  <div class="clear"></div>
 </div>
 
 Css:
 .article .col1, .article .col2, .article .col3{float:left;width:25%}
 .article .col4{float:right;width:25%}
 .article p{border:1px dotted #77f;color:#77f;margin:0.25em;padding:0.25em}
 .article .clear{clear:both;height:0;max-height:0}

:( Older Example:

Html:
 <table>
   <tr>
	   <td width="25%" border="1"><font color="#7777ff">One tequilla</font></td>
	   <td width="25%" border="1"><font color="#7777ff">Two tequilla</font></td>
	   <td width="25%" border="1"><font color="#7777ff">Three tequilla</font></td>
	   <td width="25%" border="1"><font color="#7777ff">FLOOR!!!</font></td>
	</tr>
 </table>
 
 Css:
Heh...none, it's all in the markup because it's 1996 all over again.

In olde html I'm not sure what the border color attributes were. I imagine they were probably...um...borderColor="#7777ff" or something. And the font tag had fontStyle, fontColor, fontFamily, and so on.

The above wouldn't be the worst case example. That actually looks really neat compared to what I've seen. Here's an example of what to definitely avoid:

<table class="bodyline" width="100%" cellspacing="0" cellpadding="0" border="0"> 
 <tr> 
   <td valign="top">
	<center>
	  <table width="100%" border="0" cellspacing="0" cellpadding="2" height="86">
		<tr>
		   <td background="someimage.jpg" width="100%" height="80">
			 <table width="100%" border="0" cellspacing="2" cellpadding="0" height="168">
			   <tr>
				 <td width="7" height="64">
				 <p align="center">
					<td nowrap width="100%" height="64">
					   <p align="center"><b>
						  <font class="tit" color="#FFFFFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Logo using white space for margins :P</font></b></p>
				   </td>
				</td>
				<td width="4" height="64">&nbsp;</td>
			  </tr>
			</table>
		  </td>
		</tr>

I had to change some of the content in that above example as it would put to shame the organization using that code...and the rest is about 9,000 times worse.

I don't see one line in the example I showed just now that I would agree with.

Amazing how easily controlled by CSS such a layout would be. You would probably end up with 10 times less presentational elements, ZERO presentational elements, and a heck of a lot less of what you don't need. That way you spend less time figuring out where on Earth to modify presentational stuff because your structure is bad, and more time instead on just making a site better just through a CSS file.

Javascript is amazing, it really is. But guess what, it's just as abused and I've seen many make a mockery of it. There are some things best left to CSS and Html. Other things are best left to XML. Javascript should be doing the really cool stuff for your site, but should not be the thing that designs it, it should only extend functionality.

So that's about all for now. I worked late night shift until a bit ago and will have the next day to sleep in, until later.