Content-Bereich nach rechts schieben
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(" -> ","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(" -> ","breadcrump","bc"); ?> </div> <?PHP sys::includeContent(); ?> </div> </div> </center> </body> </html>
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