CSS Navi + 1 Spalte in + 2 Splaten ändern

[Micha]

Das Layout CSSMenu Left + 1 Spalte wäre für mich ausreichend , wenn es noch eine zusätzliche Spalte (rechts neben dem Content) hätte, damit ich dort das News-Modul und einen Kalender unterbringen kann.

Was muss ich ändern ?
Gibt es irgendwo eine Anleitung ?

[cyberman]

Hi Micha,

Was muss ich ändern ?

1. das Template

Du suchst dir im Template diese Abschnitt

Code: Select all

      <!-- Start Navigation -->
      <div id="sidebar">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      <!-- End Navigation -->

Dort direkt danach fügst du den folgenden Abschnitt ein

Code: Select all

      <!-- Start rechte Sidebar -->
      <div id="sidebar_right">
         <div id='news'>
         <h2 class="accessibility">News</h2>
         {news}
         </div>
         <div id='Kalender'>
         <h2 class="accessibility">Kalender</h2>
         {calendar}
         </div>
      <hr class="accessibility" />
      </div>
      <!-- Ende rechte Sidebar-->

(die Modulaufrufe natürlich ergänzt mit den entsprechenden Parametern).

2. Die CSS

Hier gehts weiter im  Stylesheet "Layout: Left sidebar + 1 column". Dort suchst du dir den Abschnitt

Code: Select all

div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

und änderst ihn in

Code: Select all

div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 29%; /* Platz für die rechte Sidebar */
}

Gleich danach findest

Code: Select all

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

Genau dahinter fügst du folgendes ein

Code: Select all

div#sidebar_right {
   float: right;        /* set sidebar on the right side. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-right: 0;
}

Gibt es irgendwo eine Anleitung ?

Jetzt schon - siehe oben  .

[Micha]

zunächst Danke für die schnelle Antwort.
Den zusätzlichen Code habe ich allerdings nach dem main-div eingefügt, da die sonst die Spalten vertauscht werden. (Der Content rutsch unter die rechte Spalte)
So entsteht zumindest die 3. Spalte mit dem richtigen Inhalt.
Allerdings wird der Inhalt der 3. Spalte nicht neben der Navi und neben dem Inhalt, sondern unterhalb dargestellt.
Woran liegt das ?
Ich vermute, dass irgendwo ein div-Ende falsch gesetzt ist.

[cyberman]

Also ich hab jetzt noch mal versucht, ganz unvoreingenommen die mitgelieferten Standard-Templates und CSS nach meiner Anleitung zu modifizieren. Das von dir beschriebene Problem habe ich nicht feststellen können (getestet in Firefox 2 und IE 7). Guckst du hier

http://test.cmsmadesimple.de/index.php?page=micha