Help with template 24

pabst · #1 (**permalink**) 10-14-2009, 04:25 AM

Hi There,

Firstly let me thank you for offering such an amazing free service.

I am using Template 24 and I have run into some issues, particularly with images.

I hope my questions are not too much trouble:

1. I have no need for the /* Order Cards */ element, but would like to substitute an image in this space on the page. I have tried editing the css and html but nothing seems to work here. Should I just delete the entire section in the css? If i do that, how do I insert the image in the same place?

2. I ran into some issues in the page header too, so i managed to figure out a workaround for the "website_name.gif" where I uploaded a new gif image that stretches the width of the site content. If I want to build more pages, how can I change the image on subsequent pages (e.g. on index.htm (home) there are the football players, on about_us.htm (about us) i would like there to display a different image. How can i do that?

Thanks in advance!

pabst

ishkey · #2 (**permalink**) 10-14-2009, 01:37 PM

A two part question. Lets tackle the easy one first #2., which will help you with question #1.

Code:

how can I change the image on subsequent pages

First we want to look at the code in the index.html file to find where the header is called from and we find it here <div id="page_header">
We see the "container" sector which sets the page and background graphic properties. Next is the page header which is commented, that makes it easy to find. (hint: use comments in your working file to make coding easy to follow - strip the comments out of the file you will upload to the server)
There is a div id and some elements. The division id tells you to go look in the css file.

Code:

<body>
<div id="container">
<!-- Start of Page Header -->
<div id="page_header">
<h1><span>Football Card</span></h1>
<h3><span>Company Caption Here</span></h3>
</div>
<!-- End of Page Header -->

Searching the css file we find the <div id="page_header">
You want to have a different header_image.gif on other pages but the css file has only One to work with. So you have to create as many extra headers as you need, give them a new name and call them on the individual html files.
original css code:

Code:

/* Page Header */
#page_header {
 margin-bottom: 1px;
 background: url('images/header_image.gif') no-repeat 100% 0px;
 width: 732px;
 height: 174px;
 overflow: hidden;
}
#page_header h1 {
width: 221px;
height: 174px;
background: url('images/website_name.gif') #387e28 no-repeat 50% 50%;
color: #fff;
}

Let's add the new page header that we will call for the about page and save the file. You only need to change two things. The "id name" and the "image name". You don't need an extra #page_header h1 so you leave it alone. You only need the one which shows on every page.

Code:

/* Page Header */
#page_header {
margin-bottom: 1px;
background: url('images/header_image.gif') no-repeat 100% 0px;
width: 732px;
height: 174px;
overflow: hidden;
}
 
#page_header_about {
 margin-bottom: 1px;
 background: url('images/header_about.gif') no-repeat 100% 0px;
 width: 732px;
 height: 174px;
 overflow: hidden;
}
 
#page_header h1 {
width: 221px;
height: 174px;
background: url('images/website_name.gif') #387e28 no-repeat 50% 50%;
color: #fff;
}

Now in the about page call the new header up. There you have it. Remember you have a external file (style.css) within it is the code for how things are displayed in your html files. You can also put some "css code" in the "head" section of your "html" file and put "css code" right in-line in the "body section" of the "html" file.

Code:

<body>
<div id="container">
<!-- Start of Page Header -->
<div id="page_header_about">
<h1><span>Football Card</span></h1>
<h3><span>Company Caption Here</span></h3>
</div>
<!-- End of Page Header -->

Now question #1. should be easy for you. Look at the "html code to see what they are calling up to create the "Order Cards" What parts do you not want? Do you want to get rid of the "paypal" and the "join" and replace it with one large graphic or two graphics. Then look at the "css" code. Which one sets the position and size, as that's where you need to put the graphic. Will you require the lists "<ul>" the hoovers, etc. How to these elements create that section you are working on and what do you need to keep/change to "call up" on the "html" page.
You can leave the old code in and just create a new "div id" for your graphic, that way you can reference the old code. Insert the new "div id" in your "html" code of your pages.
"html" code from index.html:

Code:

<!-- Start of Order Cards -->
<div id="order_cards">
<div id="order_accept">
<h3><span>We Accept:</span></h3>
<img src="http://www.freewebsitetemplates.com/forum/images/order_creditcards.gif" width="278" height="28" alt="Paypal, Visa, Mastercard, Amex Discover, eCheck" />
</div>
 
<h2><span>Three Ways to Order Cards</span></h2>
 
