[responsive/portal] Get rid of <table> in portal_body.html

This commit is contained in:
Marc Alexander
2013-12-01 22:56:18 +01:00
parent 61af6d6569
commit 161cc6c209
2 changed files with 62 additions and 35 deletions

View File

@@ -10,11 +10,12 @@
</div> </div>
<!-- ENDIF --> <!-- ENDIF -->
<table id="portal-body"> <div id="portal-body">
<!-- IF S_TOP_COLUMN --> <!-- IF S_TOP_COLUMN -->
<tr id="portal-top"> <div id="portal-top">
<!-- [+] top module area --> <!-- [+] top module area -->
<td colspan="3"> <ul>
<li>
<!-- BEGIN modules_top --> <!-- BEGIN modules_top -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_top.TEMPLATE_FILE}' --> <!-- DEFINE $TEMPLATE_FILE = '{modules_top.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_top.IMAGE_SRC}' --> <!-- DEFINE $IMAGE_SRC = '{modules_top.IMAGE_SRC}' -->
@@ -25,31 +26,15 @@
<!-- DEFINE $MODULE_ID = '{modules_top.MODULE_ID}' --> <!-- DEFINE $MODULE_ID = '{modules_top.MODULE_ID}' -->
<!-- INCLUDE {$TEMPLATE_FILE} --> <!-- INCLUDE {$TEMPLATE_FILE} -->
<!-- END modules_top --> <!-- END modules_top -->
</td> </li>
</ul>
<!-- [-] top module area --> <!-- [-] top module area -->
</tr> </div>
<!-- ENDIF --> <!-- ENDIF -->
<tr>
<!-- [+] left module area -->
<!-- IF S_LEFT_COLUMN -->
<td id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->left<!-- ELSE -->right<!-- ENDIF -->: {$BLOCK_DISTANCE};">
<!-- BEGIN modules_left -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
<!-- INCLUDE {$TEMPLATE_FILE} -->
<!-- END modules_left -->
</td>
<!-- ENDIF -->
<!-- [-] left module area -->
<!-- [+] center module area --> <!-- [+] center module area -->
<!-- IF S_CENTER_COLUMN --> <!-- IF S_CENTER_COLUMN -->
<td id="portal-center"> <div id="portal-center-wrapper">
<div id="portal-center" style="margin: 0 {S_PORTAL_LEFT_COLUMN}px 0 {S_PORTAL_RIGHT_COLUMN}px; padding: 0 {$BLOCK_DISTANCE};">
<!-- BEGIN modules_center --> <!-- BEGIN modules_center -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' --> <!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' --> <!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' -->
@@ -64,13 +49,30 @@
<br /> <br />
<!-- INCLUDE portal/modules/jumpbox.html --> <!-- INCLUDE portal/modules/jumpbox.html -->
<!-- ENDIF --> <!-- ENDIF -->
</td> </div>
<!-- ENDIF --> </div>
<!-- ENDIF -->
<!-- [-] center module area --> <!-- [-] center module area -->
<!-- [+] left module area -->
<!-- IF S_LEFT_COLUMN -->
<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;">
<!-- BEGIN modules_left -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
<!-- INCLUDE {$TEMPLATE_FILE} -->
<!-- END modules_left -->
</div>
<!-- ENDIF -->
<!-- [-] left module area -->
<!-- [+] right module area --> <!-- [+] right module area -->
<!-- IF S_RIGHT_COLUMN --> <!-- IF S_RIGHT_COLUMN -->
<td id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; padding-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: {$BLOCK_DISTANCE};"> <div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-left: -{S_PORTAL_RIGHT_COLUMN}px;">
<!-- BEGIN modules_right --> <!-- BEGIN modules_right -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' --> <!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' --> <!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->
@@ -81,14 +83,15 @@
<!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' --> <!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' -->
<!-- INCLUDE {$TEMPLATE_FILE} --> <!-- INCLUDE {$TEMPLATE_FILE} -->
<!-- END modules_right --> <!-- END modules_right -->
</td> </div>
<!-- ENDIF --> <!-- ENDIF -->
<!-- [-] right module area --> <!-- [-] right module area -->
</tr> <br style="clear: both" />
<!-- IF S_BOTTOM_COLUMN --> <!-- IF S_BOTTOM_COLUMN -->
<tr id="portal-bottom"> <div id="portal-bottom">
<!-- [+] bottom module area --> <!-- [+] bottom module area -->
<td colspan="3"> <ul>
<li>
<!-- BEGIN modules_bottom --> <!-- BEGIN modules_bottom -->
<!-- DEFINE $TEMPLATE_FILE = '{modules_bottom.TEMPLATE_FILE}' --> <!-- DEFINE $TEMPLATE_FILE = '{modules_bottom.TEMPLATE_FILE}' -->
<!-- DEFINE $IMAGE_SRC = '{modules_bottom.IMAGE_SRC}' --> <!-- DEFINE $IMAGE_SRC = '{modules_bottom.IMAGE_SRC}' -->
@@ -99,11 +102,12 @@
<!-- DEFINE $MODULE_ID = '{modules_bottom.MODULE_ID}' --> <!-- DEFINE $MODULE_ID = '{modules_bottom.MODULE_ID}' -->
<!-- INCLUDE {$TEMPLATE_FILE} --> <!-- INCLUDE {$TEMPLATE_FILE} -->
<!-- END modules_bottom --> <!-- END modules_bottom -->
</td> </li>
</ul>
<!-- [-] bottom module area --> <!-- [-] bottom module area -->
</tr> </div>
<!-- ENDIF --> <!-- ENDIF -->
</table> </div>
<!--// board3 Portal by www.board3.de //--> <!--// board3 Portal by www.board3.de //-->
<div class="copyright">Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2013 Board3 Group</div> <div class="copyright">Powered by <a href="http://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2013 Board3 Group</div>

View File

@@ -68,6 +68,29 @@ span.portal-corners-top-inner, span.portal-corners-bottom-inner{
list-style-type: none; list-style-type: none;
} }
/**
* Replacement for table layout
*/
#portal-left, #portal-right {
position: relative;
float: left;
}
#portal-center-wrapper {
width: 100%;
float: left;
display: block;
}
#portal-column-area {
width: 100%;
margin: 0 auto;
}
#portal-left {
margin-left: -100%;
}
/* /*
* top spacing between portal body table and headerbar spacing is usually 10px * top spacing between portal body table and headerbar spacing is usually 10px
*/ */