[GELÖST] Darstellung von Spalten formatieren

Dancer62 · 20. August 2014 07:00

Ich komm' nicht mehr weiter ... mad

Ich möchte mehrere {content}-Elemente (zwei Spalten, darunter ein zusammenhängender Block über die gesamte Breite und darunter wieder zwei Spalten) - abhängig davon, ob sie befüllt sind oder nicht - darstellen. Zusätzlich gibt es noch eine Sidebar, in der z.B. News dargestellt werden (können). Bei den meisten {content}-Elementen klappt die Darstellung auch problemlos. Lediglich wenn die erste der beiden oberen Spalten (nicht Sidebar !) nicht befüllt ist, gibt es Probleme, da dann trotz alledem der Hintergrund der Überschrift dargestellt wird, was unschön aussieht. Das untere Bild zeigt ein Beispiel, bei dem lediglich der Block in der Mitte einen Text enthält. Demzufolge sollte der obere Balken nicht dargestellt werden, da das zugehörige {content}-Element (= linke Spalte) nicht befüllt ist :
Mein Code sieht folgendermaßen aus:

Hier klicken, um den Code zum Kopieren zu markieren

{* Start Container *}
                       <div class="container">

{* Definition der Spalten und des unteren Blocks. Durch wahlweise (Nicht-)Befüllung kann gesteuert werden, ob das entsprechende {content}-Element angezeigt werden soll oder nicht. *}
                       {content block='Überschrift links' oneline=true wysiwyg=false assign='Ueberschrift_links'}
                       {content block='Spalte links' assign='Spalte_links'}
                       {content block='Überschrift mitte' oneline=true wysiwyg=false assign='Ueberschrift_mitte'}
                       {content assign='Spalte_mitte'}
                       {content block='Überschrift rechts' oneline=true wysiwyg=false assign='Ueberschrift_rechts'}
                       {content block='Spalte rechts' assign='Spalte_rechts'}
                       {content block='Überschrift unten' oneline=true wysiwyg=false assign='Ueberschrift_unten'}
                       {content block='Block unten' assign='Block_unten'}
                       {content block='Überschrift unten mitte' oneline=true wysiwyg=false assign='Ueberschrift_unten_mitte'}
                       {content block='Spalte unten mitte' assign='Spalte_unten_mitte'}
                       {content block='Überschrift unten rechts' oneline=true wysiwyg=false assign='Ueberschrift_unten_rechts'}
                       {content block='Spalte unten rechts' assign='Spalte_unten_rechts'}

{* Start Sidebar *}
                       <aside>
{* falls es sich um die Startseite handelt ($page_alias = 'start'), dann wird der 'News'-Block eingeblendet, ansonsten eine "normale" Sidebar *}
                       {if $page_alias == 'start'}
                          <div class="inside">

{* Start News, stylesheet  "Module: News" *}
                             {cms_module module="news"}

                             <div id="news">
                                 <h2>Nachrichten</h2>
                                 {news number='5' detailpage='news'}
                             </div>
{* Ende News *}
                          </div>

{* falls die Sidebar nicht leer ist, wird sie angezeigt *}
                       {elseif $Spalte_links != ''}
                          <div class="inside">
                             <article class="col-3">
                                <h3>{$Ueberschrift_links}</h3>
                     {* "truncate less" bewirkt, dass die Spaltenbreite reduziert (= 250px) dargestellt wird *}
                                <div class="truncate less">
                                   {$Spalte_links}
                                </div>
                             </article>
                          </div>

                       {/if}
                       </aside>

{* Ende Sidebar *}

{* Start Inhalt; zwei Spalten nebeneinander und/oder ein Block darunter sowie zwei weitere Spalten darunter können wahlweise befüllt und somit ausgewählt werden *}

                       <section id="content">
                          <div class="wrapper indent">

{* falls die Spalte nicht leer ist, wird sie angezeigt *}
                             {if $Spalte_mitte != ''}
                                <article class="col-1">
                                   <h3>{$Ueberschrift_mitte}</h3>
                                   <div class="truncate">
                                      {$Spalte_mitte}
                                   </div>
                                </article>
                             {/if}

{* falls die Spalte nicht leer ist, wird sie angezeigt *}
                             {if $Spalte_rechts != ''}
                                <article class="col-2">
                                   <h3>{$Ueberschrift_rechts}</h3>
                                   <div class="truncate">
                                      {$Spalte_rechts}
                                   </div>
                                </article>
                             {/if}
                          </div>

