The layout builder now uses the holy grail CSS code

contao · May 24, 2012 · cfc114c · cfc114c
1 parent 3bfbb54
commit cfc114c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 34 deletions.
diff --git a/assets/contao/layout-uncompressed.css b/assets/contao/layout-uncompressed.css
@@ -38,24 +38,31 @@ body,.inside,.custom {
 /**
  * Fix some positioning issues
  */
-body,#main,.inside {
+body,#container,#footer,.inside {
 	position:relative;
 }
-*+html #main {
-	position:static;
-}
 
 /**
- * Float the left and right column
+ * @see http://www.alistapart.com/articles/holygrail
  */
-#left {
-	float:left;
+
+#container {
+	overflow:hidden;
 }
-#right {
-	float:right;
+#main,#left,#right {
+	float:left;
+	position:relative;
+	padding-bottom:1000em;
+	margin-bottom:-1000em;
 }
 #main {
-	width:auto;
+	width:100%;
+}
+#left {
+	margin-left:-100%;
+}
+#right {
+	margin-right:-100%;
 }
 
 /**

diff --git a/assets/contao/layout.css b/assets/contao/layout.css
diff --git a/system/docs/CHANGELOG.md b/system/docs/CHANGELOG.md
@@ -4,6 +4,12 @@ Contao Open Source CMS Changelog
 Version 3.0.beta2 (XXXX-XX-XX)
 ------------------------------
 
+### Changed
+The layout builder now uses the holy grail CSS code to generate the columns.
+This moves the main column above the left and right column, which is good for
+SEO purposes and for repsonsive designs. If it turns out that this is not
+backwards compatible, it can be reverted.
+
 ### New
 Made the Contao CSS framework configurable in the page layout module and added
 an optional reset style sheet and a responsive 12-column grid. If none of the

diff --git a/system/modules/core/classes/StyleSheets.php b/system/modules/core/classes/StyleSheets.php
@@ -984,7 +984,7 @@ public function compileDefinition($row, $blnWriteToFile=false, $vars=array())
 		// CSS3PIE
 		if ($blnNeedsPie)
 		{
-			$return .= $lb . 'behavior:url(\'plugins/'.CSS3PIE.'/css3pie/PIE.htc\');';
+			$return .= $lb . 'behavior:url(\'plugins/css3pie/'.CSS3PIE.'/PIE.htc\');';
 		}
 
 		// Custom code

diff --git a/system/modules/core/pages/PageRegular.php b/system/modules/core/pages/PageRegular.php
@@ -228,7 +228,7 @@ protected function createTemplate($objPage, $objLayout)
 				}
 			}
 
-			$strMain = '';
+			$strContainer = '';
 
 			// Left column
 			if ($objLayout->cols == '2cll' || $objLayout->cols == '3cl')
@@ -237,8 +237,8 @@ protected function createTemplate($objPage, $objLayout)
 
 				if ($arrSize['value'] != '' && $arrSize['value'] >= 0)
 				{
-					$strFramework .= sprintf('#left{width:%s}', $arrSize['value'] . $arrSize['unit']);
-					$strMain .= sprintf('margin-left:%s;', $arrSize['value'] . $arrSize['unit']);
+					$strFramework .= sprintf('#left{width:%s;right:%s}', $arrSize['value'] . $arrSize['unit'], $arrSize['value'] . $arrSize['unit']);
+					$strContainer .= sprintf('padding-left:%s;', $arrSize['value'] . $arrSize['unit']);
 				}
 			}
 
@@ -250,14 +250,14 @@ protected function createTemplate($objPage, $objLayout)
 				if ($arrSize['value'] != '' && $arrSize['value'] >= 0)
 				{
 					$strFramework .= sprintf('#right{width:%s}', $arrSize['value'] . $arrSize['unit']);
-					$strMain .= sprintf('margin-right:%s;', $arrSize['value'] . $arrSize['unit']);
+					$strContainer .= sprintf('padding-right:%s;', $arrSize['value'] . $arrSize['unit']);
 				}
 			}
 
 			// Main column
-			if ($strMain != '')
+			if ($strContainer != '')
 			{
-				$strFramework .= sprintf('#main{%s}', substr($strMain, 0, -1));
+				$strFramework .= sprintf('#container{%s}', substr($strContainer, 0, -1));
 			}
 
 			// Footer

diff --git a/system/modules/core/templates/fe_page.html5 b/system/modules/core/templates/fe_page.html5
@@ -30,6 +30,13 @@
 <?php echo $this->getCustomSections('before'); ?>
 
 <div id="container">
+
+<div id="main">
+<div class="inside">
+<?php echo $this->main; ?> 
+</div>
+<?php echo $this->getCustomSections('main'); ?> 
+</div>
 <?php if ($this->left): ?>
 
 <aside id="left">
@@ -47,14 +54,6 @@
 </aside>
 <?php endif; ?>
 
-<div id="main">
-<div class="inside">
-<?php echo $this->main; ?> 
-</div>
-<?php echo $this->getCustomSections('main'); ?> 
-<div id="clear"></div>
-</div>
-
 </div>
 <?php echo $this->getCustomSections('after'); ?>
 <?php if ($this->footer): ?>

diff --git a/system/modules/core/templates/fe_page.xhtml b/system/modules/core/templates/fe_page.xhtml
@@ -31,6 +31,13 @@
 <?php echo $this->getCustomSections('before'); ?>
 
 <div id="container">
+
+<div id="main">
+<div class="inside">
+<?php echo $this->main; ?> 
+</div>
+<?php echo $this->getCustomSections('main'); ?> 
+</div>
 <?php if ($this->left): ?>
 
 <div id="left">
@@ -48,14 +55,6 @@
 </div>
 <?php endif; ?>
 
-<div id="main">
-<div class="inside">
-<?php echo $this->main; ?> 
-</div>
-<?php echo $this->getCustomSections('main'); ?> 
-<div id="clear"></div>
-</div>
-
 </div>
 <?php echo $this->getCustomSections('after'); ?>
 <?php if ($this->footer): ?>