Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Two Column theme - nearly there  (Read 5297 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Two Column theme - nearly there
« on: 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  -

Logged

Jeff Bailey

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1322
  • Fishing relaxes me.
    • Bailey Family Co.
Re: Two Column theme - nearly there
« Reply #1 on: October 23, 2010, 07:06:04 pm »

Take out
Code: [Select]
#left {
position: absolute;
}
and
Code: [Select]
#main {
position: absolute;
}

then add
Code: [Select]
#main {
float: left;
}
and
Code: [Select]
#left {
float: left;
}

Logged
Thinking is the hardest work there is, which is probably the reason why so few engage in it. - Henry Ford

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Two Column theme - nearly there
« Reply #2 on: October 23, 2010, 09:10:33 pm »

Brilliant!!! Thank you very much.
Logged

Jeff Bailey

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Gender: Male
  • Posts: 1322
  • Fishing relaxes me.
    • Bailey Family Co.
Re: Two Column theme - nearly there
« Reply #3 on: October 23, 2010, 09:20:49 pm »

Logged
Thinking is the hardest work there is, which is probably the reason why so few engage in it. - Henry Ford
Pages: [1]   Go Up
 

Page created in 0.017 seconds with 19 queries.