{* falls es sich bei der aktuellen Seite um die Datenschutzrichtline handelt ($page_alias = 'datenschutz'), dann wird der Text ungekürzt ausgegeben, ansonsten gekürzt *}
                          {if $page_alias == 'datenschutz'}
                             <h3>{$Ueberschrift_unten}</h3>
                             {$Block_unten}
                                                         
{* falls der Block nicht leer ist, wird er angezeigt *}
                          {elseif $Block_unten != ''}
                             <article class="col-0">
                                <h3>{$Ueberschrift_unten}</h3>
                        {* 'truncate more' umfasst den gesamten Block (= beide Spalten) *}
                                <div class="truncate more">
                                   {$Block_unten}
                                </div>
                             </article>
                          {/if}

{* falls die Spalte nicht leer ist, wird sie angezeigt *}
                          {if $Spalte_unten_mitte != ''}
                             <article class="col-1">
                                <h3>{$Ueberschrift_unten_mitte}</h3>
                                <div class="truncate">
                                   {$Spalte_unten_mitte}
                                </div>
                             </article>
                          {/if}

{* falls die Spalte nicht leer ist, wird sie angezeigt *}
                          {if $Spalte_unten_rechts != ''}
                             <article class="col-2">
                                <h3>{$Ueberschrift_unten_rechts}</h3>
                                <div class="truncate">
                                   {$Spalte_unten_rechts}
                                </div>
                             </article>
                           {/if}
                        </section>
{* Ende Inhalt *}

                        <div class="clear"></div>
                     </div>
{* Ende Container *}

Die Crux an der Sache ist, das die rechte der beiden Spalten korrekterweise nicht dargestellt wird, wenn das entsprechende {content}-Element nicht befüllt ist. Auch die beiden unteren Spalten werden - falls sie nicht befüllt sind - nicht dargestellt (daraus schließe ich, dass es nicht am Stylesheet liegen kann, da sonst auch die linke der beiden unteren Spalten fehlerhaft dargestellt werden müsste). Nur die linke, d.h. erste der beiden oberen Spalten wird offensichtlich immer (inkorrekterweise) dargestellt. sad

Beitrag geändert von Dancer62 (25. August 2014 09:02)

Dancer62 · 27. August 2014 07:02

Mittlerweile habe ich das Problem soweit einkreisen können, dass ich nunmehr weiß, dass die Hintergrundfarbe der (leeren) Überschrift <h3> immer dargestellt wird.

Hier klicken, um den Code zum Kopieren zu markieren

                      <section id="content">
                          <div class="wrapper indent">

{* falls die Spalte nicht leer ist, wird sie angezeigt *}
                             {if $Spalte_mitte != ''}
                                <article class="col-1">
                                   <h3>{$Ueberschrift_mitte}</h3>
                                   <div class="truncate">
                                      {$Spalte_mitte}
                                   </div>
                                </article>
                             {/if}
                       .
                       .
                       .
                          </div>
                      </section>

Allerdings verstehe ich nicht, warum sie - trotz {if}-Anweisung - überhaupt dargestellt wird, da der Inhalt von '$Spalte_mitte' leer ist (oder liegt es daran, dass '$Spalte_mitte' das ursprüngliche {content}-Element ist ?).
In meinem Stylesheet habe ich u.a. folgende Deklarationen (in dieser Reihenfolge):

Hier klicken, um den Code zum Kopieren zu markieren

#main {
     margin:0 auto;
     position:relative;
     width:980px;
     font-size:.75em;
}

     section#content {
          float:left;
          width:675px;
          padding-top:44px;
     }

.col-1,
.col-2,
.col-3 {
     float:left;
}

.wrapper {
     width:100%;
     overflow:hidden;
}

.container {
     width:100%;
     padding-bottom:38px;
}

a.article {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
    padding:5px;
}

h3 {
     font-size:18px;
     line-height:1.2em;
     color:#fff;
     background-repeat:repeat-x;
     background-position:0 0;
     background-image:url([[root_url]]/<mein_Verzeichnis>/<mein_theme>/<mein_Bild>.gif);
     padding:12px 0 7px 15px;
     margin-bottom:23px;
}

#content .col-1 {
     width:316px;
     margin-right:43px;
}

#content .col-2 {
     width:316px;
}

#content .indent {
     padding-bottom:39px;
}

