Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Check out my twisted template!!!
I was inspired by the newspond.com site to create a template for textpattern. But I went a little overboard, I think.
http://www.dallas-website-design.com is the link.
download my desktop wallpaper if you’d like.
Has anybody ever had a problem with the two columns design? Say when the content on one column is longer than the other, the bg image of that column gets cut off at the min height specified?
Here are my main divs, content and subcontent that make it work
#content {
float: left;
width: 784px;
min-height: 500px;
font-size: 10px;
padding: 0 10px 0 20px;
background-image: url(“images/newspond_09.png”);
background-repeat: repeat-y;
}
#subcontent {
float: right;
min-height:500px;
width: 188px;
padding: 0px;
background-image: url(“images/newspond_08_long.png”);
background-repeat: repeat-y;
}
Forrest
Webdesign
Offline
Re: Check out my twisted template!!!
a little weirdness in IE 6 when hovering over your sub nav. “PHP/mySql”
Let me know if you need a screen shot.
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
#3 2008-08-11 16:46:14
- Paulo
- Member
- Registered: 2008-08-02
- Posts: 18
Re: Check out my twisted template!!!
IE can´t render the min-height attribute.
Offline
Re: Check out my twisted template!!!
I fixed all the problems I think. The trick is to have a DIV with a 10px height by width of your site image (image is of the two columns as they show) with the following css:
.fixTwoColumnBG {background: url(“images/template_07.png”) repeat-y; width: 1001px; overflow:auto;}
Inside this DIV is the Left and Right DIV’s (my columns).
Also in is important to have a clear:both in the the next DIV, in my case, footerTop
And, if you have DIV’s with no content, as i do, add a 1px x 1px transparent image in the DIV.
Here is my CSS basic Column structure for my 1001px wide site:
#columnLeft {
margin:0;
padding:0;
float:left;
width:261px;
}
#columnRight {
margin:0;
padding:5px 5px 5px 5px;
float:right;
width:730px;
}
Offline
Re: Check out my twisted template!!!
and
Here is my basic DIV page setup
<div id=“content”>
<div id=“headerTopMargin”><img src=“images/spacer.gif” width=“1” height=“1” /></div> <div id=“header”><a href=“index.html”><img src=“images/logo.jpg” width=“215” height=“122” border=“0” class=“logo”></a></div> <div id=“headerNav”><img src=“images/spacer.gif” width=“1” height=“1” /></div> <div id=“headerBottom”><img src=“images/spacer.gif” width=“1” height=“1” /></div> <div class=“fixTwoColumnBG”> <div id=“columnLeft”></div> <div id=“columnRight”></div> </div> <div id=“footerTop”><img src=“images/spacer.gif” width=“1” height=“1” /></div> <div id=“footerNav”> </div></div>
Last edited by extrapixels (2008-08-16 04:39:41)
Offline
Re: Check out my twisted template!!!
You’re joking, right? Spacer images?
Also, please post code in Textile format (bc.. ).
Offline