Jump to content

Need help making my template


Conor

Recommended Posts

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:

website right now

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...