Spaltendesign: Inhalt horizontal verschoben

[ise]

Hallo zusammen,
Ich kämpfe mit einem CSS Problem und komme einfach nicht weiter.
Die Webseite läuft auf Typo3 Ver. 4.5.2. Ich verwende ein zweispaltiges Templates mit TemplaVoila. In der linken Spalte habe ich das Menu (tabellarisch), welches mit TypoScript automatisch erzeugt wird. Rechts ist der Seiteninhalt.
Nun hab ich das Problem, dass das Menu immer unterhalb des Inhalts in der rechten Spalte... (siehe Anhang).
Wenn ich aber das Menu durch einen simplen Text ersetze, so besteht das Problem nicht. Auch wenn ich die linke Spalte breiter mache, bleibt das Menü über dem Inhalt rechts.
Hat da jemand eine Idee? Weder float, vertical-align noch sonst was konnte bisher mein Problem beheben.

Vielen Dank!
Gruss
Ise

[ise]

Hat niemand eine Idee? Wenn für die Hilfe irgend das Typoscript, CSS oder sonst was benötigt wird teilt mir das bitte mit. Ich stelle das gerne zur Verfügung.

Vielen Dank für eure Hilfe!
Gruss
Ise

[ise]

Also ich versuchs nochmal, denn ich komme bei diesem Problem wirklich nicht weiter.

Die Navigation wird mit folgendem TSCode erzeugt:
// Hauptnavigation erzeugen
lib.field_left= HMENU
lib.field_left {
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
ACTIFSUB < .IFSUB

}
2 < .1
2.wrap = <ul>|</ul>

3 < .2
4 < .2
}

Die entsprechenden CSS dafür sieht folgendermassen aus:

ul#nav,ul#nav ul {
	margin: 0;
	padding: 0;
	width: 150px; 
	border-bottom: 1px solid #ccc;
	background: #fff; 
	color: black;
	font-size: 100%;
	}
 
ul#nav li {
	position: relative;
	list-style: none;
	margin: 0px;
	}
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

ul#nav ul {
	position: absolute;
	display: none;
	background-color: #ffffff;
	z-index: 1;
	left: 135px; 
	top: 0;
	overflow: visible;
	}

Hilft dies euch vielleicht weiter mir zu helfen? Wie gesagt, wenn ich anstelle der Navigation ein simpler Text in die linke Spalte einfüge, so wird dieser sauber neben dem Inhalt der Hauptspalte angezeigt.

Ich wäre euch wirklich um jeden Hinweis dankbar!

Grüsse
Ise

[etux]

Poste bitte einen Link zu Deiner Site, sonst wird das hier nichts

.

[ise]

Poste bitte einen Link zu Deiner Site, sonst wird das hier nichts

.

Danke für eine Rückmeldung. Die Seite ist hier zu finden
Home

[etux]

Wenn Du YAML anwendest, muss Du es auch verstehen. Vor allem dann, wenn Du vor hast, mehr daran zu ändern, als nur ein Paar Hintergrundfarben an zu passen.
Dein eigentliches Problem ist die Quellcode-Struktur. Wenn Du da was änderst, muss Du es auch konsequent machen und alle betreffende Dateien entsprechend anpassen.

Wenn ich erst mal darüber hinweg sehe, würde ich Dein Problem auf die „globale Wirkung von Clear“ reduzieren.
Stichworte für Deine Suche: „BFC – Block Formatting Context“, Wirkung von „Float und Clear einschränken“ und eben „globale Wirkung von Float und Clear“.

Das es daran liegt, kannst Du Dich kurz (testweise) überzeugen, indem Du div#col3 oder div#col3_content ein „overflow: hidden“ gibst.

Übrigens sehe ich keinen Sinn, YAML bei Deiner Website an zu wenden. Und schon gar nicht bei einer TYPO3 Installation. Was kann YAML, was TYPO3 nicht kann?
Schon vergessen – TYPO3 ist ein Framework.
Das letzte mindert natürlich nicht im geringsten meinen großen Respekt vor Dirk Jesse und seiner grandiosen Arbeit

.

[etux]

Nachtrag:
ich sehe gerade, dass Du an Deiner Website arbeitest und dem div#col3_content nicht nur testweise „overflow: hidden“ gibst. Noch mal – das behebt Dein Problem nicht. Denn so hast Du gleich das nächste – die aufklappende zweite Ebene der Navigation.
„overflow: hidden“ etabliert ein „BFC“ bei div#col3_content und schränkt so die Wirkung von Clear (ul#nav hat ein „clear: both;“) ein. Es sollte Dich nur davon überzeugen, dass Dein Problem oberflächlich betrachtet mit der „globalen Wirkung von Clear“ zu tun hat. Und nichts weiter.

Es sind aber auch andere Eigenschaften, die wie „overflow“ (hidden) ein BFC etablieren. Die meist benutzte und unproblematischste ist Float. Du hättest also auch anstatt „overflow: hidden“ ein „float: left“ notieren können (weitere kleine Anpassungen inbegriffen). Das Abschneiden der aufklappenden zweiten Ebene wäre somit auch vermieden.
Das Problem ist nur, wenn in die Spalte später Inhalt kommt, das Elementen mit „clear“ oder „float“ beinhaltet, geht das Ganze noch mal vom Vorne los.

