Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2008-08-10 09:39:40

extrapixels
New Member
From: Dallas
Registered: 2008-08-10
Posts: 4
Website

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

#2 2008-08-11 16:11:11

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

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.


My Plugins

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

#4 2008-08-16 04:37:47

extrapixels
New Member
From: Dallas
Registered: 2008-08-10
Posts: 4
Website

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

#5 2008-08-16 04:38:46

extrapixels
New Member
From: Dallas
Registered: 2008-08-10
Posts: 4
Website

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

#6 2008-08-16 04:49:22

jm
Plugin Author
From: Missoula, MT
Registered: 2005-11-27
Posts: 1,746
Website

Re: Check out my twisted template!!!

You’re joking, right? Spacer images?

Also, please post code in Textile format (bc.. ).

Offline

Board footer

Powered by FluxBB