<ul>
<li id="online"><a href="http://www.freewebsitetemplates"><span>&nbsp;</span><b class="block">Online</b></a></li>
<li id="phone"><a href="http://www.freewebsitetemplates"><span>&nbsp;</span><b class="block">Phone</b></a></li>
<li id="mail"><a href="http://www.freewebsitetemplates"><span>&nbsp;</span><b class="block">Mail</b></a></li>
</ul>
<div class="clearthis">&nbsp;</div>
<div id="order_text">
<p>
Visit <a style="color:#ff0000;" href="http://www.freewebsitetemplates.com">our website</a> for more website templates.
</p>
</div>
</div>
<!-- End of Order Cards -->

css code for the "order/join"

Code:

#order_cards {
 margin: 3px 0px 3px 16px;
 color: #9f0b17;
 background-color: inherit;
 font-weight: bold;
 border: #98141b 1px solid;
 float: left;
 font-family: tahoma, arial, sans-serif;
 font-size: 11px;
 width : 283px;
 voice-family : "\"}\"";
 voice-family : inherit;
 width : 281px;
}
#order_cards {
 clear: right;
}
#order_cards a {
 color: #9f0b17;
 background-color: inherit;
}
#order_cards a:hover {
 color: #387e28;
 background-color: inherit;
}
#order_cards h2 {
 margin-bottom: 12px;
 width: 281px;
 height: 28px;
 color: inherit;
 background: url('images/order_header.gif') #387e28 no-repeat 0px 0px;
}
#order_accept {
 margin: 10px auto 2px;
 text-align: center;
}
#order_cards ul {
 padding: 0px 3px 0px 4px;
 font-size: 10px;
 height: 95px;
}
#order_cards li {
 padding: 0px 5px;
 color: #9f432b;
 background-color: #fff;
 background-position: 5px 0px;
 background-repeat: no-repeat;
 float: left;
}
#order_cards li#online {
 background-image: url('images/order_online.gif');
}
#order_cards li#phone {
 background-image: url('images/order_phone.gif');
}
#order_cards li#mail {
 background-image: url('images/order_mail.gif');
}
#order_cards li a {
 display: block;
 background: inherit;
 background-position: 0px 0px;
 color: #9f432b;
 font-weight: bold;
 text-decoration: none;
 text-align:center;
 text-transform: lowercase;
 cursor: pointer;
}
#order_cards li a .block {
 display: block;
 border: #cccccc 1px solid;
}
#order_cards li a:hover .block {
 color: inherit;
 background-color: #f2f2f2;
}
#order_cards li a span {
 width: 79px;
 height: 73px;
 display: block;
}
#order_cards li a b {
 line-height: 12px;
 width: 79px;
 display: block;
}
#order_cards li#phone b {
 width: 80px;
}
#order_text {
 padding: 0px 15px 12px;
}
#order_text p {
 line-height: 14px;
}

Let us know if this helps.

pabst · #3 (**permalink**) 10-14-2009, 08:20 PM

Hi Ishkey,

Thank you so much for your quick response - I have definitely sorted out question 2 and it looks great!

I am however, still having problems with question 1.

I left the order_cards code in the css as you suggested and created a new div id called home_image
css code:

Code:

/* home image */

#home_image {
width: 277px;
    height: 281px;
    background: url(/images/main_image.gif) no-repeat 100% 0px;
    overflow: hidden;
    }

then in the HTML I removed the reference to order cards and entered:

Code:

 <div id="home_image">
<img src="http://www.mywebsite.com/images/main_image.gif" width="277" height="281" alt="image of basket" />
</div>

All that shows when I view in the browser is the alt text 'image of basket' and not the picture.

Quote:

Look at the "html code to see what they are calling up to create the "Order Cards" What parts do you not want? Do you want to get rid of the "paypal" and the "join" and replace it with one large graphic or two graphics. Then look at the "css" code. Which one sets the position and size, as that's where you need to put the graphic. Will you require the lists "<ul>" the hoovers, etc. How to these elements create that section you are working on and what do you need to keep/change to "call up" on the "html" page.

to answer what you wrote I want to replace the entire order cards section with one large graphic. I don't need the lists, the hoovers etc I think what I am failing to grasp is how the css determines the position on the page.

Thanks again, I really appreciate your help.

pabst

pabst · #4 (**permalink**) 10-14-2009, 08:35 PM

Hey, Sorry, I've made a rookie mistake and neglected to upload the main_image.gif....

ishkey · #5 (**permalink**) 10-14-2009, 10:47 PM

I think you might have one main mistake. The "/" shouldn't be there. It changes the path.

Code:

/* home image */
 
#home_image {
width: 277px;
    height: 281px;
    background: url(/images/main_image.gif) no-repeat 100% 0px;
    overflow: hidden;
    }

Here is the code I came up with in the css

Code:

#home_image {
   margin: 3px 0px 0px 10px;
   width: 283px;
   height: 281px;
   background: url(images/main_image.gif) no-repeat 100% 0px;
   float: left;
   }

and for the html

Code:

<div id="home_image"></div>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode