Equal height left,main,right column's

Freemann · Post by **Freemann** » Sun 29. Jul 2007, 19:27

When the left and right column have a background color, then the left and right column do not fill-out to the bottom point of the maincontent part.

Is this by behavour,did i broke something or do i need to modify something?

pepe · Post by **pepe** » Sun 29. Jul 2007, 20:09

Show us your URL... and - may be - we can help

Freemann · Post by **Freemann** » Sun 29. Jul 2007, 20:22

oeps

http://www.frijmann.nl/index.php?id=1,0,0,1,0,0
4example

It is not only when the have a background-color, it is always so. But when you apply a background-color, it is visible that the are not equal in height

edit:
This is only by div/CSS rendering. On the net i read about a "hack" you need to apply in CSS with id's and class names to get all column equal heigh. But how do i do this in PHPwcms?

pepe · Post by **pepe** » Sun 29. Jul 2007, 22:13

the easiest way woud be a Background-Image for the main-container

<div id="wrapper">
<div id="header">...</div>

<div id="main-container">
<div id="left-column">{LEFT}</div>
<div id="content-container">{CONTENT}</div>
<div id="right-column">{RIGHT}</div>
</div>

<div id="footer">...</div>
</div>

Freemann · Post by **Freemann** » Sun 29. Jul 2007, 22:46

oke but that's only possible when all column's have the same background color.

Here is a example:
source:
equal-height-columns

Code: Select all

<head>
<style type="text/css">
      #container { overflow: hidden; }
      #container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
      #container .col2 { background: #eee; }
	</style>
</head>

<body>
	<div id="container">
	   <div>
	      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget <p>
	   </div>
	   <div class="col2">
	      <p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing p>
         <p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla .</p>
	   </div>
	   <div>
	      <p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus.</p>
         <p>Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, p>
	   </div>
	</div>
</body>

But is it possible to apply this to phpwcms and how??

pepe · Post by **pepe** » Mon 30. Jul 2007, 00:18

No! You are wrong!!!

Make a Background-GIF-Image with a width of your wrapper container... ( say 900px and 10px height )

left = 200px = green
middle = 500px = white
right = 200px = yellow

+----------------------+---------------------------------------------+---------------+
+----------------------+---------------------------------------------+---------------+

... and you will see!!!

http://www.alistapart.com/articles/fauxcolumns/

Freemann · Post by **Freemann** » Mon 30. Jul 2007, 00:28

hmm

oke i'm gonne try it tomorrow(oeps its already tomorrow

)!

I report me at the end of de morning of begin of the evening:)

pico · Post by **pico** » Mon 30. Jul 2007, 07:57

What's up, good People?

find some Basics in this CSS-Framework. http://www.yaml.de/en/documentation/css ... sheet.html
http://www.yaml.de/en/documentation/pra ... lumns.html

You need serval DIV-Container and some clearings

Code: Select all

<!-- begin: main content area #main -->
    <div id="main">

      <!-- begin: #col1 - first float column -->
      <div id="col1">
        <div id="col1_content" class="clearfix">
        ...
        </div>
      </div>

      <!-- begin: #col2 - second float column -->
      <div id="col2">
        <div id="col2_content" class="clearfix">
        ...
        </div>
      </div>

      <!-- begin: #col3 static column -->
      <div id="col3">
        <div id="col3_content" class="clearfix">
        ...
        </div>
        <!-- IE Column Clearing -->
        <div id="ie_clearing">&nbsp;</div>
      </div>

    <!-- end: #main -->
    </div>

Freemann · Post by **Freemann** » Mon 30. Jul 2007, 13:29

oke i looked again on pepe his solution and that works but is in my eye's not THE solution because i want it te be a div solution

.

Can pico tell me how i can implement this in phpwcms?

pico · Post by **pico** » Mon 30. Jul 2007, 13:37

Hi good People?

nöööö

still have done this -> http://www.phpwcms.de/forum/viewtopic.php?p=89475#89475
OK it's in German - if you need translation just ask

Freemann · Post by **Freemann** » Mon 30. Jul 2007, 14:27

Thanx pico!!!

It's "working" what the code changes, but i'm totaly lost with copying the YAML css files to the wright locations.I've downloaded the YAML 3.01 pack and copied "layout_1-3-2.css" to "template/inc_css" but what do i need te unpack all the other files?

This is the site for now:
http://www.frijmann.nl/

edit:
Oke it's seames to work after I playing with the url's of the .css file's in the layout_1-3-2.css . BUT now are the columns still not equal in height....

pico · Post by **pico** » Mon 30. Jul 2007, 15:18

Hi

I have created a Subfolder in inc_css named yaml where I copied all Files from the Archive yaml-Folder. YAou don't realy need all this Files, but for the 'learning' process it's helpfull to have them all right in Place.

Then copy the content of the CSS-File from Example-Folder for your kind of Layout into the frontend.css or directly into the inc_css Folder and it's Subfolders (patches and screen) into the referending yaml-Folder.

All what you have to do now is to change the Pathes to as Example:

Code: Select all

/* import core styles | Basis-Stylesheets einbinden */
@import url(/yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(yaml/navigation/nav_shinybuttons.css);
@import url(yaml/screen/basemod.css);
@import url(yaml/screen/basemod_2col_left_13.css);
@import url(yaml/screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(yaml/print/print_003_draft.css);

Post by **update** » Mon 30. Jul 2007, 17:00

If still of interest, here is another way:
http://www.pmob.co.uk/search-this/absolute-columns2.htm
claus

Freemann · Post by **Freemann** » Mon 30. Jul 2007, 20:50

oke i'm getting it a little bit

BUT the {NAV_TABLE_COLUMN} broken...(or something like that) the spacings between te "link rows" are way to height. I have searched in the code but i have nothing changed or can find why this is happening.

It's seams so that the spacer is 15 height, but why?????

Please check the source of my site
http://www.frijmann.nl

edit:
<td width="7"><img src="img/leer.gif" width="7" height="15" border="0" alt="" /></td>
<td valign="top"><img src="img/article/nav_link_0.gif" alt="" border="0" name="linkidHu8D57" id="linkidHu8D57" /></td>
<td valign="top" style="height:15px;" width="100%" class="nav_table"><img src="img/leer.gif" width="1" height="2" border="0" alt="" /><br /><a href="index.php?id=1,0,0,1,0,0">Links</a><br /><img src="img/leer.gif" width="1" height="2" border="0" alt="" /></td>
<td width="7"><img src="img/leer.gif" width="10" height="15" border="0" alt="" /></td>
</tr>

Post by **flip-flop** » Tue 31. Jul 2007, 07:01

Please use the NAV_LIST_UL instead of the old NAV_TABLE_COLUMN: http://www.phpwcms.de/forum/viewtopic.php?p=83839#83839

Knut