HTML template for dogs new page help

Wakies · Mar 19, 2011

Hi there,
Im a total beginner and I have downloaded 'template for dogs' have worked out how to enter text....all going ok. Im using Trellion.
I am struggling to create additional pages.
On the home page I have changed the text on the tabs, and deleted the 'freewebsitetemplates' link, but now I dont know how to make a new page or link it to the home page.
Any help would be much appreciated, thanks

lng · Apr 15, 2011

I'm new to this site and don't exactly know what the template is written in but from what it sounds like, you have a single HTML file for your home page, is that correct? If so, you can copy that home page file, paste it and rename it to "contact.html" or whatever, edit it to have contact info, and then edit your navigation to link to it, using <a href="link goes here">image or text goes here</a> tags.

lng · Apr 15, 2011

I just downloaded it and looked, and yes you can copy index.html and rename it to whatever other page you want.

To edit navigation, you open the html file in your favorite editor (I prefer notepad) and find this:

<div id="header">

<ul>
<li><a href="http://www.freewebsitetemplates.com">home</a></li>
<li><a href="http://www.freewebsitetemplates.com">about us</a></li>
<li><a href="http://www.freewebsitetemplates.com">Services</a></li>
<li><a href="http://www.freewebsitetemplates.com">News & Updates</a></li>
<li><a href="http://www.freewebsitetemplates.com">Place and order</a></li>
<li><a href="http://www.freewebsitetemplates.com" class="lastchild">Contact</a></li>
</ul>
</div>

this is your nav bar. Now, you will want to change those links to whatever you want. So I would change them to look like this if I were you:

<div id="header">

<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="news.html">News & Updates</a></li>
<li><a href="order.html">Place and order</a></li>
<li><a href="contact.html" class="lastchild">Contact</a></li>
</ul>
</div>

Those links assume that you name your files about.html, services.html, etc. That will be up to you.

If you don't want one of those links, simply delete the line. Note that the very last link has a seperate "class", that tells the template that it is the last in line.

Wakies · Apr 17, 2011

Thanks very much for your help Ing, Im working on this now, I have more than one page now! Im just having a little trouble with the navigation.......checking through to see what ive done wrong.......

lng · Apr 18, 2011

If you post what you currently have I can sniff out any issues

Wakies · Apr 18, 2011

confused.co.uk

Ing you are very kind

Right here goes!

I have 4 pages now (all that I want) I am using Trellion (I know you said Notepad but as Im visual I like to see the split screen to see whats happening!!!) and have all 4 pages open. If I click on a tab for one of the other pages, it comes up that the page cannot be opened .. Is this because ive done something wrong.....see below...
DAMM! Just went to my files to copy and paste the info to you and 2 pages are blank.... all Ive got is:
<HTML><HEAD>
<META name=GENERATOR content="MSHTML 8.00.6001.19019"></HEAD><BODY>
<P> </P></BODY></HTML>
What happend??? Ill get back to you on the navigation when Ive sorted this out, grrrrrr! (This ******* website is turning into a nightmare!!!)

Wakies · Apr 18, 2011

Phew!

Phew, my lovely laptop ran a backup last night and i now have the missing pages
As I was saying...
I have 4 pages and this is what i have:
On index.html

<UL>
<LI><A href="/Index.html">Home Page</A>
</LI><LI><A href="/Services.html">Our Services</A>
</LI><LI><A href="/T&C;s.html">Terms and Conditions</A>
</LI><LI><A class=lastchild href="contact.html">Contact Us</A>
</LI></UL>
</DIV>

On services.html

<UL>
<LI><A href="/Index.html">Home Page</A>
</LI><LI><A href="/Services.html">Our Services</A>
</LI><LI><A href="/T&C;s.html">Terms and Conditions</A>
</LI><LI><A class=lastchild href="contact.html">Contact Us</A>
</LI></UL>
</DIV>
On T&C's.html

<UL>
<LI><A href="/Index.html">Home Page</A>
</LI><LI><A href="/Services.html">Our Services</A>
</LI><LI><A href="/T&C;s.html">Frequently Asked Questions</A>
</LI><LI><A class=lastchild href="contact.html">Contact Us</A>
</LI></UL>
</DIV>

