• From: London, England
  • Registered: 2006-09-18
  • Posts: 150

Topic: CSS - Two column PunBB

Can someone help me code some CSS to add to a .tpl file to make a page look like this:

http://img105.imageshack.us/img105/58/aaaaaaaayy8.png
So, the code would look something like this:

<style>

/* css for #left #right and #fullwidth goes here */

</style>
<div id="fullwidth">
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
</div>
<div id="left">
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
</div>
<div id="right">
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
</div>
<div id="fullwidth">
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
  <div class="block">
    <h2><span> </span></h2>
    <div class="box">
      <div class="inbox">
        <p> </p>
      </div>
    </div>
  </div>
</div>

Do I need to explain more?

[img]http://liquidat0r.com/logo.png[/img]

liquidat0r's Website

2 Reply by quaker (edited by quaker 2007-03-29 04:28)

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: CSS - Two column PunBB

i made a three column css
http://nalan.org
add that to the main.tpl
between the pun_head
and the /head

<pun_head>
<style type="text/css">
      #left     {
    float:left;
    width: 160px;
    overflow: hidden;
}

#right     {
    float:right;
    width: 160px;
    overflow: hidden;
}
 /*#container {
        width: 100%;
        float: right;
        margin-left: -180px;
    }*/
#main {margin-left:175px; margin-right:175px;}
#punwrap {width: 950px; margin: 12px auto}
    </style>
</head>
My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • Registered: 2007-03-17
  • Posts: 2

Re: CSS - Two column PunBB

Is your layout a fixed width or it is liquid?  Don't use the same "id" twice in one page.  Personally, I think you're over DIV your layout.

Here's my code based on your layout.

<style type="text/css" media="screen">

/* Header and Menu */
#brdheader    {
    width: 100%;
    margin: 0 auto;
    margin-left: 150;
    margin-right: 150px;
    margin-bottom: 30px;
    background: red;
    }
    
    #brdheader h1    {
    }
    
    #brdheader ul    {
    }
    
    #brdheader ul li    {
    }
    
/* Content and Sidebar */
#contentwrapper    {
    width: 100%;
    margin: 0 auto;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 30px;
    }
    
    #sidebar    {    /* Fixed Width */
        width: 250px;
        float: right;
        height: 300px;
        background: red;
        }
    
    .blocktable    {    /* Liquid */
        margin-right: 260px;
        height: 300px;
        background: red;
    }
    
    
#brdstats, #brdfooter    {
    width: 100%;
    margin: 0 auto;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 30px;
    background: red;
    }
    
</style>

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

    <!-- Header and Main Menu -->
    <div id="brdheader" class="block">
        <div class="box">
        
            <!-- Header -->
            <div id="brdtitle" class="inbox">
                <pun_title>
                <pun_desc>
            </div>
            
            <!-- Menu -->
            <pun_navlinks>
            
            <!-- Forum Status -->
            <pun_status>
        </div>
    </div>
    
    
    <!-- Content and Sidebar -->
    <div id="contentwrapper">
    
        <!-- Sidebar -->
        <div id="sidebar">
            This is the sidebar
        </div>
    
        <!-- Forum Content -->
        <pun_main>
    
    </div>
    
    <!-- Forum Stats and Footer -->
    <pun_footer>

</div>
</div>
  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: CSS - Two column PunBB

fixed width,
#punwrap {width: 950px; margin: 12px auto}
that set the width and the centering.....

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • From: London, England
  • Registered: 2006-09-18
  • Posts: 150

Re: CSS - Two column PunBB

Thanks quaker, but I need 2 column not 3 column -- I already use your three column somewhere else wink

---

limited, thanks but that doesn't work very well and it's not quite what I am after.

---

Here is an example of what I want these page(s) to look like. The following pages is formatted using tables, but as you can see it has caused some problems. This is not the actual page I want to link to this new tpl file -- but you get the idea.

http://www.kntl.co.uk/bf2stats/index.ph … t+stats%21

---

My forums are of a percentage width.

[img]http://liquidat0r.com/logo.png[/img]

liquidat0r's Website

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: CSS - Two column PunBB

ok simple then... take out the right or left add the value to the main.

Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • From: Canada
  • Registered: 2007-02-18
  • Posts: 760

Re: CSS - Two column PunBB

@quaker - I don't know if you realize but your when viewing your forums, example a thread, the layout and posts are way down to the bottom. I've found a solution for this and one of the guys here on the punBB Team added it to the mini portal mod on punRes. You may want to add that bit to your main.tpl file.

Cheers!

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: CSS - Two column PunBB

what is it called?
or a link?


that a bug that i find.....
thanks
Q

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website