Hugo's Nebula | Articles : eFiction : The infamous three column CSS layout

Home Articles Downloads Forums News Web links

$Who\$ Guests: 4
Members: None

susie

Aug 16, 7:08 PM

thanks for these modules! awesome!

Tammy

Feb 24, 4:02 PM

Story End module link is fixed.

AnarchicQ

Jan 10, 2:01 AM

The Story's End mod for eFic 3.X links to the index.

belara

Dec 25, 4:12 PM

huhum hier is belara, im from germany ^^

Guest

Dec 25, 4:12 PM

HuHu Belara!!!

Articles : eFiction : The infamous three column CSS layout

by Tammy

Alright, let's try to create a 3 column index page! We'll start with the index.tpl file

<!-- INCLUDE BLOCK : header -->
<div id="container1"><div id="container2">
	<div id="leftindex">
		<div class="block">
			<div class="title">{info_title}</div>
			<div class="content">{info_content}<br>{login_content}</div>
		</div>
		<div class="block">
			<div class="title">{random_title}</div>
			<div class="content">{random_content}</div>
		</div>
	</div>
	<div id="rightindex">
		<div class="block">
			<div class="title">{recent_title}</div>
			<div class="content">{recent_content}</div>
		</div>
	</div>
	<div id="middleindex">
		<div id="welcome">
			{welcome}
		</div>
		<div class="block">
			<div class="title">{categories_title}</div>
			<div class="content">{categories_content}</div>
		</div>
		<div class="block">
			<div class="title">{news_title}</div>
			{news_content}
		</div>
	</div>
<div class='cleaner'>&nbsp;</div>
</div></div>
<!-- INCLUDE BLOCK : footer -->

And without any CSS at all this is what it will look like:

{info_title}

{info_content}
{login_content}

{random_title}

{random_content}

{recent_title}

{recent_content}

{welcome}

{categories_title}

{categories_content}

{news_title}

{news_content}