Inhalt der Hauptspalte rutscht in Linke Spalte

[althoffc]

Hallo,

ich habe Typolight 2.7.1 lokal auf meinem Windows-XP Rechner (Xampplite 1.7.1) installiert und meine ersten Gehversuche mit Typolight analog zu dem Screencast "Wie man ein Seitenlayout erstellt" von Ben Robinson unternommen.
Ich habe alle Schritte genau wie im Screencast vorgenommen, bis auf zwei Punkte.

a) Der im Screencast verwendete Navigationstyp "Navigation main menu items" zum Erstellen des Moduls "navigation" steht nicht in meinem Typolight (2.7.1) zur Auswahl.
Habe statt dessen "Navigationsmenü" gewählt.

b) Bei der definition des Seitenlayouts wird im Screencast das Layout mit einer Spalte, Kopf- und Fußzeile gewählt.

b1) Dies habe ich in einem ersten Schritt auch ausgewählt.
Jedoch wird kein Horizontales Menü angezeigt, sondern ein vertikales Menü, in dem die Menüpunkte durch horizontale Linien getrennt sind.
Das Menü wird in der Kopfzeile (Höhe 80) platziert, passt aber nicht vollständig dort hin.

b2) Alternativ habe ich im zweiten Schritt das Layout mit zwei Spalten (linke Spalte, Hauptspalte, Kopf-/Fußzeile) gewählt und für das Modul "Navigation" die Linke Spalte zugeordnet.

Jetzt wird das Navigationsmenü wie erwartet in der Linken Spalte (Breite 150) angezeigt.
Jedoch "rutscht" der Inhalt der Hauptspalte bis an den linken Rand und überschneidet sich so mit dem Navigationsmenü.
Das Modul "Artikel" ist der "Hauptspalte" zugeordnet!

Hat jemand einen Tipp, was da falsch läuft oder was ich noch anders machen muss?

Danke und Gruß
Carsten

[Sebastian]

HI

vermutlich hast du irgendwo per CSS Padding-Werte zugewiesen, beispielsweise bei #main oder #left. Nimm diese heraus und weise sie stattdessen #main .inside und #left .inside zu. Vielleicht ist die Navigation auch breiter als die Spalte, in der sie steht.

Allgemein wäre ein Link immer sehr hilfreich, raten ist immer recht ungenau. Bei einer lokalen Installation ist das natürlich schwierig. Du kannst allerdings auch DynDNS nutzen.

Sebastian

[althoffc]

Hallo Sebastian,

erst mal Danke für Deine schnelle Reaktion auf meine Frage.

Ich habe genau die gleichen Stylesheets wie im genannten Screencast verwendet und nichts an den CSS-Files geändert (ich weiss noch gar nicht, wo ich diese finden könnte).

Ich habe noch einen Screenshot meiner Ausgabe ergänzt.
Der Text aus der Hauptspalte beginnt sofort am linken Fensterrand als ob dort gar keine linke Spalte vorhänden wäre.
Dadurch überlagern sich die Darstellung des Navi-Menüs mit den Inhalten der Hauptspalte.

Was ist DynDNS? Könnte ich damit einen Link (temporär) auf meinen Rechner realisieren?

Gruß
Carsten

[Sebastian]

HI

DynDNS stellt dir eine Subdomain (in der Bezahlvariante auch eine Domain) zur Verfügung, die auf deinen Computer geht. Somit kannst du daheim deinen PC als Webserver nutzen.

Hast du vielleicht das Template fe_page.tpl angepasst?

Sebastian

[althoffc]

Hallo Sebastian,

ich habe keinerlei manuelle Eingriffe in Template-Dateien (tpl), html- oder css-Dateien vorgenommen.
Wie zuvor beschrieben: Ich habe ausschließlich Typolight 2.7.1 lokal installiert und meine ersten Gehversuche analog zu dem Screencast vorgenommen.
Ich habe auch exakt wie im Screencast die gleichen Stylesheets ausgwählt und Einstellungen vorgenommen, bis auf die beschriebenen zwei Abweichungen.

Ich habe auch noch mal in den Artikel geschaut dass der auch wirklich in der Hauptspalte angezeigt wird.

Mir ist nicht klar, wo ich sonst noch schauen sollte. Wo finde ich denn das zuvor angesprochene CSS-File (Name?) in dem für #main und #left eventuell die Padding-Einstellungen zu korrigieren sind?

Gruß, Carsten

[Tinker2]

Ich habe exakt das gleiche Problem, und schlage mich damit schon ein paar Tage immer wieder mal rum.

zu sehen hier: www.typo.christianreichel.net

