Topic: 3 column layout help!

this is my style from my main.tpl
http://modelcrowd.com
but they are not lined up right!
Question is what did I do wrong?
I want a 3 column style

<style type="text/css">
       
   #container {
        width: 100%;
        float: right;
        margin-left: -180px;
    }

#left     {float:left; width: 180px;}

#right     {float:right; width: 180px;}

#main {margin-left:200px; margin-right:200px;}

    </style>
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 !!!

Re: 3 column layout help!

I believe you have to float them all the same direction...  at least I've never been able to do a css 3 column layout without them all being floated left.

Re: 3 column layout help!

ok i got it fixed except for a few css issue
the forum threat is not lined up
http://modelcrowd.com/viewtopic.php?id=1
and the gallery image also.
http://modelcrowd.com/gallery.php?pid=2
there got to be something that im doing wrong....

humm...

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 !!!

4 (edited by guardian34 2007-01-29 18:22)

Re: 3 column layout help!

Try removing the clearer div after the breadcrumb links.

Edit: Any clearers besides the one above the footer?

Re: 3 column layout help!

no that didnt work....

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 !!!

6 (edited by MadHatter 2007-01-29 21:07)

Re: 3 column layout help!

your css is messed up... if you turn off your green css, it displays correctly.  I believe the clearer divs in the upper and lower link(st & sb) are causing the large gaps in the layout.


do yourself a huge favor (and anyone else trying to mess with css), download firefox2 and the firebug and web developer add ins.  it will allow you to inspect and change your page on the fly in your browser and is easy enough for me to use it (which is saying a child could too).

Re: 3 column layout help!

in what file?

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 !!!

8 (edited by MadHatter 2007-01-29 21:11)

Re: 3 column layout help!

dunno where the links are lined out at, probably main.tpl, but since I never really used punbb's templates much I wouldn't really know.

this is what it looks like with the green (or whatever main theme you're using) image link.

Re: 3 column layout help!

the clearer div was in the gallery.php, viewtopic and a few other files that i had to remove the <div class="clearer"></div> from and it now works in ie7 and FF

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 !!!

Re: 3 column layout help!

i use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<pun_head>
<style type="text/css">
    #left {
        width: 140px;
        float: left;
    }
    #main {
        margin-left: 150px;
    }
    #container {
        width: 100%;
        float: right;
        margin-left: -140px;
    }
</style>
</head>
<body>
<pun_include "header.inc.php">
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="container">
    <div id="main">
    
        <pun_announcement>
        
        <pun_mod>

        <pun_main>

        <pun_include "google_ads_middle.inc.php">
        
    </div>    
</div>
 
<div id="left">    
    <div class="block">
        <h2><span>Menu</span></h2>
        <div class="box">
        <pun_sidelinks>            
        </div>
    </div>
    
<pun_include "kierownik_menu.inc.php">

<pun_include "wie_is_er_online.inc.php">

<pun_include "top_posters.inc.php">

<pun_include "recenttopics.inc.php">

<pun_include "links.inc.php">
  
<pun_include "google_ads.inc.php">
    
</div>
</div>

<div class="clearer"></div>
 
<pun_footer>

</div>
</div>
<pun_include "footer.inc.php">
</body>
</html>

and it works for me

11

Re: 3 column layout help!

this is a 3 column not 2..
http://modelcrowd.com

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 !!!

12 (edited by kierownik 2007-01-29 21:30)

Re: 3 column layout help!

did you see my site? it has three columns hmm

Oops wrong .tpl hmm

it had to be this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<pun_head>
<style type="text/css">
    #left {
        width: 140px;
        float: left;
    }    
    #right {
        width: 140px;
        float: right;
        margin-left: 0px;
    }
    #main {
        margin-left: 150px;
        margin-right: 150px;
    }
</style>
</head>
<body>
<pun_include "header.inc.php">
<div id="punwrap">
<div id="pun<pun_page>" class="pun">
 
<div id="left">    
    <div class="block">
        <h2><span>Menu</span></h2>
        <div class="box">
          <pun_sidelinks>            
        </div>
    </div>
    
  <pun_include "kierownik_menu.inc.php">

  <pun_include "wie_is_er_online.inc.php">
  
  <pun_include "google_ads.inc.php">

    
   </div>
</div>

<div id="right">
    
  <pun_include "top_posters.inc.php">
  
  <pun_include "recenttopics.inc.php">
  
  <pun_include "random_quote.inc.php">

  <pun_include "links.inc.php">
  
</div>

    <div id="main">

        <pun_main>

        <pun_include "google_ads_middle.inc.php">
        
    </div>
 
<div class="clearer"></div>
 
<pun_footer>

</div>
</div>
<pun_include "footer.inc.php">
</body>
</html>

13

Re: 3 column layout help!

kewl... ill take a look at it... see how things are different.. but i use the frontpage mod so i got to clean up the css in the files.

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 !!!

Re: 3 column layout help!

aha, i do not use the frontpage mod. i just followed the thing on the wiki on punres and it worked smile

15

Re: 3 column layout help!

true.. but there so many mods that comes with frontpage mod..lol. that i dont have to install and hack the php files...haha

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 !!!

Re: 3 column layout help!

I can warmly recommend this A List Apart article which has some nice tricks for multicolumn layouts, plus tons of references to other techniques.