Platzierungsproblem :(

**newbie** · 27.08.2009, 14:39

Hallo zusammen!

Ich doktor jetzt schon seit gestern daran rum...

und es will mir nicht gelingen den Text unter das Menü zu bekommen.

Bitte helft mir.

Anbei ein Screenshot.

Die tpl sieht so aus:

Code:

<?php echo $this->doctype; ?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->mainTitle; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<?php echo $this->robots; ?>
<?php echo $this->framework; ?>
<link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />

<link rel="stylesheet" href="offset.css" type="text/css" media="screen" />
<?php echo $this->stylesheets; ?>
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
<?php echo $this->head; ?>
</head>

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">



<div id="navigation">
    <ul class="nav">
      <li  class="current_cyan"><a href="index.php/beratung.html">Kostenlose Beratung</a></li>
      <li class="magenta"><a href="index.php/warum.html">Warum? Darum!</a></li>
      <li class="yellow"><a href="index.php/kontakt.html">Kontakt</a></li>
    </ul>
  </div>


<div id="spacer">
<?php if ($this->spacer): ?>
<?php endif; ?>

<div id="content">
<?php if ($this->content): ?>
<?php endif; ?>


<div class="middle">
<?php echo $this->main; ?>
</div>

<?php if ($this->footer): ?>
<div id="footer">
<div class="inside">
<?php echo $this->footer; ?> 
</div>


<?php endif; ?>
<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->

<?php echo $this->mootools; ?>


<div id="footer">
 <div class="spacer"> </div>
</div>


</body></html>

**lindesbs** · 27.08.2009, 14:49

Warum greifen alle eigentlich in die Templates ein ?

Nimm doch deine vorhandenen Layoutbereiche.

Header und main
Die kannst du dann entsprechend positionieren.
Oder du fuegst deine eigenen Layoutbereiche dazu, und diese dann positionieren.

**newbie** · 27.08.2009, 15:03

die css schaut so aus.
denke main ist bei mir content.

Code:

*{margin:0;padding:0;font-family:Verdana, Arial;}
.spacer{width:800px;margin:0 auto;padding-left:50px;}
#header{height:96px;background: #08070C;}
#header.headcyan{border-bottom:5px solid #009DE0;}
#header.headmagenta{border-bottom:5px solid #E2017B;}
#header.headyellow{border-bottom:5px solid #FFEC01;}
*+html #header{background: #08070C;}
* html #header{background: #08070C;}
#header .spacer{height:96px;background: #08070C url('tl_files/offset/nav-header.png') repeat-y 0 0;}
#header h1{width:400px;height:68px;float:left;display:block;margin:0;padding:0;background: url('tl_files/offset/logo.gif') no-repeat 0 0;}
* html #header h1{background-image:url("tl_files/offset/logo.gif");}
#header h1 a{width:400px;height:66px;float:left;display:block;margin:0;padding:0;border:0;text-decoration:none;}
#header h1 a span{visibility: hidden;}
#header h1 a span.my{color:#fff;letter-spacing: 0;}
#header h1 a span.live{color:#725a4c;}
#header h1 a span.shopping{color:#00c6ff;}
#header h1 a span.beta{top:-22px;left:-25px;position:relative;font-weight:normal;font-size:10px;color:#00c6ff;letter-spacing: 0;}
#subnav{width:100%;height:7px;clear:both;}
#subnav p{width:200px;height:25px;float:right;margin:0 auto;text-align:right;font-size:11px;line-height:25px;}
#subnav p select{width:180px;font-size:10px;}
#subnav p select{top:5px;position:relative;}
*+html #subnav p select{top:4px;}
ul.nav{width:801px;height:27px;float:right;display:block;margin:0 auto;padding:0;font-size:14px;line-height:27px;}
ul.nav li.opposite,ul.nav li{float:right;font-size:12px;margin: 0 1px 0 0;list-style: none inside;}
ul.nav li.opposite{float:left;margin: 0 0 0 1px;}
ul.nav li span.icon{padding-left:18px;background: url('rss-icon.jpg') no-repeat 0 50%;}
ul.nav li a{display:block;text-decoration:none;color:#fdfdfd;padding: 0 11px 0 11px;background: #4B3C31;}
ul.nav li.current{}
ul.nav li.current a{}
ul.nav li a:hover{background: #00c6ff;}
ul.nav li.current a:hover{}
#navigation{clear:both;}
#navigation ul.nav{width:801px;height:28px;float:left;clear:both;display:block;margin:0 auto;padding:0;font-size:12px;line-height:28px;}
#navigation ul.nav li{float:left;clear:right;font-size:11px;margin: 0 5px 0 0;list-style: none inside;}
#navigation ul.nav li a{display:block;background-color:#666;font-weight:bold;text-decoration:none;color:#fff;padding: 0 20px;}
#navigation ul.nav li a:hover{}
#navigation ul.nav li{background: #666;}
#navigation ul.nav li.current{}
#navigation ul.nav li.current a{}
#navigation ul.nav li.current_cyan a{background: #009DE0;}
#navigation ul.nav li.cyan a:hover{color:#08070C;background: #009DE0;}
#navigation ul.nav li.current_magenta a{background: #E2017B;}
#navigation ul.nav li.magenta a:hover{color:#08070C;background: #E2017B;}
#navigation ul.nav li.current_yellow a{color:#08070C;background: #FFEC01;}
#navigation ul.nav li.yellow a:hover{color:#08070C;background: #FFEC01;}
#navigation ul.nav li a:hover{}
#navigation ul.nav li.current a:hover{background-image:url("none");cursor: default;}
div.clear{clear:both;}
#content{padding-top:10px;font-family:Verdana, Arial;font-size:12px;background: #fff url('tl_files/offset/content-back.gif') repeat-x scroll 0% 0%;}
span.small{font-size:10px;color:#666;}
label{display:block;padding-top:10px;font-size:8px;}
#footer{width:100%;height:265px;bottom:0pt;right:0pt;padding:0pt;background: #fff url('tl_files/offset/footer-back.jpg') repeat-x scroll 0% 0%;}
#footer div.spacer{width:375px;height:265px;background: url(tl_files/offset/printmaschine.jpg) no-repeat scroll 0% 0%;}
#banner{width:120px;height:600px;float:right;margin-left:60px;}
.content{float:left;}

**lindesbs** · 27.08.2009, 15:08

Mit der CSS kann ich so nichts anfangen. Ist die Seite von "aussen" erreichbar ?

**newbie** · 27.08.2009, 15:12

leider nein. noch lokal.

**lindesbs** · 27.08.2009, 15:16

Du machst das Menu in den Head Bereich und die Artikel in den Main Bereich.

Deren CSS wuerd ich so nciht direkt uebernehmen. Bau doch erstmal die Grundstruktur zusammen, Layouten und positionieren kannst du spaeter viel einfacher dann.

**MacKP** · 27.08.2009, 15:22

Damit wir die Seite live sehen könnten:
- Quelltext der Seite kopieren (in Quelltextansicht vom Browser)
- diesen dann in einer index.html speichern
- Pfade zu den CSS Dateien anpassen (einfach alles in einen Ordner packen)
- Bildpfade anpassen (in html und css Dateien)
- mootools und so rausschmeißen (das ganze JavaScript) oder diese ganzen Ordner einfach übernehmen
- Seite CSS Dateien und Bilder hochladen (x-beliebiger Webspace.. am besten in Unterordner)

Link hier posten...
Und schon können sich alle genau anschauen was so im CSS los ist...

Viele Grüße

**christian** · 27.08.2009, 15:33

... wobei ich lindesbs nur beipflichten kann: Nimm die vorhandenem Html-Templates. Gerade als Newbie. Du machst es Dir viel schwerer als nötig.

Grüße,

Christian

**newbie** · 27.08.2009, 15:34

HTML Templates?
du meinst die vorhandenen tpl dateien?!
also die fe_page.tpl?!

**lindesbs** · 27.08.2009, 15:37

Ja, du brauchst im Normalfall die TPL`s nicht anfassen.

***lucina*** · 27.08.2009, 16:21

Zitat von christian

... wobei ich lindesbs nur beipflichten kann: Nimm die vorhandenem Html-Templates. Gerade als Newbie. Du machst es Dir viel schwerer als nötig.

Grüße,

Christian

Vielleicht sollte man das mal ganz oben auf die Projektseite pinnen ... oder in einem Popup, was bei jeder frischen Installation alle 30 Sekunden im Backend aufploppt und mit einem Button "Ja, ich will sterben, wenn ich die Templates anfasse oder selbst welche schreiben möchte" geschlossen werden kann ...

SCNR, Carolina.

**newbie** · 28.08.2009, 08:11

Einen Button "schlaue Sprüche ausblenden" müsste es auch geben!

**christian** · 28.08.2009, 08:46

Hi Newbie,

die vermeintlich "schlauen Sprüche" gehen mit Sicherheit nicht persönlich gegen Dich.

Aber es ist halt tatsächlich so, dass sehr oft eine der ersten Fragen von Neueinsteigern ist "Wie erstelle ich mir ein eigenes Template?" (Das war übrigens auch bei mir der Fall). Die sinnvollste Antwort wäre "Am besten gar nicht.".

Und genau das sollte man wahrscheinlich wirklich mal dick oben drüber schreiben.

Ein Grund für diese Missverständnisse ist, dass der Begriff "Template" bei Typolight anders besetzt ist als bei vielen anderen CMS, wo man um Quelltexteingriffe sehr oft nicht herumkommt.

Also: Nicht übel nehmen - man wird Dich hier nicht hängenlassen, sofern Du Hilfe annimmst.

Viele Grüße,

Christian

**newbie** · 28.08.2009, 09:05

Hallo Christian,

nehme ich ja gerne an, aber so Sprüche stoßen mir halt übel auf wenn ich vorne und hinten nicht weiter weiß

. Sorry...

Ich weiß halt echt nicht wie ich es anpassen soll.
Leider gibt es keinen Link, da es noch lokal auf dem Rechner ist.
Das macht das ganze wahrscheinlich schwieriger.
Die Seite ansich gibt es schon online, soll nun aber mit Typolight realisiert werden.

Vielleicht gibt es ja jemand der mir das Template dementsprechend anpassen würde?!

So als Hilfe und Denkanstoß damit ich es für das nächste Mal besser weiß und Lucina sich nicht mehr so aufregen muss.

**Antipitch** · 28.08.2009, 09:07

Hi newbie,
die Leute haben durchaus Recht, was die .tpl Dateien angeht (neben akuten Fehlern und Problemen ist speziell beim Seitentemplate auch eine evtl. Update-Fähigkeit des Projekts zu bedenken). Das sollte nur jemand tun, der weiß, was er tut.

Befolge einfach Stefans Rat: lass die .tpl unverändert und unter Layout > Seitenlayouts platzierst du dein Menü in der Kopfzeile und den Artikel in der Hauptspalte (was im Übrigen für fast alle grafischen Layouts die passende Einstellung ist, für deines auf jeden Fall). Auf KEINEN Fall sollte solches hartkodiertes HTML ins Template geschrieben werden, von welchem das System für alle internen Vorgänge davon ausgeht, das es von Modulen generiert und als Variable geparsed wird (Teufel > Küche > du drin).

cheers
Antipitch

**lindesbs** · 28.08.2009, 09:09

Nochmal ganz kurz : KEIN TEMPLATE ANPASSEN.

Lass die Dinger, so wie sie sind.

Du legst im Setenlayout das Menu in den Head / Kopfbereich Bereich, deine Artikel in die Hauptspalte. Von mir aus auch beides in die Hauptspalte
Danach noch ein wenig die CSS anpassen und fertig.
Da musst du nichts an den Templates anpassen.

Schau Dir mal das MusicAcademy Template an. Dort kannst du alles vergleichen.

**newbie** · 28.08.2009, 09:19

Aber die Anweisungen im Template heißen doch anders als in der CSS.
Deswegen komm ich irgendwie nicht klar ... !
z.B.: ist dort doch sicher mit Main die Hauptspalte gemeint, oder?!
Also da wo der Text drin steht. Und in der CSS heißt das content. Deswegen hatte ich das im Template so umgestellt.

**MacKP** · 28.08.2009, 09:21

Hallo newbie,
da änderst du dann dein CSS.

Thats the way of life ;-)

**lindesbs** · 28.08.2009, 09:22

Waere es nicht einfacher, nur das CSS anzupassen ? Du kannst dir auch eigene Layoutbereiche definieren Einstellungen -> Globale Einstellungen -> Eigene Layoutbereiche
Dann kannst du deine Elemente dort mit verknuepfen und dann via CSS positionieren. Fertig.

**MacKP** · 28.08.2009, 09:39

Hallo ,

aaaaaah! fürchte das kann ich nicht ....

also nenne ich content in der css nun main?!

Dann studiere bitte doch mal die Online Dokumentation von Typolight.. schau dir die Videos an wie man anfängt...
und lerne CSS mit Tutorials aus dem Internet.

Was du wie benennen musst kannst du im Quellcode schauen den dir TL ausgibt. da stehen die ID's und Klassen, die du am besten benutzt. Firebug als addon für Firefox hilft da auch enorm weiter...

Wenn du ein CMS suchst, wo du gar nichts machen musst kann dir da TL nicht weiter helfen und ich fürchte auch kein anderes CMS...

Viele Grüße