Das was man jetzt sieht, basiert auf einer frischen Installation, mit neuer Datenbank, keinerlei Veränderungen nach der Installation, und dem befolgen des Tutorials zum "Quickstart" hier auf der Seite.
Das gleiche Bild ergab sich aber auch schon bei einer älteren Installation die ich noch hatte, und auf Ursprungszustand zurück geändert hatte. Da dachte ich, das ich wohl irgendwo noch Reste irgendeiner Spielerei habe, die ich nicht erkenne.
Aber das Bild ist identisch mit dem einer neuen Installation.

Es ist mir ein absolutes Rätsel was vor sich geht, allerdings bin ich auch ein "Newbie". Jedoch hatte ich bei älteren Installationen zum ausprobieren noch durchaus Erfolg, das Aussehen des "Quickstarts" nach zu bauen.

[MacKP]

Ein kleiner Tipp zur selbsthilfe auf die schnelle:
Installiert euch das Addon Firebug von Firefox.
Damit kann man sehen wie sich die Blöcke auf der Seite verhalten und verschieben.

Dadurch könnt Ihr besser sehen was gerade nicht so ganz passt.

Ansonsten helfen euch viele Internetseiten wo man CSS lernt. Denn ohne geht es einfach nicht ;-)

Viele Grüße

[Tinker2]

Ja, das habe ich auch schon benutzt, ebenso das Web-Developer-Addon um das CSS der einzelnen Bereiche noch genauer auslesen zu können.
Leider hat mich das nicht klüger gemacht, zumindest bisher nicht, ich versuch es gern aber noch einmal.
Denn theoretisch... ist das eine jungfräuliche Installation, die nur für das Quickstart-Tut benutzt wurde. Und doch gänzlich anders ist.
Meine Vermutung liegt in der Konstruktion der Navigation, da es ja den Punkt den das Quickstart-Tut benutzt nicht mehr gibt.

[MacKP]

Hallo Tinker2,
du könntest dem Header mal eine Höhe von 110px zuweisen. Dann würde es erst mal gut aussehen bei dir und nicht mehr ineinander laufen.

Allerdings muss man sehen was du genau haben willst um da mehr zu sagen. Je mehr Seiten du in der Navi hast, desto mehr platz braucht diese...

Wenn du allerdings die Navi neben dem Inhalt haben möchtest, solltest du diese dann in #left rein tun (das musst du dann aber auch noch von TL beim Seitenlayout erstellen lassen...).

Es ist an sich überhaupt nicht relevant, das es die Navigationsart in der Form wie es sie gab nicht mehr gibt, die Module haben ja auch nicht das Aussehen geregelt, sondern den Inhalt der Navigation. Für das aussehen ist immer CSS verantwortlich.

Viele Grüße

[Tinker2]

Hallo Mac,

je mehr ich da jetzt rummache, je klarer ist, das das Quickstart-Tut in Bezug auf die Navigation ernsthaft veraltet ist.

Ich nähere mich an:
Der Punkt Navigationsmenu greift in der mitgelieferten CSS-Datei "xNavigation" auf die CSS-Klasse "mod_navigation" zu. Um das Beispiel des Tutorials nachzubauen braucht man aber "mod_navigationMain".
Das habe ich gelöst in dem ich diese geändert habe. Für das Tutorial erstellt man das Modul "navigation". Dort muss man demnach ganz unten unter Experten-Einstellungen noch manuell die Klasse "mod_navigationMain" eingetragen haben, das Modul wie im Tut beschrieben greift sich sonst die "mod_navigation".
Immerhin reagiert er jetzt teils auf die CSS-Anweisungen wie das Tutorial sie im Ergebnis zeigt.
Mal schauen was ich da noch so rausfinde, derzeit ist das Menu noch vertikal, dabei soll es laut Tut horizontal sein.

Das hier ist im Übrigen das fragliche Tut: http://de.contaowiki.org/TutorialsCr...ustomTemplates

[althoffc]

Hallo,

ich konnte den Fehler inzwischen mit Sebastians Hilfe lösen.
Ursache für die Verschiebung des Hauptkontents (Hauptspalte) in die linke Spalte (Naviagationsmenü) hinein, war eine fehlende Angabe der Maßeinheit für die Spaltenbreite "linke Spalte", und Gesamtbreite des Static-Layouts.
Wie in dem Screencast "Wie man ein Seitenlayout erstellt" von Ben Robinson gezeigt, habe ich bei den Breitenangaben keine explizite Angabe zu der Maßeinheit gemacht.
Wenn mann dann z.B. aber Pixel (px) einträgt, wird die Breite der linken Spalte wie erwartet umgesetzt bzw. der Hauptcontent "rutscht" nicht mehr an den Fensterrand.
In mod.navigation ist im xbase-Stylesheet explizit eine Breite von 200px angegeben. Diese Angabe übersteuert eventuell abweichende Angaben im Seitenlayout.

Gruß, Carsten