On contact.html

<UL>
<LI><A href="/Index.html">Home Page</A>
</LI><LI><A href="/Services.html">Our Services</A>
</LI><LI><A href="/T&C;s.html">Frequently Asked Questions</A>
</LI><LI><A class=lastchild href="contact.html">Contact Us</A>
</LI></UL>
</DIV>

Looks ok to me, could it just be the way Trellion works, doesnt do the navigation? (although i thought that i had navigated between the pages....*scratches head*) Do you think it will work when I upload them (hmmmm uploading thats another problem!! Ive asked about that on another thread )

tomw · Apr 18, 2011

There are number of CMSs (Content Management System) that you can use to create websites using templates like the one you have selected. I too have developed such system called w-CMS. If you are interested in trying it out just install it (you don’t need FTP) and I will help you to set your site up with the pages you have in mind.

Here is an example of using the dogtemplate.

ishkey · Apr 18, 2011

Upper/lower case makes a difference.
use only lower case in th code part.

On index.html
<LI><A href="/Index.html">Home Page</A>
services.html
</LI><LI><A href="/Services.html">Our Services</A>

Wrong Naming Convention - On T&C's.html (no - & or ')
you could use tcs.html

A much better free editor to use is Netix - free html text editor download, - Alleycode HTML

Wakies · Apr 19, 2011

Nearly there

Thank you both for your help, I very much appreciate it

I have sorted out the upper and lower case issues and the name of T&C's.

Its very odd though.......the navigation now works when I click on the contact page from any of the pages, but does not work when I click back to the original page.

Im not sure thats clear

From index.html, clicked tab for contact.html, it works
On index.html (but showing contact.html) click index.html tab and its 'unable to display page'

Same with all the other pages, so from all pages I can navigate to contacts.html, but not back, and can not navigate, for example, from services.html to index.html.

Hmmmmm, any suggestions please?

tomw · Apr 19, 2011

From what I could determine you should have the following files:

index.html
services.html
faq.html
contact.html

The navigation for all the pages should be this:
Code:
<ul>
    <li><a href="index.html">Home Page</a></li>
    <li><a href="services.html">Our Services</a></li>
    <li><a href="faq.html">Frequently Asked Questions</a></li>
    <li><a class=lastchild href="contact.html">Contact Us</a></li>
</ul>
Here is what your site should look like.

lng · Apr 19, 2011

Wakies said: ↑

Thank you both for your help, I very much appreciate it

I have sorted out the upper and lower case issues and the name of T&C's.

Its very odd though.......the navigation now works when I click on the contact page from any of the pages, but does not work when I click back to the original page.

Im not sure thats clear

From index.html, clicked tab for contact.html, it works
On index.html (but showing contact.html) click index.html tab and its 'unable to display page'

Same with all the other pages, so from all pages I can navigate to contacts.html, but not back, and can not navigate, for example, from services.html to index.html.

Hmmmmm, any suggestions please?
Click to expand...

You will need to copy your Navigation code to every page that you're using. Editing one page will not make changes to another.

Wakies · Apr 20, 2011

Wooop Woop!

Wooop Woop! My navigation is working! I copied and pasted from your post Tom (on all 4 pages) and hey presto!!!
Ypu guys have been great and Im so nearly there.....just one last problem

On one of my pages the text formatting and placement has gone wonky.

I have entered the info I want

<H2>blahh blahh</H2>
<P>blahh blahh</P>

all the way down the page and as I go the font becomes bold and each time I enter a heading or paragraph they indent further. The text should be to the left, the css says:

#left {
background-color: #ddd8c6;
border: 1px solid #c2bdaa;
width:550px;
margin: 0px 0px 10px 28px;
padding: 0px 0px 15px 0px;
float:left;
display:inline;
}
.text{
float:left;
width:422px;
}
#left h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #4d4b4a;
text-decoration: none;
margin: 20px 0px 10px 23px;
}
#left p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:lighter;
color: #4d4b4a;
margin: 6px 0px 0px 23px;
}
#left a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;color: #4d4b4a;
}
#left a:hover{
color:#000000;
}
.photos{float:right;}
.photos img{display:block;}

