Zwei Module in gleichen Layoutbereich

[althoffc]

Hallo zusammen,

ich bin noch ganz neu und mache meine ersten Gehversuche mit Typolight.
Ich habe ein Seitenlayout mit Kopfzeile und drei Spalten angelegt und den einzelnen Layoutbereichen (Spalten) entsprechende Module zugeordnet.
Die Inhalte werden auch wie erwartet angezeigt.

Der linken Spalte habe ich ein Modul "Hauptnavigation" und ein "Login-Formular" zugeordnet.
Das Login-Formular rutscht allerdings bis an den oberen Rand der linken Spalte.
Das Navigationsmenü fängt erst UNTERHALB des Login-Formulars an.
Der erste Eintrag des Hauptmenüs überschneidet sich mit dem Button "Anmelden" des Login-Formulars.
(Im Seitenlayout ist für die linke Spalte erst das Navigations-Modul und dann das Login-Formular angegeben; es soll also oben das Menü erscheinen, darunter das Login-Formular.)
Im Anhang sieht man, wie das Login-Formular nach oben gerutscht ist und sich mit dem Hauptmenü teilweise überschneidet.

An welchen Schrauben muss ich drehen, damit die Module in der gewünschten Reihenfolge untereinander in der linken Spalte angezeigt werden?

Gruß
Carsten

[BugBuster]

Mal blind geraten würde ich sagen, das Login Modul hat per CSS eine absolute Positionierung. Prüf daher mal die CSS Angaben.
Firefox + Firebug helfen dabei sehr.

[Thomas]

Hallo!

Die Reihenfolge der Module im Layout ändern.

[althoffc]

Hallo,

danke für die schnellen Antworten.
Eine Änderung der Modulreihenfolge für die linke Spalte im Seitenlayout zeigt keinerlei Änderungen.

Wenn ich in den Seitenquelltext schaue, werden für die div-Bereiche, in denen das Login-Formular enthalten ist, folgende Klassen aufgeführt, die ich aber in den Stylesheets nicht finde:
<div class="mod_login two_column tableform login block">
....
<div class="formbody">
...
</div>
</div>

Ich habe die im Typolight enthaltenen CSS-Dateien (xBase.css, xElements.css, xForm.css und xNavigation.css) kopiert und umbenannt in x42Base.css, usw. und diese dann im TL unter [Layout][Stylesheets] importiert.

Woher kommen dann die CSS-Informationen, wenn diese nicht in den css-Dateien enthalten sind?

Carsten

[Thomas]

Woher kommen dann die CSS-Informationen, wenn diese nicht in den css-Dateien enthalten sind?

Die kommen aus den jeweiligen Modulen und werden von TL generiert.

Kopier mal den Quelltext des Bereiches hier rein, wo beide Module liegen.

Die CSS IDs und Klassen dienen zur Unterscheidung.
Damit kannst Du sie selber getrennt von anderen Formatierungen formatieren und so individuell anpassen.
Du wirst sie in den Standard CSS Dateien auch nicht finden, höchstens allgemeine Formatierungen.

[althoffc]

Hallo

ich habe mit dem Add-On "Firebug" die Ursache gefunden! Firebug ist ja genial. Warum kannte ich das bloss nicht schon vorher? Vielen Dank für den Tipp.

Für das Navigationsmenü war eine absolute Positionierung angegeben. Habe diese auf "relative" umgestellt und schon sieht alles aus wie erwartet.

Mir ist das aber mit den von TL generierten CSS-Klassen? für die Module noch nicht so ganz klar.
Anbei noch mal der (inzwischen bezüglich der Darstellung korrigierte) Quelltext.

<div id="left">
<div class="inside">

<!-- indexer::stop -->
<div class="mod_navigation block">

<a href="#skipNavigation2" class="invisible">Navigation überspringen</a>

<ul class="level_1">
<li class="active first"><span class="active first">Startseite Typo 42</span></li>
<li><a href="Inhaltselemente.html" title="Test Inhaltselemente" onclick="this.blur();">Test Inhaltselemente</a></li>
<li class="last"><a href="Galerie.html" title="Bildergalerie 1" class="last" onclick="this.blur();">Bildergalerie</a></li>

</ul>

<a name="skipNavigation2" id="skipNavigation2" class="invisible">&nbsp;</a>

</div>
<!-- indexer::continue -->

<!-- indexer::stop -->
<div class="mod_login one_column tableless login block" style="margin-top:30px;">

<form action="index.php" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<label for="username">Benutzername</label>
<input type="text" name="username" id="username" class="text" maxlength="64" value="" /><br />
<label for="password">Passwort</label>

