Zymic Webmaster Forums > Need Help With Template #75

Full Version: Need Help With Template #75

Zymic Webmaster Forums > Zymic.com Support > Zymic Free Web Templates

Nikko38

Jun 9 2008, 12:56 PM

Hi all, I would like to thank the guys at zymic for providing these free templates, and I will be paying for the copyright removal in the future. Hopefully someone can help me out with my problem

Heres my problem...

I have been making a site with template #75, which features 3 different "packages" that you can put on it, however I can't figure out how to make it into 3 individual packages, instead of 3 repeating packages.

Here is the code from the style: As you can see, there is only a package "A", but on the template, there is 3 places to put different packages. What I would like to do is have each package a different image.

CODE

#packages {
    background: url(images/packagesbg_10.gif);
    width: 685px;
    height: 196px;
    padding: 10px;
    float: left;
    }


#packages li {
    list-style-type: none;
    float: left;
    }

#packages a {
    background-image: url(images/package_11.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

Hope somebody can help me out! Thanks!

Banjo

Jun 9 2008, 05:31 PM

You could just copy the code but change the package name.

Like this...

CSS:

CODE

#packages2 {
    background: url(images/packagesbg_10.gif);
    width: 685px;
    height: 196px;
    padding: 10px;
    float: left;
    }


#packages2 li {
    list-style-type: none;
    float: left;
    }

#packages2 a {
    background-image: url(images/package_11.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

#packages3 {
    background: url(images/packagesbg_10.gif);
    width: 685px;
    height: 196px;
    padding: 10px;
    float: left;
    }


#packages3 li {
    list-style-type: none;
    float: left;
    }

#packages3 a {
    background-image: url(images/package_11.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

So if you add that to your style sheet and change the images to what you want. Then for the html

At the moment the html is like this

CODE

Just change it to

CODE

I don't know if that works because i havent seen all the code but you could also try it like

CODE

You'll just have to mess about with it, but yeh just use the same css but give it a different name and change the name in the divs.

Andrew

Jun 9 2008, 05:41 PM

Fixed it, just so you know, that isn't packages A as in the first package, thats "a" as in <a href
So what I did, was I replaced a with .one and made two more copies of that. .two and .three

CODE

#packages .one {
    background-image: url(images/package_11.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

#packages .two {
    background-image: url(images/package_12.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

#packages .three {
    background-image: url(images/package_13.gif);
    width: 223px;
    height: 196px;
    display: block;
    margin-right: 5px;
    }

then in the HTML I edited the three link area to include class one two and three.

CODE

Shit, I even zipped it up for ya!Click to view attachment

QUOTE(Banjo @ Jun 9 2008, 01:31 PM)

Just change it to

CODE

I don't know if that works because i havent seen all the code but you could also try it like

That will mess up the layout. horribly.

Banjo

Jun 9 2008, 05:54 PM

QUOTE

That will mess up the layout. horribly.

As i said i don't know if it works just from the top of my head.

Andrew

Jun 9 2008, 05:57 PM

Yea I know, just letting the OP know.

Banjo

Jun 9 2008, 06:05 PM

Nikko38

Jun 9 2008, 06:16 PM

Wow, it works great! thank you very much! Appreciate it.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.