Is there anything here that would make this happen? Its not happening on the other pages.

Do you think that I should replace the file/page and re-enter my text?

Thanks

tomw · Apr 20, 2011

Do not touch the style.css page. Leave the changes to the expert.

Here is the template you can safely use but only make changes to the content highlighted with ***.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>*** Your page title goes here... ***</title>
</head>

<body>
<div id="container">
   <div id="logo">
      <a href="index.html"> <!-- link to home page -->
     <img src="images/logo.jpg" alt="your logo" border="0" /> <!-- your logo -->
      </a>
   </div>
   <div id="header">
      <ul>
     <li><a href='index.html'  title='Home Page'>Home Page </a></li> 
     <li><a href='services.html'  title='Our Services'>Our Services </a></li> 
     <li><a href='faq.html'  title='Frequently Asked Questions'>Frequently Asked Questions </a></li> 
     <li><a class="lastchild" href='contact.html'  title='Contact'>Contact </a></li> 
      </ul>
   </div>
   
   <div id="content">
      <h1>*** This page title ***</h1>
      <div id="left">
     <div class="text">

        *** This page main content ***
        
     </div>
     <div class="photos">
        <!-- Your photos - maximum width 108 -->
        <img src="images/dog1.jpg" alt="bog 1" border="0" />
        <img src="images/dog2.jpg" alt="bog 2" border="0" />
        <img src="images/dog3.jpg" alt="bog 3" border="0" />
        <img src="images/dog4.jpg" alt="bog 4" border="0" />
        <img src="images/dog5.jpg" alt="bog 5" border="0" />
     </div>
     <div class="clear"></div>
      </div>
      <div id="right">

     *** This page attachment content
     (can be the same for all pages) ***

      </div>
      <div class="clear"></div>
   </div>
   
   <div id="footer">
      *** Your copyright (same for all pages) ***
   </div>    

</div>

</body>
</html>

Jiggles · Apr 20, 2011

Hi, if you email me: kalax(at)me.com with your template I can build it for my CMS for you. Then all you will need to do it upload the site to your webhost and its all set up for you. No databases or anything needed.

Wakies · Apr 20, 2011

Thanks all

Thanks Tom for the template, it worked a treat And Jiggles its all done now! Just having connection problems with the server, so as soon as Ive sorted that it will be up and running.

Wakies · Apr 21, 2011

Success!

Oh dear, another question!

I have uploaded my site Walkies of Headington Home (yeeehaaa!) but Id like the main body to be indented from the left side, doesnt it look a bit odd on the left? Shouldnt it be a bit more centered on the screen?

Is it possible to do this?

tomw · Apr 21, 2011

The logo div tag is missing in your template.

Yours:
HTML:
<DIV id=container>
   <A href="index.html"></A>
     </DIV>
  
It should be this:
HTML:
<div id=container>
<div id="logo">
 <a href="index.html"></a>
</div>

Wakies · Apr 21, 2011

Thanks I removed that bit because it left a gap at the top where 'dogs palace' was. I shouldnt fiddle when I dont know what Im doing!

tomw · Apr 21, 2011

If that was what you wanted then remove the following:

<A href="index.html"></A>
</DIV>

Log in or Sign up

HTML template for dogs new page help

Wakies New Member

lng New Member

lng New Member

Wakies New Member

lng New Member

Wakies New Member

Wakies New Member

tomw Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

Wakies New Member

tomw Member

lng New Member

Wakies New Member

tomw Member

Jiggles Member

Wakies New Member

Wakies New Member

tomw Member

Wakies New Member

tomw Member

Log in or Sign up

HTML template for dogs new page help

Wakies New Member

lng New Member

lng New Member

Wakies New Member

lng New Member

Wakies New Member

Wakies New Member

tomw Member

ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

Wakies New Member

tomw Member

lng New Member

Wakies New Member

tomw Member

Jiggles Member

Wakies New Member

Wakies New Member

tomw Member

Wakies New Member

tomw Member

Useful Searches