Website Container erstellen

Code & Blog Logo

Der Website Container des selbstgemachten CMS wird eine Größe von 90% haben. So hat sie fast die volle Fensterbreite, aber es ist trotzdem noch der Verlauf zu sehen. Der Container bekommt außerdem noch einen Rahmen.

Die Farbe des Rahmens und die des Hintergrundes wird in der Tabelle cms_settings festgelegt. Der Hintergrund hat den Eintrag skinbgcolor und der Rahmen hat skinhighlight1. Diese Werte werden im Design dann ausgelsen.

Die ID des Containers ist logischerweise container. Über ihr wird im StyleSheet das Design festgelegt.

Hier ist nun erstmal der Quelltext:

<!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;
      }
    </style>
  </head>
  <body>
    <center>
      <div id="container">
        <?PHP
          sys::displayGlobalMenu("<ul id="globalmenu">","</ul>","<li>","</li>",
                                 "globalmenu");
        ?>
        <div id="breadcrump">
          <?PHP
            sys::displayBreadcrump(" -&gt; ","breadcrump","bc");
          ?>
        </div>
        <div id="content">
          <?PHP
            sys::includeContent();
          ?>
        </div>
        <?PHP
          sys::displayLocalMenu("<ul>","</ul>","<li>","</li>","localmenu");
        ?>
      </div>
    </center>
  </body>
</html>

Der div container befindet sich wie ihr sehen könnt in einem Center Tag. Dieser ist zwar veraltet, aber immer noch meine erste Wahl in Sachen Zentrierung im Design.

Neben dem Conatiner hat auch der eigentliche Content noch ein div bekommen, was wir aber erst später brauchen.

Und das ist mein Ergebnis (Design kann sich inzwischenzeit 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

AlGoldo schrieb am 02.03.2010:

kleiner Tip: Das - Tag ist in xhtml nicht veraltet, sondern gar nicht erst definiert, was natürlich deinen html-code invalide macht... wenn du hier schon valides xhtml verwenden willst dann solltest du sowas wie style="width:200px; margin:0 auto;" verwenden, oder einen anderen doctype...

AlGoldo schrieb am 02.03.2010:

ui da hab ich doch glatt html-code eingebaut :) ich meine mit "Das - Tag" im oberen Kommentar natürlich das center - tag (<center&gt)

Ferid schrieb am 24.03.2010:

als alternative zum center kann man der Id container margin-left und margin-right auf auto setzen.

raintownCH schrieb am 17.02.2011:

Ein: margin: 0 auto; Nach: width:90%; Würde das Container Div "sauber" zentrieren... BTW: Super Tutorial

Über uns

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

Website Container erstellen

Kommentare

AlGoldo schrieb am 02.03.2010:

AlGoldo schrieb am 02.03.2010:

Ferid schrieb am 24.03.2010:

raintownCH schrieb am 17.02.2011:

Über uns

Cookie-Einstellungen