Grafiken um dynamische Inhalte

[G-Man]

Hi Leute,

Vorab schonmal sorry, der post wird ein wenig länger ^^ Wäre euch aber sehr verbunden, wenn ihr euch die Zeit nehmen könntet um mir aus der Klemme zu helfen ^^

Ich habe bald keine Haare mehr, darum suche ich bei euch Rat:

Situation:
Ich baue eine Website mit Hilfe des CMS Postnuke auf. Zur Zeit sitze ich am Design und habe mit den erstellten Grafiken einfach ein Problem.
Und zwar befinden sich rechts und links vom eigentlichen Inhaltsteil der Seite sogenannte "Blocks" (wer Postnuke nicht kennt). Diese Blocks können frei wählbare und daher immer verschiedene Inhalte haben.
Nun sollen um diese Blocks auch Grafiken sein. Es gibt für die linken Boxen ein Template, eins für die center und eins für die rechten blocks.

Problem:
Da ich es mit dynamischen Inhalten zu tun habe, müssen die Grafiken auch dynamisch sein. Mein Problem ist nun, die Grafik immer so groß zu halten, wie der Content (also der eigentliche Block).
Das hört sich alles einfach an, aber so ist es leider nicht ^^
Links und rechts von einem Block sind jeweils drei Grafiken:
Eine 'Top', 'Middle' und 'Bottom' Grafik. Nun, warum sind es drei? Ganz einach: die ganze Grafik kann ich nicht in die Länge ziehen, da sich sonst das ganze Bild verziehen würde. Also ziehe ich nur den Mittelteil in die Länge, denn bei dem macht das nichts aus, bzw das Bild verzerrt nicht.

Hier ein Bild von soeinem Block, wie er zurzeit aussieht: Klickst du hier!
Gesamt sind es 8 Grafiken: Eine oben, eine unten und jeweils drei an den Seiten. Wobei die obere und untere Grafik nicht interessieren, da diese funktionieren.

Nun stellt sich immer das Problem, dass wenn sich der Block in die Länge zieht, sich auch komischerweise die Felder der Tabelle vergrößern, die eine feste Höhe angegeben haben (im Code unten zu sehen).
Hier ein Bild dazu, das dies veranschaulicht: Klickst du hier! (das die Felder der linken Grafiken größer sind, ist korrekt)

Hier noch der aktuelle Code, wie er im ersten Bild zu sehen ist:

<!-- Left Sidebox Start -->
<div>
  <div class="pn-title-lblock" height="25" style="background-image: url(themes/cdvTheme/images/border_top.gif);">
    <!--[$title]-->
  </div>
  <table width="170" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" style="background: #000000 url(themes/cdvTheme/images/border_left_top.gif) no-repeat top; width: 17px; height: 43px;">&nbsp;</td>
      <td rowspan="3" width="140" style="background-color: #232323;">
        <div class="pn-lblock">
          <!--[$content]-->
        </div>
      </td>
      <td align="left" style="background: #000000 url(themes/cdvTheme/images/border_right_top.gif) no-repeat top; width: 13px; height: 43px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="background: #000000 url(themes/cdvTheme/images/border_left_middle.gif) repeat-y top; width: 17px;">&nbsp;</td>
      <td style="background: #000000 url(themes/cdvTheme/images/border_right_middle.gif) repeat-y top; width: 13px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="background: #000000 url(themes/cdvTheme/images/border_left_bottom.gif) no-repeat bottom; width: 17px; height: 43px;">&nbsp;</td>
      <td style="background: #000000 url(themes/cdvTheme/images/border_right_bottom.gif) no-repeat bottom; width: 13px; height: 43px;">&nbsp;</td>
    </tr>
  </table>
  <div class="pn-bottom-lblock" height="25" style="background-image: url(themes/cdvTheme/images/border_bottom.gif);"></div>
</div>
<br />
<!-- Left Sidebox End -->

Bisher hatte ich nur eine einzige Lösung, die mein Problem vollkommen beseitigte und alle Gafiken schön anzeigte. Das habe ich hinbekommen, indem ich den mittleren Bilder (bzw den Feldern dieser Bilder) die Höhe * gegeben habe (also height="*"). Das funktioniert jedoch nicht im IE. Firefox schafft das! Ich selbst nutze ja eigentlich auch IE, aber die meißten Nutzer diese Website nutzen eben IE.