<input type="password" name="password" id="password" class="text password" maxlength="64" value="" /><br />
<div class="submit_container">
<input type="submit" class="submit" value="Anmelden" />
</div>
</div>
</form>

</div>
<!-- indexer::continue -->

</div>
</div>

[Thomas]

Durch Leerzeichen getrennte Klassen lassen sich einzeln ansprechen.
Wobei die 1. Klasse immer meistens das Modul wiedergibt.

Ich weiß was Du meinst.
Es ist am Anfang etwas irritierend, welche Klassen da alles generiert werden.
Du wirst im Laufe der Zeit aber feststellen, dass einige immer wieder auftauchen.
So kannst Du auch allgemeine Formatierungen auf alle module anwenden.

z.B. indem man der Klasse block eine Anweisung übergibt, könnten alle Module die diese Klasse nutzen angesprochen werden.

[althoffc]

Danke für die Erläuterungen.

Wenn einem Element mehrere Klassen zugeordnet werden, dann erhält dieses die Eigenschaften aller aufgeführten Klassen, nehme ich an.
Welche Klasse "gewinnt" dann, wenn gleiche Eigenschaften in mehreren Klassen beschrieben werden?

Gruß, Carsten

[Thomas]

Das ist Reihenfolgen abhängig.

Die 1. wird meistens von der Letzten überschrieben.
Wobei man darauf achten muß, welche Reihenfolge die eingebundenen CSS Dateien haben, sollte man mehrere einbinden wollen.

Mit der Anweisung:

#beispiel {
      background-color:#fff !important;
}

wird durch !important diese Anweisung immer verwendet, egal in welcher Reihenfolge.

Bis vor ein paar Tagen habe ich diese auch nicht annähernd verwendet. Ich kannte sie zwar, aber nie Beachtung geschenkt. Mittlerweile habe ich so einige Vorzüge entdeckt.

[althoffc]

Vielen Dank für die Tipps.

Habe mir inzwischen Literatur zu HTML und CSS zugelegt und gelesen. Jetzt ist mir im Nachhinein einiges (nicht nur im Zusammenhang mit TL) klarer geworden.

Werde weiter lernen und hoffentlich nicht mehr so viele Denkfehler machen.

Gruß
Carsten

[Thomas]

Fehler mache ich heute auch noch, ist ja nur menschlich.
Manches mache ich auch umständlich, aber wie sagt man so schön: *Der Weg ist das Ziel.*.

[shrike]

Moin Moin Community,

hoffentlich bin ich bald auch mal in der Lage Fragen zu beantworten, aber derzeit habe ich leider mehr Fragen als Antworten

Eigentlich ist mein Problem wohl ein CSS Problem, aber ich komme einfach nicht weiter...

Also, ich habe in der linken Spalte einmal eine Navigation. Die ist relative positioniert und darunter habe ich ein Inhaltmodul mit eigenem HTML-Inhalt.
Was jetzt prima funktioniert ist, dass die beiden untereinander dargestellt werden. Interessanterweise haben aber keinerlei CSS-Anweisungen irgendwelche Auswirkungen auf den Inhalt (in diesem Fall möchte ich die Schriftgröße ändern).

Der Aufbau ist grob wie folgt

<div id="left">
<div class="mod_navigation">
Hier steht die Navigation
</div>
<diy id="addi">
Hier stehen Adressdaten
</div>

</div>

Obwohl ich nun nicht grade ein CSS-Anfänger bin komme ich hier einfach nicht weiter...
Weiß jemand eine Lösung? (Wahrscheinlich irgendeine Kleinigkeit )

[althoffc]

Hallo,

falls der Tippfehler wirklich in Deiner Seite/CSS vorkommt, solltest Du ihn korrigieren:
<div id="addi"> anstatt <diy id="addi">

Den Bereich <div id="addi"> kannst Du im CSS gezielt mit
#addi {
/* CSS-Formate definieren, z.B. für Schriftgröße. */
}

ansprechen.

Wenn Du weitere Elemente innerhalb des divs "addi" hast, kannst Du diese ebenfalls ansprechen:
#addi h3 {
/* CSS-Format: Große Schrift */
}
#addi p {
/* CSS-Format: normale Schrift */
}

[shrike]

Moin althoffc,

nein, das war leider nur ein Tippfehler hier. Wär natürlich mal wieder super gewesen
Aber leider kann ich keinen solchen Trivialfehler entdecken...

Das DIV hab ich richtig angelegt und dann mit #addi im CSS angesprochen. Hier hab ich dann auch lediglich die Schriftgröße sowohl über das Contao-Hilfsmodul als auch einmal über die Eingabe eigener Codes angegeben. Ich habe auch darauf geachtet, dass nicht beide Angaben gleichzeitig angegeben werden.

