Maybe it's easier to drop the whole cpg_logo_block_outer div and rebuild it from scratch to fit your needs?
I was slowly coming to that solution myself, as there were other aspects that I wanted to customise as well. I've made a start, based on the phpBB3 template and style, but have hit a snag.
An example of where I am at is here -
http://www.brummiesfans.com/coppermine/themes/brummies/new_template.htmlThe problem I have is that I've probably overlooked something so stupidly simple that I can't see thewood for the trees. What is currently keeping the spacing looking like it is, is the text that is contained in the "<div id="container>" Without that text, the whole layout collapses to look like this -
http://www.brummiesfans.com/coppermine/themes/brummies/new_template2.htmlWhat is it that needs to be done to get the div that features the border, so self-resize, according to the size of the contents, mainly of course the "<div id=main>"
The template (without "supporting" text) and css follow. Any advice on what needs to be amended, before the heavy machinery gets installed, would be appreciated.
Thanks in advance
Martin
CSSbody {
background: #d00000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : Black;
margin: 0px;
padding-top: 10px;
padding-right: 0%;
padding-bottom: 15px;
padding-left: 0%;
}
#container {
float:center;
margin-left:auto;
margin-right:auto;
top: 10px;
width:900px;
min-width: 650px;
}
.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;
}
#menu {
position:relative;
background-color: #ffdd00;
width:860px;
top: 0px;
left:0px;
padding-left:10px;
padding-right:10px;
}
#columns {
position: relative;
width: 880px;
top: 0px;
background-color: #F9F;
}
#left {
position:absolute;
width:165px;
top: 0px;
left:0px;
padding-left:10px;
padding-right:5px;
background-color: #00F;
}
#main{
position:absolute;
width: 695px;
top: 0px;
right: 0px;
padding-left:5px;
background-color: #0F0;
}
#footer {
clear:both;
width:860px;
top: 0px;
left:0px;
padding-left:10px;
padding-right:10px;
background-color: #FF3;
}
TEMPLATE<body>
<div id="container">
<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 id="menu">
<a>Top Menu
</a>
<br /><br />
</div>
<div id="columns">
<div id="left">
<p>Side Menu</p></div>
<p> </p>
<div id=main>
<p>The</p>
<p>Photo </p>
<p>Gallery</p>
</div>
</div>
<div id="footer">
<a>The footer
</a>
<br /><br />
</div></div></div></div></div></div></div></div></div></div></div>
</body>