Sorry, für den lagen Psot nochmal! Hoffe aber, ihr könnt mir vielleicht eine Lösung anbieten ^^

Schöne Grüße,
G-Man

 

[nero_85]

Wenn du willst, dass sich nur die mittleren Grafiken verändern gib deren Tabellenhöhe mit 100% an!

cya

 

[G-Man]

Hi!

Danke für die Antwort, aber das hatte ich auch schon probiert. Das war das erste was ich gemacht habe.
Aber das Problem ist einfach, dass sich die Tabellenfelder der oberen und unteren Grafiken trotzdem nachziehen.
Selbst das nich standardiserte Attribut "noresize" hat nicht geholfen.

Hier noch ein Bild, wie es geklappt hat mit dem 'height="*"' (wie ich im ersten Post mal geschrieben hatte). Das klappt aber nur in Firefox! Und das ist ja leider keine Lösung: Klickst du hier!

Hoffe ihr wisst noch mehr

Danke nochmal,
Grüße, G-Man!

 

[nero_85]

Hi hat ein bisschen länger gedauert, dafür hab ich aber auch eine Lösung für dich! Ich hoffe du hast kein Problem mit JavaScript.

also im head-Bereich deiner Page setzt du folgendes skript ein:

<script language="JavaScript">

function sb_height(){

//ANFANG DER FUNKTION FÜR DIE LINKE SIDEBOX

var height = document.getElementById('sl').offsetHeight; //ermittelt die höhe des div-layers
var height = height-86; //korregiert die variable auf die höhe die benötigt wird
	if(height > 30){ //wenn die variable größer ist als 30px 
		document.getElementById('tdl').setAttribute('height', height); //verändert die höhe der tabellenzelle
	}
	else{ //ist die variable kleiner als 30px
		document.getElementById('tdl').setAttribute('height', '30'); //wird die höhe der tabellenzelle auf 30px gesetzt
	}
}

//ENDE FUNKTION LINKE SIDEBOX
</script>

Dem body-Tag gibst du noch folgendes Attribut:

<body onLoad="sb_height();">

Dem div-layer der den Content aufnimmt gibst du eine id:

<div id="sl">

Und dem td-Tag das vergrößert werden soll gibst du auch noch eine id:

<td id="tdl">

Für die anderen Sideboxes musst du alles, was zwischen

//ANFANG DER FUNKTION FÜR DIE LINKE SIDEBOX

und

//ENDE FUNKTION LINKE SIDEBOX

steht kopieren, direkt unter dem

//ENDE FUNKTION LINKE SIDEBOX

nochmal einfügen und neue id's einfügen (sr und tdr für die rechte Sidebox). Die id's in der Javascript-Funktion änderst du jeweils zwischen den klammern von

getElementById

(id's immer unter einfachen anführungszeichen setzen. die letzten beiden id's in der funktion müssen gleich bleiben.)

Das Problem warum mans nicht anders lösen kann liegt wahrscheinlich im row-span! Mehr weiß ich aber auch nicht!

Ich hoffe das hilft! Bei mir hats problemlos funktioniert!

cya

nero_85

 

[G-Man]

Hiho!

Danke für den code. hatte auch schon an JS gedacht, aber bin kein Freund davon!
Also dein Code , werde den nur noch was aumschreiben ^^
Habe leider das problem, das meine Seite kein OnLoad beachtet. ich weiß gerade überhaupt ned wieso, aber leider isses so ^^.
<body onload="...."> interessiert die Seite einfach ned, bzw kein Browser interessierts. is ja ned das erste mal, das ich ne webiste schreibe, aber das habe ich noch ned erlebt :S
Habe deine Funktion aber einfach mal aufgerufen durch klick auf nen testbutton. Sie verändert zur Zeit nur die Größe einer Box, da die Boxen alle die gleiche ID haben, was nicht erlaubt ist. Das behebe ich aber noch!

Trotzalledem suche ich weiter nach einer non-js lösung ^^

Schöne Grüße und danke nochmal!

G-Man!

P.S.: ich gebe nicht auf ^^