Solche Probleme sind fast vorprogrammiert, wenn in einem Element (in Deinem Fall: div#main) floatende und nicht floatende Elementen stehen (div#col1, div#col3. div#col2 wird sicher auch irgendwann auftauchen).
So welche Layouts waren vor ein Paar Jahren sehr modern, wenn es darum ging Spalten mit festen und flüssigen Breiten (ohne Breiten-Angabe) zu mischen. Oder eben bei einem CSS-Framework. Es kommt aber, wie Du siehst, oft zu Problemen.

Wie man so ein Layout aktuell baut und die Probleme vermeidet, kann ich Dir auch sagen. Es wären aber, auch wenn geringe, Änderungen am Quellcode nötig. Die Frage ist nur – was bleibt am Ende vom YAML überhaupt übrig? Die unzähligen CSS-Dateien!? Und womöglich genau so viele html-Vorlagen.

Ich würde Dir raten, entweder was zu nehmen, was Du ohne große Änderungen übernehmen kannst, oder Dir was selbst zu bauen.
Und es muss kein CSS-Framework sein. Mit TYPO3 eigenen Mitteln kannst Du jedes erdenklichen Szenario umsetzen – auch Layouts mit sich dynamisch veränderten Anzahl, Position und Breiten der Spalten

.

[ise]

Vielen Dank für deine Rückmeldung. Ich erstelle diese Seite für einen Kunden, der möglichst wenig Geld ausgeben möchte. Aus diesem Grund habe ich auch auf YAML zurückgegriffen, um dort ein passendes Template verwenden zu können, da das erstellen eines eigenen Templates aufwändiger -> mehr Kosten mit sich zieht.
Die Seite läuft noch in einer Testumgebung, bin gestern beim Testen einfach nicht weitergekommen, darum ist das overflow:hidden noch drin.

Es würde mich natürlich interessieren, wie man ein solches Layout ohne Probleme baut. Da es erst meine zweite Typo3 Seite ist, bin ich noch voll in der Lehrphase. Da bin ich für alles dankbar.

Gruss
Ise

[etux]

... Ich erstelle diese Seite für einen Kunden, der möglichst wenig Geld ausgeben möchte. Aus diesem Grund habe ich auch auf YAML zurückgegriffen, um dort ein passendes Template verwenden zu können, da das erstellen eines eigenen Templates aufwändiger -> mehr Kosten mit sich zieht ...

Klingt für mich ziemlich unprofessionell, aber die Entscheidung trifft wohl jeder für sich selbst (und den Kunden). Ob es wirklich Zeit (und Ressourcen), bzw. Kosten sparend ist …? Gerade bei so einer kleinen Website so viele unnötige HTTP-Requests zu erzwingen!?

Es würde mich natürlich interessieren, wie man ein solches Layout ohne Probleme baut.

Möglichkeiten gibt es einige. Welche man nimmt, hängt auch vom Gesamtkonzept ab. Meist sind das Methoden, die auf einer Verschiebung mit negativen Margins auf Paddings, Border oder wiederum auf Margins basieren. Was auch mit einer relativen Positionierung geht.
In Deinem Fall wäre es am einfachsten, um den gesamten Inhalt von „col3“ ein extra Element ein zu setzen, was Float und eine Breite von 100% hat. Im Quellcode umschließt dann div#col3 das floatende Element, schließt aber den Float selbst nicht ein. In den meisten Fällen ist das auch nicht notwendig. Will man allerdings div#col3 für Hintergrundbilder und/oder -Farben benutzen, muss der Float beendet werden (was in der Regel unproblematisch ist).

Da es erst meine zweite Typo3 Seite ist, bin ich noch voll in der Lehrphase.

Mit TYPO3 hat das nichts zu tun. Mit CSS schon

.

[ise]

Vielen Dank schon mal etux für deine Ausführungen. Ich habe auf yaml zurückgegriffen, da ich dachte, dies würde mit Typo3 sauber funktionieren. Und warum ein neues Layout erstellen, wenn im Netz bereits etliche komplette zur Verfügung gestellt werden. Man soll das Rad ja nicht neu erfinden. Aber nun bin ich auf das erwähnte Problem gestossen, was natürlich Handlungsbedarf mit sich zieht.
Ich hab nun also folgendes gemacht:

<!-- begin: #col3 static column -->
      <div id="col3" role="complementary">
      <div id="col3_help">
        <div id="col3_content" class="clearfix">
        </div>
        </div>
        <div id="ie_clearing">&nbsp;</div>
        <!-- End: IE Column Clearing -->
      </div>
      <!-- end: #col3 -->

#col3 { margin-right: 75%; margin-left: 0; }
  #col3_content { padding-left: 20px; padding-right: 10px; }
  
  #col3_help { width: 100%; float: inherit; }

So hab ich deine Anweisungen interpretiert. Hab ich da was falsch verstanden?

Gruss
Ise