Hier seht ihr, wie es aussieht.
Das funktioniert auch bei zentriertem Design und passt sich automatisch an die Höhe der Navigation an, wenn also Unterpunkte ausgeklappt werden, verschiebt sich auch die Box nach unten.
Und so geht's:
1) Füge folgenden Code bei "Text unter dem Design" ein:
Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren |
<table class="rb_neu" width="168" border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td height="23" class="sidebar_heading">Überschrift</td>
</tr>
<tr>
<td style="background-repeat: no-repeat;background-color: #fafbfc;padding:5px;" background="https://img.webme.com/designs/iceblue/images/shouty.gif" class="shouty">Text<br><br><p><br><br></td>
</tr>
<tr>
<td height="27" class="edit_rb_footer">
</td>
</tr>
</table>
<style type="text/css">
<!--
#table1{position:absolute; top:5px;}
.edit_main_table {position: absolute;}
.rb_neu{width: 185px;}
.rb_neu .sidebar_heading {
background-image:url(http://theme.webme.com/designs/iceblue/images/heading_left.gif);
background-repeat: repeat-x;
width: 100%;
border-top: 2px solid #173D4F;
}
.rb_neu .edit_rb_footer {
background: url(https://img.webme.com/designs/iceblue/images/poll_bottom_bg.gif) #081721 top left no-repeat;
border-bottom: 3px solid #102B37;
}
-->
</style>
<script type="text/javascript">
function hoehe(){
Hoehe = 0;
alle = document.getElementsByTagName('*');
for (var i = 0; i < alle.length; i++){
if ((alle[i].className == "nav") || (alle[i].className == "nav_heading") || (alle[i].className == "edit_header_full") || (alle[i].tagName == "BODY")) Hoehe = Hoehe + alle[i].offsetHeight;
}
}
function boxes(x){
Hoehe_merk = Hoehe;
if (x >= 2){
for (i=1; i<x; i++){
Hoehe_merk = Hoehe_merk + document.getElementById("table"+i).offsetHeight;
}
}
document.getElementById("table"+x).style.top = document.getElementById("table"+x).offsetTop + Hoehe_merk + "px";
}
setTimeout("hoehe(); boxes(1);", 500);
</script>
2) Für eine weitere Box das fettgedruckte jeweils direkt danach noch einmal einfügen, dabei die Zahl immer um 1 erhöhen.
3) Fertig |
