Hallo zusammen.
Ich versuche grade einwenig HTML Code zu "vergewaltigen", denn das was ich mir zurecht bastle kann man nicht anders bezeichnen. Bin halt mehr Designer als Webprogrammierer....also seid gnädig und verzeiht mir das ich Tables und nicht die in Mode gekommenen DIV benutzte.
Zum Anliegen.
Ich versuche in Joomla ein grafisch unterlegtes (background-image) so hinzubekommen das es sich der Größe des Menüs anpasst.
Wie Ihr aus den Code herauszulesen ist, gIbt es drei TR untereinander
Class="links" beinhaltet das Menü und hat eine repeat-y Grafik (jpg).
class="links2" schließt das Menü ab untenrum ab mit einen halbkreis Bogen (JPG) und hat ein no-repeat
class="links3" ist wie class="links" ein in y Richtung sich Wiederholende Grafik.
Das Ziel ist es das class="links" sich der Menü größe anpasst.Wenn also das Menü Submenüpunkte anzeigt soll sich die Höhe sich vergrößern.
Class="links2" bleibt ohne Änderungen.
Und class="links3" soll sich dem Inhalt anpassen....wenn also viel Content gezeigt wird....soll die Grafik sich so lange wiederholen bis kein Inhalt mehr kommt.
Problem:
Class="links" wiederholt sich solange wie der Inhalt ist...und nicht nur solange bis das Menü vollständig angeziegt wird.
Danke im Voraus
Knight
#menu{
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
background-color: #000000;
margin:0;
padding:0;
}
.links2{
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
margin:0;
padding:0;
background: url(../images/foto_12.jpg);
background-color: #000000;
background-repeat:repeat-y;
width:258px;
height:100%;
}
.links3{
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
margin:0;
padding:0;
background-color: #000000;
background: url(../images/foto_13.jpg);
background-repeat:repeat-y;
width:258px;
height:100%;
}
.links{
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
width:258px;
height:100%;
margin:0;
padding:0;
background: url(../images/foto_10.jpg);
background-color: #000000;
background-repeat:repeat-y;
}
.mitte{
width:652px;
height:100%;
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
margin:0;
padding:0;
background-color: #ffffff;
}
.right{
width:50px;
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
margin:0;
padding:0;
background-color: #000000;
background: url(../images/foto_16.jpg);
background-repeat:repeat-y;
}
#fotter{
border-spacing: 0px; /***wichtig f?r MF***/
border-collapse: collapse; /***wichtig f?r IE***/
margin:0;
background-repeat: no-repeat;
padding:0;
background-color: #000000;
background: url(../images/foto_14.jpg);
}<tbody>
<tr id="menu">
<td class="links" style="height: 100%; width: 258px;">
<jdoc:include type="modules" name="left" />
</td>
<td colspan="1" rowspan="3" class="mitte" height="100%" width="652">
<jdoc:include type="component" />
</td>
<td colspan="1" rowspan="3" class="right" height="100%" width="50"></td>
</tr>
<tr>
<td class="links2" style="height: 71px; width: 258px;"></td>
</tr>
<tr>
<td class="links3" style="height: 100%; width: 258px;"></td>
</tr>
<td id="fotter" style="height: 114px; width: 960px;" colspan="5" rowspan="1">
<jdoc:include type="modules" name="fotter" />
</td>
</tr>
</tbody>