pmschulze wrote: ↑Wed Sep 04, 2019 10:06 am
Es wäre schön, wenn ich auf jquery und script verzichten könnte.
Das geht mit 2 kleinen Änderungen in der template.htm und etwas CSS.
template.htm Locator und subnav außerhalb der Content-Box verschieben:
Code: Select all
<!-- ************************* Container ************************* -->
<div id="tpllck_content_box">
<!-- Bread-Crumbs-Locator -->
<div class="tpllck_locator">
<p><?php echo locator();?></p>
</div>
ändern zu
Code: Select all
<!-- Bread-Crumbs-Locator -->
<div class="tpllck_locator">
<p><?php echo locator();?></p>
</div>
<div id="tpllck_content_box">
Code: Select all
<!-- Next/Previous Page Navigation -->
<table class="tpllck_subnav">
<tr>
<td class="tpllck_previous"><?php echo previouspage();?></td>
<td class="tpllck_top"><?php echo top();?></td>
<td class="tpllck_next"><?php echo nextpage();?></td>
</tr>
</table>
</div>
ändern zu
Code: Select all
</div>
<!-- Next/Previous Page Navigation -->
<table class="tpllck_subnav">
<tr>
<td class="tpllck_previous"><?php echo previouspage();?></td>
<td class="tpllck_top"><?php echo top();?></td>
<td class="tpllck_next"><?php echo nextpage();?></td>
</tr>
</table>
stylsheet.css ergänzen (Änderungen gekenzeichnet mit /* NEU */)
Code: Select all
#tpllck_content_box {
text-align: left;
margin: 0 auto;
padding: 0;
display: table; /* NEU */
width: 100%; /* NEU */
}
Code: Select all
.tpllck_content {
/* float: left; */ /* NEU */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto; /* NEU */
min-height: 500px;
margin: 0;
background-color: #FFF;
border: 1px solid #000080;
padding: 1em;
display: table-cell; /* NEU */
}
Code: Select all
#tpllck_sidebar {
/* float: left; */ /* NEU */
width: 30%;
padding: 0 0 0 1%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell; /* NEU */
}
Code: Select all
@media only screen and (max-width: 768px) {
...
.tpllck_content {
clear: both;
float: none;
min-height: inherit;
width: 100%;
display: block; /* NEU */
}
#tpllck_sidebar {
clear: both;
float: none;
width: 100%;
padding: 0;
display: block; /* NEU */
}
...
Oder Frank weiß eine Lösung per Flexbox, darin ist er
firm.