Need help making my template

Conor · April 4, 2010

Ok so this is going to be a looooooooooooooooong message because its my first time and i need some help!

Ok so far here is my website:

this is the code im using:

Header.tpl

<head>
<link rel="stylesheet" type="text/css" href="/lib/skins/euroskies/stylesheet.css" />
</head>
<div id="container">
<div id="header">
	<h1>
		Site name
	</h1>
</div>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</div>

Footer.tpl

<head>
<link rel="stylesheet" type="text/css" href="/lib/skins/euroskies/stylesheet.css" />
</head>
<div id="content-container1">
	<div id="content-container2">
		<div id="section-navigation">
			<ul>
				<li><a href="#">Section page 1</a></li>
				<li><a href="#">Section page 2</a></li>
				<li><a href="#">Section page 3</a></li>
				<li><a href="#">Section page 4</a></li>
			</ul>
		</div>
		<div id="content">
			<h2>
				Page heading
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
		</div>
		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
		</div>
		<div id="footer">
			Copyright Â© Euroskies Virtual Airlines. Theme designed and created by <a href="http://www.alpha6studios.com">Alpha 6 Studios</a>, 20XX
		</div>
	</div>
</div>
</div>

And this is my css:

#container
{
margin: 0 auto;
width: 1000px;
background: #fff;
}

#header
{
background: #ccc;
padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
float: left;
width: 1000px;
background: #333;
}

#navigation ul
{
margin: 0;
padding: 0;
}

#navigation ul li
{
list-style-type: none;
display: inline;
}

#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
float: left;
width: 1000px;
background: #fff url(http://www.maxdesign.com.au/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0;
}

#section-navigation
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}

#section-navigation ul
{
margin: 0;
padding: 0;
}

#section-navigation ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}

#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
}

#content h2 { margin: 0; }

#aside
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}

#aside h3 { margin: 0; }

#footer
{
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}

Now what im trying to do is make it so that the three content boxes left, right and centre align properly. What am i missing?

Tom · April 4, 2010

Right, first you're missing all the important stuff in your <head> tags. Read the phpVMS skinning tutorials to put the right things in, and make sure you include your <title> tags.

Next, the <head> tags and everything in them need only appear once.

In your header you should have:

<html>
<head>
{Important stuff}
</head>
<body>
<div id="container">
       <div id="header">
               <h1>
                       Site name
               </h1>
       </div>
       <div id="navigation">
               <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">About</a></li>
                       <li><a href="#">Services</a></li>
                       <li><a href="#">Contact us</a></li>
               </ul>
       </div>
<div id="content">

The code for your content should go in frontpage_main.tpl else it will appear on every page.

Do something like so:

<div class="left bar">Sidebar</div>
<div class="left main">Mid</div>
<div class="left bar">Right Sidebar</div>

And in footer you should have:

</div> (<-- Closing the content)
<div id="footer">
                               Copyright Â© Euroskies Virtual Airlines. Theme designed and created by <a href="http://www.alpha6studios.com">Alpha 6 Studios</a>, 20XX
                       </div>
</body>
</html>

Then for your css:

.left{float:left;}
.bar{width:200px;}
.main{width:560px;}

Including any css for your navigation, header and footer.

Nabeel · April 4, 2010

From the div id="content" and above, that should probably all go into the header.tpl

Sign In

Need help making my template

Recommended Posts

Conor

Link to comment

Share on other sites

Tom

Link to comment

Share on other sites

Nabeel

Link to comment

Share on other sites

Join the conversation