new content type "three column"

consistency · Post by **consistency** » Mon 11. Jul 2005, 11:21

made it just for exercise:
quick and dirty implemented an three column html content element.

just try it: http://www.consistency.at/download/phpw ... col0.1.zip

luna · Post by **luna** » Sun 24. Jul 2005, 05:56

Do you mean three rows content????

After installation on 1.2.3 dev I'm getting the content into three rows and not colums

consistency · Post by **consistency** » Sun 24. Jul 2005, 06:04

it is three col content.
in backend its only shown as three rows because editing is easier.

luna · Post by **luna** » Sun 24. Jul 2005, 06:20

ok I have this into the source code
<h3>Title</h3>
<h4>Subtitle</h4>
<div class="threecol" id="threecol">content1</div>
<div class="threecol" id="threecol">content2</div>
<div class="threecol" id="threecol">content3</div>

So is this supposed to work if we add our own "threecol" CSS?
in the zip file there is no an aditional css div class.

consistency · Post by **consistency** » Sun 24. Jul 2005, 06:26

oh i missed that, you are the first person testing...

Code: Select all

.threecol
{
	float: left;
	width: 190px;
	/*margin-left: 10px;
	margin-right: 10px;*/
	padding-left: 10px;
	padding-right: 10px;
	/*border: 1px solid yellow; */
	margin-bottom: 0px;
	margin-top: 0px;
}

hope it work now, just tell if something is missing.

luna · Post by **luna** » Sun 24. Jul 2005, 06:37

Ok mate that was

Now work fine but I think that the width is not neccessary
for smaller or larger {CONTENT} than 190 px so this will work best in this way

Code: Select all

		  .threecol
{
   float: left;
    /* width: 190px;
   /*margin-left: 10px;
   margin-right: 10px;*/
   padding-left: 10px;
   padding-right: 10px;
   /*border: 1px solid yellow; */
   margin-bottom: 0px;
   margin-top: 0px;
}

or setting the width to the {CONTENT} width

BTW. Good Job mate.

consistency · Post by **consistency** » Sun 24. Jul 2005, 06:42

thank you for feedback, testing and "likeing"

luna · Post by **luna** » Sun 24. Jul 2005, 07:08

I have tested some more this hack and noticed that i'm giving strange results on different browser.
So i think that an good improvement will be to define float left and right in the css
here is an example code

Code: Select all

<html>
<head>
<style>
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}
</style>
</head>
<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>
</html>

This is working fine in all browsers that i was tested.

consistency · Post by **consistency** » Sun 24. Jul 2005, 07:20

its the xhtml problem, see my post in this thread: http://www.phpwcms.de/forum/viewtopic.p ... highlight=

but thanks for correcting.

JensZ · Post by **JensZ** » Tue 13. Sep 2005, 15:00

Hi,

What is it used for? Is it just used instead of having a template with three custom blocks, say {col1}, {col2}, and {col3}?

Jens

consistency · Post by **consistency** » Tue 13. Sep 2005, 15:10

yes, just instead of three custom blocks. it was only an exercise for me, just played around.