1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design Help with template 24

Discussion in 'Web Design' started by pabst, Oct 13, 2009.

  1. pabst

    pabst New Member

    Hi There,

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

    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
     
    pabst, Oct 13, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    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:
    [B]<body>[/B]
[B]<div[/B] id=[B]"container">[/B]
[I][COLOR=#ff0000][COLOR=#ff0000]<!-- Start of Page Header -->[/COLOR][/COLOR][/I]
[B]<[COLOR=green]div[/COLOR][/B][COLOR=green] id=[/COLOR][B][COLOR=green]"page_header[/COLOR]">[/B]
[B]<h1><span>[/B]Football Card[B]</span></h1>[/B]
[B]<h3><span>[/B]Company Caption Here[B]</span></h3>[/B]
[B]</div>[/B]
[SIZE=1][B][I][SIZE=1][COLOR=#ff0000][SIZE=1][COLOR=#ff0000]<!-- End of Page Header -->[/COLOR][/SIZE][/COLOR][/SIZE][/I][/B]
[/SIZE]
    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 */
[COLOR=green]#page_header[/COLOR] {
 margin-bottom: 1px;
 background: url([COLOR=green]'images/header_image.gif'[/COLOR]) no-repeat 100% 0px;
 width: 732px;
 height: 174px;
 overflow: hidden;
}
[COLOR=gray]#page_header h1 {[/COLOR]
[COLOR=gray]width: 221px;[/COLOR]
[COLOR=gray]height: 174px;[/COLOR]
[COLOR=gray]background: url('images/website_name.gif') #387e28 no-repeat 50% 50%;[/COLOR]
[COLOR=gray]color: #fff;[/COLOR]
[COLOR=gray]}[/COLOR]
    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 */
[COLOR=gray]#page_header {[/COLOR]
[COLOR=gray]margin-bottom: 1px;[/COLOR]
[COLOR=gray]background: url('images/header_image.gif') no-repeat 100% 0px;[/COLOR]
[COLOR=gray]width: 732px;[/COLOR]
[COLOR=gray]height: 174px;[/COLOR]
[COLOR=gray]overflow: hidden;[/COLOR]
[COLOR=gray]}[/COLOR]
 
[COLOR=red]#page_header_about[/COLOR] {
 margin-bottom: 1px;
 background: url('images/[COLOR=red]header_about.gif'[/COLOR]) no-repeat 100% 0px;
 width: 732px;
 height: 174px;
 overflow: hidden;
}
 
[COLOR=gray]#page_header h1 {[/COLOR]
[COLOR=gray]width: 221px;[/COLOR]
[COLOR=gray]height: 174px;[/COLOR]
[COLOR=gray]background: url('images/website_name.gif') #387e28 no-repeat 50% 50%;[/COLOR]
[COLOR=gray]color: #fff;[/COLOR]
[COLOR=gray]}[/COLOR]
    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:
    [B]<body>[/B]
[B]<div[/B] id=[B]"container">[/B]
[I][COLOR=#ff0000][COLOR=#ff0000]<!-- Start of Page Header -->[/COLOR][/COLOR][/I]
[B]<div[/B] id=[B]"[COLOR=green]page_header_about[/COLOR]">[/B]
[B]<h1><span>[/B]Football Card[B]</span></h1>[/B]
[B]<h3><span>[/B]Company Caption Here[B]</span></h3>[/B]
[B]</div>[/B]
[SIZE=1][B][I][SIZE=1][COLOR=#ff0000][SIZE=1][COLOR=#ff0000]<!-- End of Page Header -->[/COLOR][/SIZE][/COLOR][/SIZE][/I][/B]
[/SIZE]
    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:
    [COLOR=#ff0000][I][COLOR=#ff0000]<!-- Start of Order Cards -->[/COLOR][/I][/COLOR]
[B]<div[/B] id=[B]"[COLOR=green]order_cards[/COLOR]">[/B]
[B]<div[/B] id=[B]"[COLOR=green]order_accept[/COLOR]">[/B]
[B]<h3><span>[/B]We Accept:[B]</span></h3>[/B]
[B]<[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"http://www.freewebsitetemplates.com/forum/images/order_creditcards.gif"[/B] width=[B]"278"[/B] height=[B]"28"[/B] alt=[B]"Paypal, Visa, Mastercard, Amex Discover, eCheck"[/B] [B]/>[/B]
[B]</div>[/B]
 
[B]<h2><span>[/B]Three Ways to Order Cards[B]</span></h2>[/B]
 
[B]<ul>[/B]
[B]<li[/B] [COLOR=green]id=[/COLOR][B][COLOR=green]"online[/COLOR]"><[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"[/B][U][COLOR=#0000f0][COLOR=#0000f0]http://www.freewebsitetemplates[/COLOR][/COLOR][/U][B]"><span>[/B][I]&nbsp;[/I][B]</span><b[/B] class=[B]"block">[/B]Online[B]</b></[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li>[/B]
[B]<li[/B] [COLOR=green]id=[/COLOR][B][COLOR=green]"phone[/COLOR]"><[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"[/B][U][COLOR=#0000f0][COLOR=#0000f0]http://www.freewebsitetemplates[/COLOR][/COLOR][/U][B]"><span>[/B][I]&nbsp;[/I][B]</span><b[/B] class=[B]"block">[/B]Phone[B]</b></[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li>[/B]
[B]<li[/B] [COLOR=green]id=[/COLOR][B][COLOR=green]"mail[/COLOR]"><[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"[/B][U][COLOR=#0000f0][COLOR=#0000f0]http://www.freewebsitetemplates[/COLOR][/COLOR][/U][B]"><span>[/B][I]&nbsp;[/I][B]</span><b[/B] class=[B]"block">[/B]Mail[B]</b></[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li>[/B]
[B]</ul>[/B]
[B]<div[/B] class=[B]"clearthis">[/B][I]&nbsp;[/I][B]</div>[/B]
[B]<div[/B] id=[B]"[COLOR=green]order_text[/COLOR]">[/B]
[B]<p>[/B]
Visit [B]<[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] style=[B]"[COLOR=#008000][COLOR=#008000]color[/COLOR][/COLOR]:#ff0000;"[/B] href=[B]"[/B][U][COLOR=#0000f0][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/COLOR][/U][B]">[/B]our website[B]</[COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]>[/B] for more website templates.
[B]</p>[/B]
[B]</div>[/B]
[B]</div>[/B]
[I][SIZE=1][COLOR=#ff0000][SIZE=1][COLOR=#ff0000][SIZE=2]<!-- End of Order Cards -->[/SIZE][/COLOR][/SIZE][/COLOR][/SIZE][/I]
    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.
     
    ishkey, Oct 14, 2009
    #2
  3. pabst

    pabst New Member

    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.

    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, Oct 14, 2009
    #3
  4. pabst

    pabst New Member

    Hey, Sorry, I've made a rookie mistake and neglected to upload the main_image.gif....
     
    pabst, Oct 14, 2009
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    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[COLOR=red](/[/COLOR]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:
    [B][SIZE=1][SIZE=2]<div[/SIZE][/SIZE][/B][SIZE=1][SIZE=2] id=[/SIZE][B][SIZE=2]"home_image"></div>[/SIZE][/B]
[/SIZE]
     
    ishkey, Oct 14, 2009
    #5