(Da ich das Stylesheet lediglich "übernommen" habe, kann ich leider nicht allzu viel zu Struktur und Intention sagen).
Ich hoffe, dass ich mein Problem einigermaßen verständlich rüberbringen konnte. Ich erwarte keine 'ad hoc'-Problemlösung, aber eine Hilfestellung, in welche Richtung ich mich orientieren muss, wäre schon hilfreich hmm ...

Beitrag geändert von Dancer62 (27. August 2014 07:04)

NaN · 27. August 2014 07:41

Was steht denn im HTML Code im Browser an dieser Stelle?
(Oder bearbeite den Inhalt mal im Backend, aber schalte dabei den WYSIWYG Editor ab.)
Ist {$Spalte_mitte} wirklich leer?
Oder enthält es vielleicht noch Leerzeichen, Kommentare, leere Absätze, Zeilenumrüche, Leere <span>-Elemente ... ?
In solchen Fällen würde ich eher so prüfen:

Hier klicken, um den Code zum Kopieren zu markieren

{if $Spalte_mitte|strip_tags|trim != ''}
    ...
{/if}

Damit wird sichergestellt, dass es wirklich nichts zum Anzeigen gibt.

Andynium · 27. August 2014 10:03

NaN schrieb:

(Oder bearbeite den Inhalt mal im Backend, aber schalte dabei den WYSIWYG Editor ab.)

Genau!

Zudem kann es sein, dass das System dir aufgrund der Voreinstellung (siehe Seiten-Administration > Seitenvoreinstellungen) einen Text in den Block injiziert, der aufgrund dessen, dass er als HTML Kommentar gesetzt ist, im Editor nicht angezeigt wird.

Dancer62 · 27. August 2014 18:03

Danke Ihr beiden !!!

Genau das war es !!! Zum Einen hatte ich in den Seiten-Vorgaben den Inhaltsblock mit HTML vorausgefüllt und zum anderen habe ich mit NaN's Erweiterung jetzt sichergestellt, dass tatsächlich nichts mehr im {content}-Element steht.

Damit muss ich "nur noch" alle Seiten darauf überprüfen, ob sie diesen HTML-Code auch enthalten sad .

Allerdings habe ich jetzt bei der Bearbeitung der Seite ein anderes Problem festgestellt: beim Versuch, die (Inhalts-)Seite zu speichern, bekomme ich die Fehlermeldung "Kein Wert für Inhalte vorgegeben!". Kann ich irgendetwas eintragen, was aber wiederum nicht die o.g. Auswertung negativ beeinflusst oder gibt es noch andere Möglichkeiten ?

Nachtrag: durch NaN's zusätzliche Abfrage wird der HTML-Code offensichtlich ignoriert, daher muss ich jetzt nicht alles "sauber" haben...

Auf alle Fälle sieht die Seite jetzt erstmal so aus, wie ich mir das vorgestellt habe.

Beitrag geändert von Dancer62 (27. August 2014 18:14)

NaN · 27. August 2014 18:17

Ah... Der Standard Inhaltsblock... Der darf ja dummerweise garnicht leer sein roll
Dann gib den Inhalten lieber allen als Standard Inhalt einen HTML Kommentar vor.

Andynium · 27. August 2014 18:57

Könntest in den Standard-Inhaltsblock (={content} - muss zwingend vorhanden sein) einen unsichtbaren html Tag einsetzen, der durch NaN's Abfrage gefiltert wird.

Dancer62 · 28. August 2014 05:47

Ja - ich habe jetzt einen Kommentar als Vorgabe reingesetzt ( {* Inhalt *} lol ). Sollte hoffentlich funktionieren...

Forum für CMS/made simple

#1 20. August 2014 07:00

[GELÖST] Darstellung von Spalten formatieren

#2 27. August 2014 07:02

Re: [GELÖST] Darstellung von Spalten formatieren

#3 27. August 2014 07:41

Re: [GELÖST] Darstellung von Spalten formatieren

#4 27. August 2014 10:03

Re: [GELÖST] Darstellung von Spalten formatieren

#5 27. August 2014 18:03

Re: [GELÖST] Darstellung von Spalten formatieren

#6 27. August 2014 18:17

Re: [GELÖST] Darstellung von Spalten formatieren

#7 27. August 2014 18:57

Re: [GELÖST] Darstellung von Spalten formatieren

#8 28. August 2014 05:47

Re: [GELÖST] Darstellung von Spalten formatieren

Fußzeile des Forums