Hat noch jemand Ideen?

EDIT:
Hier mal der Quelltext der Webseite

<div id="left">
<div class="inside">

<div id="addi">
<p class="textklein">Strasse: <br />
Ort: <br />

<br />
Tel: <br />
Fax: <br />
<br />
Mobil: <br />
E-Mail:<br /></p>
</div>
<!-- indexer::stop -->
<div class="mod_navigation sub block">

<a href="index.php/leistungen.html#skipNavigation2" class="invisible">Navigation überspringen</a>

<ul class="level_1">
<li class="first"><a href="index.php/virtual-office.html" title="Virtual Office" class="first">Virtual Office</a></li>
<li><a href="index.php/bueroraeume.html" title="Büroräume">Büroräume</a></li>
<li><a href="index.php/management.html" title="Büroservice">Büroservice</a></li>
<li><a href="index.php/uebersetzungen.html" title="Übersetzungen">Übersetzungen</a></li>
<li><a href="index.php/buchhaltung.html" title="Buchhaltung">Buchhaltung</a></li>
<li><a href="index.php/seminare.html" title="Seminare">Seminare</a></li>
<li class="last"><a href="index.php/fortbildungen.html" title="Fortbildungen" class="last">Fortbildungen</a></li>
</ul>


<a name="skipNavigation2" id="skipNavigation2" class="invisible">&nbsp;</a>

</div>
<!-- indexer::continue -->

</div>
</div>

EDIT 2: Bis zur eleganten Lösung hab ich es jetzt erst mal mit einer CSS-Formatierung direkt im Modul geschafft
Trotzdem würde mich die richtige Lösung interessieren...

[althoffc]

Hallo,

das p-Element mit der Klasse "textklein" müsstest Du innerhalb des divs "addi" wie folgt im CSS ansprechen können:

#addi p.textklein {
/* Schriftgröße ... */
}

Wenn das auch nicht helfen sollte, schau Dir doch mal mit der FF-Extension "Firebug" das betreffende Element an, welches Du mit einer anderen Schriftgröße versehen möchtest.
Im Firebug sind die jeweils zugeordneten Klassen und Element-Struktur erkennbar, so dass die CSS-Angaben gezielt darauf eingesetzt werden können.

Gruß, Carsten

[shrike]

So, nun hab ich es auch endlich "elegant" geschafft!
Der Fehler war mal wieder ein Contao-Anfängerfehler: Man sollte halt noch das neue Stylesheet ins Layout einbinden, dann kann Contao auch schon drauf zugreifen...

Trotzdem Danke für die Hilfe und ich hoffe, dass zumindest jetzt auch andere Anfänger von diesem Beitrag profitieren können!

Schönen Sonntag noch!

[chrissuperstar]

Hallo,

ich habe ein ähnliches Problem.
Ich möchte in der linken Spalte zwei Module Navigation und Login-Bereich untereinander darstellen, nur leider wird das Login-Element im Moment genau neben das Navigationsmodul gesetzt! Hier mein CSS -Code dazu:

/* ============================= Vertikale Navigation
========================== */
#left .mod_login
{
	font-weight:bold;
	font-size:12px;
	margin:-top 150px;
                     position:relative;
}
#left .mod_navigation h1
{
	margin:0 0 1em;
	font-weight:bold;
	font-size:12px;
}
#left div.mod_navigation
{
	width:142px;
	margin:10px 0 0;
	font-size:12px;
                    
}
#left .mod_navigation ul
{
	margin:0;
	padding:0;
	background-color:#fff;
}
#left .mod_navigation li
{
	margin:0;
	list-style-type:none;
}

Was muss ich ändern, damit die Module untereinander angezeigt werden?
Vielen Dank im Voraus und viele Grüße,
Chrissuperstar

[lucina]

Vermutlich: beiden eine Breite geben (idealerweise die des umgebenden #divs) und display:block.

Carolina.

[chrissuperstar]

Danke, Carolina.

aber wie meinst du es genau?
So wie ich es verstanden habe, scheint es nicht zu funktionieren bei mir *shame*

Grüße.
chrissuperstar

[lucina]

#left .mod_login, #left .mod_navigation{
	width: 142px;
	display: block;
	float:left;
	}

So ungefähr ... ;-)

(kann man natürlich ohne einen Live-Link jetzt nur vermuten)

Carolina.

[chrissuperstar]

Super ... so hat es geklappt ... vielen vielen Dank.

Grüße aus Kiel nach Kiel