Two Column theme - nearly there

uk_martin · October 23, 2010, 09:51:19 AM

Following on from my header problem which has been solved, sort of, the next thing that is troubling me is the bit of CSS tweaking that is needed to keep the "<div id="columns"> WITHIN the borders of the wrapper div, so that the borders become self expanding according to the size of the contents within.

Work in progress is here - http://www.brummiesfans.com/coppermine/index.php
As can be seen, this is a combination of the Curve style and the header code from phpBB3's "ProSilver", which I was a solution to a problem descriobed on another thread. I've now tried to add a second column to it. The menu div's are where you want them to be, as is the footer which is partially obscured by the overflowing columns div. The problem lies with the bit in the middle.

I'd appreciate the help of anyone who can tell me where I've gone wrong on this, so that I can take it forward. code for the template and css follow.

Thanks

Martin

TEMPLATE.HTML

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="css/coppermine.css" type="text/css" />
<link rel="stylesheet" href="themes/brummies/style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- Begin IE6 support -->
<!--[if lt IE 7]>
<style>
body {behavior: url(themes/brummies/csshover3.htc );}
.dropmenu li {width: 1px;} .dropmenu li a.firstlevel span.firstlevel {white-space: nowrap;} .main_menu {overflow: auto;}
</style>
<![endif]-->
<!-- End IE6 support -->
{JAVASCRIPT}
<!--
  SVN version info:
  Coppermine version: 1.5.8
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/brummies/template.html $
  $Revision: 7805 $
-->
</head>
<body>

<div style="padding:0 0px;min-width:650px;width:900px;margin:0 auto;">
    <div class="border-top"><div class="border-bottom"><div class="border-left"><div class="border-right">
<div class="border-top-left"><div class="border-top-right"><div class="border-bottom-left"><div class="border-bottom-right"><div class="inside">

<div id="header"></div>
            <div class="clearer"></div>
        </div>
            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
<!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>
            {MESSAGE_BLOCK}
        </div>

<div id="columns">

        <div id="left">
        <div class="clearer"></div>
        <a>menu</a>
            <br /> <!-- workaround for issue 64492 - do not remove the line break! -->
        
        </div>

        <div id="main">
        <div class="clearer"></div>
            <p>&nbsp;</p>
            <p>{GALLERY} <br />
            </p> 
            <!-- workaround for issue 64492 - do not remove the line break! -->
            
        </div>
        
    <div class="clearer"></div>
    
</div>

        <div>
            {CUSTOM_FOOTER}
            {CREDITS}
        </div>


</div></div></div></div></div></div></div></div></div>
    
</div>
</body>
</html>

STYLE.CSS

Code Select

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2010 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.

  ********************************************
  Coppermine version: 1.5.6
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/curve/style.css $
  $Revision: 7620 $
**********************************************/


body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}



.border-top					{background: url(images/border_top.png) repeat-x 0 0;}
.border-bottom 				{background: url(images/border_bottom2.png) repeat-x 0 100%;}
.border-left				{background: url(images/border_left.png) repeat-y 0 0;}
.border-right				{background: url(images/border_right.png) repeat-y 100% 0;}
.border-top-left			{background: url(images/border_top_left.png) no-repeat 0 0;}
.border-top-right 			{background: url(images/border_top_right.png) 100% 0 no-repeat;}
.border-bottom-left 		{background: url(images/border_bottom_left.png) 0 100% no-repeat;}
.border-bottom-right 		{background: url(images/border_bottom_right.png) 100% 100% no-repeat;}
.header						{background: url(images/header_random_1.png) no-repeat;}
.inside 					{padding: 10px 10px 10px 10px;}
.clear {clear: both and height: 0}

#header {
	background-color: transparent;
	background-image: url(images/header_random_1.png);
    background-position: 100%
    background-repeat: no-repeat;
	background-attachment: scroll;
	display: block;
	padding-top: 108px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

#columns {
	position: relative;
	width: 880px;
	top: 0px;
	height: inherit;
}
#left {
	position:absolute;
	width:165px;
	top: 0px;
	left:0px;
	padding-left:10px;
	padding-right:5px;
}
#main{
	position:absolute;
	width: 695px;
	top: 0px;
	right: 0px;
	padding-left:5px;
}




#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
//    background-image: url(images/header_random_1.png);
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -240px;
    display: block;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}




#cpg_logo_block_logo {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
    background-position: 100%
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: block;
    padding-top: 112px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

 - the rest of the stylesheet is as per the standard "Curve" stylesheet that it was derived from  -