Content-Bereich nach rechts schieben

Code & Blog Logo

Der Content des CMS wird auf der rechten Seite stehen und das lokale Menü steht links. An dieser Stelle greifen bereits viele Leute zu Tabellen. Aber wir machen es mit CSS.

Bevor wir es nach rechts verschieben, kommt vorher noch die Breadcrump Navigation in den Content-Bereich (datei index.php im Verzeichnis system/skins):

...
<div id="content">
  <div id="breadcrump">
    <?PHP
      sys::displayBreadcrump(" -&gt; ","breadcrump","bc");
    ?>
  </div>
  <?PHP
    sys::includeContent();
  ?>
</div>
...

Nun muss noch die lokale Navigation über den Content Bereich. Damit wir sie über CSS ansprechen können bekommt sie auch noch die id localmenu:

...
<?PHP
  sys::displayLocalMenu("<ul id="localmenu">","</ul>","<li>","</li>","localmenu");
?>
<div id="content">
...

mit float:left lassen wir nun alles rechts an dem lokalen Menü vorbeifließen:

...
#localmenu{
    float:left;
  }
</style>
...

Jetzt muss nur noch der Content-Bereich ausgerichtet werden. Er muss erstmal relativ 20% nach rechts positioniert werden, damit er, wenn das lokale Menü zu Ende ist, nicht nach links geht.

Außerdem bekommt es ein Padding von 1% zugewiesen. Die Breite muss somit auf 78% festgelegt werden (100% – 20% wg nach recht schieben, – 2% wg. padding an beiden Seiten).

Zum Schluss bekommt es noch eine weiße Hintergrundfarbe. Der CSS-Abschnitt für den Content Bereich sieht dann so aus:

...
#content{
  background-color:#fff;
  width:78%;
  position:relative;
  margin-left:20%;
  padding:1%;
}
...

Und nochmal zum Abschluss der komplette neue Code der Seite index.php im Verzeichnis system/skins:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de">
  <head>
    <?PHP
      sys::includeHeader();
    ?>
    <style>
      body{
        background-color: #fff;
        background-image: url('system/skins/default/images/bg.jpg');
        background-repeat:repeat-x;
        color: <?PHP echo sys::getColor("forecolor"); ?>;
      }
      a{
        color: <?PHP echo sys::getColor("highlight1"); ?>;
      }
      a:visted{
        color: <?PHP echo sys::getColor("highlight2"); ?>;
      }
      #globalmenu{
        list-style-type : none;
      }
      #globalmenu li{
        display:inline;
      }
      #container{
        background-color:<?PHP echo sys::getColor("bgcolor"); ?>;
        width:90%;
        border: 1px solid  <?PHP echo sys::getColor("highlight1"); ?>;
        text-align:left;
      }
      #content{
        background-color:#fff;
        width:78%;
        position:relative;
        margin-left:20%;
        padding:1%;
      }
      #localmenu{
        float:left;
      }
    </style>
  </head>
  <body>
    <center>
      <div id="container">
        <?PHP
          sys::displayGlobalMenu("<ul id="globalmenu">","</ul>","<li>","</li>",
                                 "globalmenu");
        ?>
        <?PHP
          sys::displayLocalMenu("<ul id="localmenu">","</ul>","<li>","</li>",
                                "localmenu");
        ?>
        <div id="content">
          <div id="breadcrump">
            <?PHP
              sys::displayBreadcrump(" -&gt; ","breadcrump","bc");
            ?>
          </div>
          <?PHP
            sys::includeContent();
          ?>
        </div>
      </div>
    </center>
  </body>
</html>

Die neue Seite sieht nun so aus (sie kann sich inzwischen schon geändert haben):

http://cms.stevieswebsite.de/testseite.htm

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

andrej schrieb am 03.02.2012:

liegt die index.php nicht im verzeichni <b>system/skins/defaults<b> ?

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Content-Bereich nach rechts schieben

Kommentare

andrej schrieb am 03.02.2012:

Über uns

Cookie-Einstellungen