Zur Navigation

Menügröße dem Inhalt anpassen

1 knightofthenight

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);
}
[Html]
<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>[/Html]

24.12.2008 09:22

2 Jörg

Hallo knightofthenight,

Problem:
Class="links" wiederholt sich solange wie der Inhalt ist...und nicht nur solange bis das Menü vollständig angeziegt wird.

Wo liegt denn der Inhalt - in der Zelle rechts neben der Menü-Zelle (<jdoc:include type="component" />)? Die Tabellen-Zellen erhalten die Höhe der höchsten Zelle in der betreffenden Zeile - und danach richtet sich dann auc hdas Hintergrundbild aus. Du könntest das Menü in ein eigenes Div packen, dessen Höhe dann nur an dem enthaltenen Menü ausgerichtet wird.

<td style="width: 258px">
<div class="links">
<jdoc:include type="modules" name="left" />
</div>
</td>

24.12.2008 14:27 | geändert: 24.12.2008 14:28

3 knightofthenight

Hallo Jörg.
Danke für die Hilfestellung und die schnelle Antwort ...vorallem heute an Weihnachten.
Übrigens Fröhlich Weihnachten.

Zurück zum Thema:
Leider hat das nicht ganz den gewünschten Effekt gezeigt. Das einzige was passiert ist , ist das die in scheiben geschnitte Grafik nicht wiederholt wird ausserhalb der Höhe des Menüs. Soweit hast Du mit der einschätzung recht gehabt. Aber leider wird die class="links" weiter so weit gestreckt wie der Inhalt....und leider nicht die class="links3".

Ich bin erster Linie Fotograf und Designer...und habe nur am (äußersten) Rande mit Webprogrammierung zu tun.

Hier der Link zur Seite
www.rssolution.de

Für weitere Hilfe wäre ich sehr Dankbar

Knight
Oder einfach Robert

24.12.2008 21:02

4 Jörg

Hallo Robert,

Leider hat das nicht ganz den gewünschten Effekt gezeigt. Das einzige was passiert ist , ist das die in scheiben geschnitte Grafik nicht wiederholt wird ausserhalb der Höhe des Menüs. Soweit hast Du mit der einschätzung recht gehabt. Aber leider wird die class="links" weiter so weit gestreckt wie der Inhalt....und leider nicht die class="links3".

Opera und Firefox zeigen mir die Seite unterschiedlich an - bei letzterem werden die linken Grafiken nicht gestreckt, bei ersterem schon. Solche Anzeigeprobleme können auch durch HTML-Fehler verursacht sein. An dieser Stelle ist der HTML-Code z.B. nicht korrekt verschachtelt:

<tr id="topmenu">

	<table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><a href="/index.php?

Möglich wäre nur tr -> td -> table

Hier der Link zur Seite
www.rssolution.de

Mit dunkler Schrift auf dunklem Hintergrund ist das ganze leider schwer zu erkennen.

25.12.2008 20:05 | geändert: 25.12.2008 20:07

5 knightofthenight

Hmm

Ich habe zwar deine Ausfżhrungen nicht ganz verstanden
(hier hat es aufgehört:<td nowrap="nowrap"><a href="/index.php?)
; ich bin nicht so der coder...
Aber durch deine Ausführungen habe ich glaube verstanden auf was Du hinaus willst. Ich kann durch "auskoppeln" aus den jetztigen System..erreichen das si der Richtige Part streckt....

Wenn ich also das ganze in weitere Tables aufsplitte entgehe ich dem zusamenspiel.

CIh werde es mal versuchen ...und mich dann nochmal melden...falls es funzt um es für die Nachwelt zu erhalten

Knight

P.S. Schau nochmal auf die Seite ich werde demnächst die schrift auf weiß und das Menü wieder "ordnen"

25.12.2008 22:12

6 Jörg

Ich habe zwar deine Ausfżhrungen nicht ganz verstanden

Der HTML-Code ist fehlerhaft. Eine Tabelle (table) kann in einer Tabellenzelle untergebracht werden (td), aber nicht in einer Tabellenzeile (tr). Eine Tabellenzeile kann nur Tabellenzellen enthalten. Zum korrekten Aufbau siehe auch das entsprechende Kapitel auf SELFHTML:

http://de.selfhtml.org/html/tabellen/aufbau.htm

26.12.2008 01:19

Beitrag schreiben (als Gast)





[BBCode-Hilfe]