Menügröße dem Inhalt anpassen

[Knight]

Hallo zusammen.

Ich versuche grade einwenig HTML Code zu "vergewaltigen", denn das was ich mir zurecht bestle 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 hervorgeht. GIbt es drei TR unter einander
Class="links" beinhaltet das Menü und hat eine repeat-y Grafik.
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>

[LX]

Hallo!

<td class="links"  style="height: 100%; width: 258px;">

Wenn Du tatsächlich keine Höhe von 100% möchtest, solltest Du sie auch nicht im Style des td-Elements angeben. Solltest Du mal etwas mehr Zeit haben, wäre es sicher sinnvoll, Dich in das Thema "semantisches Markup" einzulesen, was Dir auf Dauer viel Arbeit und Ärger ersparen wird.

Ein frohes Weihnachtsfest!
Gruß, LX

[knight]

Hi danke für den Tipp , habe glich mal gegoogelt..und werde mir bei gelegenheit sicherlich das mal durchlesen:
http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/
http://fwpf-webdesign.de/links/semantisches-markup
Wie schon gesagt bin eher Deisigner als programmierer.

Zu de Problematik:
Habe die 100% wegeneommen..dennoch spannt sich class="links" voll auf über den gasamten laaangen beitrag.und nicht nur über das kleine Menü...und class="links3" die sich eigentlich am Content ausrichten sollte.....bleibt klein.

Hat jemand sonst noch ideen? Bin echt ein wenig am verzweifeln

Gruß Knight

Hallo!

<td class="links"  style="height: 100%; width: 258px;">

Wenn Du tatsächlich keine Höhe von 100% möchtest, solltest Du sie auch nicht im Style des td-Elements angeben. Solltest Du mal etwas mehr Zeit haben, wäre es sicher sinnvoll, Dich in das Thema "semantisches Markup" einzulesen, was Dir auf Dauer viel Arbeit und Ärger ersparen wird.

Ein frohes Weihnachtsfest!
Gruß, LX

[LX]

Eine Tabellenzeile ist nun mal so hoch wie das höchste darin enthaltene Element. Verzichte auf das Tabellenlayout und arbeite mit divs und anderen Elementen des semantischen Markups.

Gruß, LX