1 Topic by mesmerize (edited by mesmerize 2007-08-06 13:25)

  • Registered: 2007-08-02
  • Posts: 16

Topic: punwrap graphics

I have the following designed forum:
http://www.stockmarketgame.biz/forum/
based upon the Kontrast template.

However, if you look at the repeating background tile that creates the side edges, it shows at the top.
The reason it does this is because I made the top graphic transparent so you could see the striped background.
But it means this repeating image can be seen underneath (as they both start at the same xy point).

Is there a way using CSS to make just the tiled background appear a bit lower down? I have tried everything from margins to padding in the stylesheets.

Thanks in advance for your help.
David.

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: punwrap graphics

You can set the top position of a background image in pixels or percent e.g. if you set the top position as 10px then it will start 10px from the top of the containing box. Take a look here
http://www.w3schools.com/css/pr_background-position.asp

  • Registered: 2007-08-02
  • Posts: 16

Re: punwrap graphics

Yes, I have tried to change the top position in the CSS and in truth I have been unable to move the top graphic differently to the other repeating side graphic. They seem to be linked in the CSS code:
#punwrap {
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background-repeat: repeat-y;
}
.pun {
    padding-top: 35px;
    padding-left: 40px;
    padding-right: 40px;
    background-repeat: no-repeat;

I have tried everything I can and I am hoping for someone to look at:
http://www.stockmarketgame.biz/forum/style/Kontrast.css
and
http://www.stockmarketgame.biz/forum/st … ast_cs.css

and provide a solution.
I'm just so stuck with this and as you can see, it looks horrible.

Thanks to all in advance.

4 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: punwrap graphics

If you want to sort it easily rather than using complicated and slightly flakey css do it like this

1. Open main.tpl and add an extra wrapping div between #punwrap and .pun. Give it an id of pun-inner.

2. Put your top graphic on #punwrap. Give punwrap top padding of 30px. Position the grapic top left with no-repeat.

3. Put your bottom graphic on the new div #pun-inner with a background position of bottom left and no-repeat. Give the div bottom padding of 30px.

4. Put you side graphic bg.gif on .pun with repeat-y. Reduce the top padding on .pun to 5px.

Your problem is that you currently have the top and bottom graphics nested inside the background graphic which is the wrong order. The above puts everything into a more manageable order.

  • Registered: 2007-08-02
  • Posts: 16

Re: punwrap graphics

Dear Paul,

Thank you so much for your help, as you can see from the forum, it is now fixed.

Apart from the bottom graphic, which is no longer showing. How do I get that to show?

Just to let you know I have followed your instructions to the word and with 4 hours of playing around I managed to understand a lot more about CSS, thanks.

David

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: punwrap graphics

You didn't follow steps 1 and 3.  What I meant was you main.tpl file should now look like this

<div id="punwrap">
<div id="pun-inner">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>
</div>

You then give the div with id="pun-inner" 30px bottom padding and set the bottom graphic as a background to that div with a position of bottom left and no-repeat.

The idea is that the side graphic is now inside the top and bottom graphics so there is no possibility of it overlapping them.

  • Registered: 2007-08-02
  • Posts: 16

Re: punwrap graphics

Did you know, I couldn't find that file. I didn't even know that it existed, i thought the word main.tpl stood for main template. I had been trying to make it work using just the css files for hours.

I found the file and have updated the site. I thank you greatly.

  • Registered: 2007-08-02
  • Posts: 16

Re: punwrap graphics

I'm assuming I have to change admin ad redirect to make those also look the same and have the bottom graphic.
It just puzzles me that I have to change files outside the template to make this work, when all I downloaded was the template? If you understand what I mean? It seems like a situation or problem that would occur often if the forum was designed this way with these <div> tags?

9 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: punwrap graphics

main.tpl does stand for main template. You could have made it work without changing main.tpl but it involved some rather advanced css which would have needed a lot of tinkering to work properly. The problem is the style author didn't design the css to work with transparent backgrounds. Had he done so the css would have been different in the first place.

  • Registered: 2007-08-02
  • Posts: 16

Re: punwrap graphics

Ah, I understand then, well it's all done now and Thank you.

It's caused a gap on my redirect page before the bottom graphic, but i can live with that, thanks for your time on this.

11 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: punwrap graphics

You seem to be missing the closing </div> for punbottom at the end of the template.

EDIT: you fixed it.