CSS Problem bei neuer Seite

[zoomzoom]

Hallo liebe Leser,
bin mal wieder dabei, eine neue Contao Seite zu basteln. Habe bisher auch alles hinbekommen, wie ich es haben möchte. Nun steht das "Gerüst" und es zeigt sich, das die untere Navigation immer ausserhalb des Monitorbereichs ist. Mir scheint es so, als würde irgend ein Bereich 2cm zu lang sein, deutlich zu erkennen durch den hellblauen Bereich. Nun suche ich mir schon Stunden lang den Wolf und finde meinen Fehler nicht.
Könnte vielleicht jemand von Euch mal schauen, woran es liegen könnte? Hier der Link zur Seite: https://awesto.dl-ms.de/index.php/satzung.html

Ach ja: woran könnte es liegen, das das Logo oben mit Firefox und mit Opera korrekt angezeigt wird und der IE hier Vers. 11, das Logo in Originalgröße zeigt?

Danke schon jetzt.

Dirk

[Spooky]

Naja, du setzt die Höhe von #main ja selbst per JavaScript:

<script>
(function($)
{
    "use strict";
    var resizeColumns = function()
    { 
        // reset min height on columns
        $('#container > *').css('min-height','0');
        // dynamically set the padding for the #container
        $('#container').css('padding-bottom',$('footer').outerHeight()+'px');
        // calculate the height
        var height = $('#wrapper').height() - $('header').outerHeight() - $('footer').outerHeight();
        // set the min height for columns
        $('#container > *').css('min-height',height+'px'); 
    };
    $(document).ready( function() { resizeColumns(); } );
    $(window).load( function() { resizeColumns(); } );
    $(window).resize( function() { resizeColumns(); } );
})(jQuery);</script>

Die Berechnung ist aber falsch.

[zoomzoom]

Hallo Spooky,
danke Dir für die schnelle Antwort. Das Java Script hatte ich aus einer anderen Seite kopiert, damit die Seite immer die gleiche Höhe hat solange der Inhalt nicht mehr ist.

Wie würde denn die Berechnung richtig sein?

[Andreas]

Ach ja: woran könnte es liegen, das das Logo oben mit Firefox und mit Opera korrekt angezeigt wird und der IE hier Vers. 11, das Logo in Originalgröße zeigt?

Schreibe den Quellcode für das Logo nicht selber. Erstelle einen Artikel (bewährter Name '_Logo' (o. CE) auf einer unveröffentlichten Seite (bewährter Name '_GLOBALS'). Erstelle das Logo mit einem CE von Contao. Vergib aussagekräftige Title und Dateinamen (zB logo-akademie-awesto.svg). Bedenke, dass Suchmaschinen den Text aus dem Bild nicht auslesen können. Schreibe das hier ins Module-Typ-HTML und binde es ins Layout ein.

<!-- indexer::stop -->

<div class="mod_article block globals_logo">
für Artikel:
{{insert_article::_logo}}
für CE:
{{insert_content::ID von CE}}
</div>

<!-- indexer::continue -->

Benutze für Ordner und Dateinamen nur die Zeichen 'a-z', '0-9', '-', '_' und '~'. (Kleinschreibung)

In der momentanen Situation solltest du das Bild als Blockelement und nicht inline präsentieren.
CSS:

/*  Zur Zeit */
img {
    max-width: 100%;
    height: auto;
}
#logo {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* Neu */
img {
    max-width: 100%;
    height: auto;
}
#logo {
    margin-top: 15px;
    margin-bottom: 15px;
}
#logo img {
    display: block;
    margin: 0 auto;
    width: 450px;
} 

WIDTH und HEIGHT im IMG sollten auf den original Werten des Bildes stehen. Im Moment steht da nur 'width="450"' das Bild ist aber 746px breit.

[zoomzoom]

Hallo Andreas,
danke Dir sehr für die ausführliche Beschreibung. Habe es umgesetzt und es funktioniert. Derzeit allerdings nur ohne CSS sichtbar. Ich will mit den CSS Anweisungen komplett von vorn anfangen, vielleicht komme ich dann auch selbst dahinter, warum die Seite länger wird. Hättest Du noch einen Tipp?
Liebe Grüße
Dirk

[Andreas]

Ja, versuch mal das hier für dein Grundgerüst. Mach mal alles andere CSS vorher weg.

/** Rows */

body {
  margin: 0;
}
#wrapper {
  max-width: 1200px;
  min-height: 100vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}
#header {
  background-color: #a6001a;
}
#container {
  background-color: #ffab00;
  flex: 1 1 auto;
}
#footer {
  background-color: #e06000;
}



/** Columns */

#container {
  display: flex;
  flex-direction: row-reverse;
}
#main {
  flex: 1 1 auto;
}
#left {
  background-color: #ee9600;
  width: 240px;
} 

#container sollst du dann natürlich in eine Regel zusammenführen, habe es nur getrennt, damit du siehst wofür die Eigenschaften benutzt werden - Reihen und Spalten. So sieht es dann gekürzt aus aufs Wesentliche beschränkt:

/** Mandatory */
body {
  margin: 0;
}
#wrapper {
  max-width: 1200px;
  min-height: 100vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}
#container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row-reverse;
}
#main {
  flex: 1 1 auto;
}
#left {
  width: 240px;
} 

Bei deinem responsive breakpoint setzt du dann einfach den #container auf flex-direction:column; oder column-reverse, wenn du die linke Spalte oberhalb von Main haben möchtest, und #left auf width:unset;.

Siehe auch hier http://the-echoplex.net/flexyboxes/ (nicht perfekt, aber guter Ansatz zum Ausprobieren), https://css-tricks.com/snippets/css/a-guide-to-flexbox/, http://flexboxfroggy.com/

[zoomzoom]

Hallo Andreas,
tausend Dank für Deine Hilfestellung. Leider kenne ich mich zu wenig aus, um mit Flexbox zu basteln. Ich muss doch sicher alle anderen Styles anpassen, oder? Im Moment sieht die Seite so aus: https://awesto.dl-ms.de/index.php/startseite.html

Vielleicht hast Du ja Lust und Zeit, mir mit Flexbox zu helfen?

Gruß
Dirk

[Andreas]

Ich muss doch sicher alle anderen Styles anpassen, oder?

Na ja, hauptsächlich musst du andere Styles entfernen, wenn du mein Beispiel von oben aufsetzt. Hauptsächlich diese, welche width, height, margin, border und padding auf die Elemente des Grundgerüsts (html, body, #wrapper, #header, #container, #footer, #container, #main, #left und #right) aufsetzen. Deswegen dürftest du "Layout-Builder" und "Responsives Layout" nicht anhaken, oder deren Werte wieder überschreiben. Dein Javascript muss dann auch weg.

Die Seite hat im Moment kein #left und kein #right, dann bräuchtest du nur das CSS für die "Rows".

Lust habe ich schon, aber keine Zeit. Ich könnte das als Auftrag annehmen.

[zoomzoom]

Ich werde mal mich in die Materie einlesen und probieren. Gibt es eine deutsche Anleitung / Hilfestellung? Vielleicht kann ich Dich ja bei auftauchenden Fragen noch einmal ansprechen? Einen Auftrag erteilen könnte ich, aber leider hat der Verein, wie so oft, keine Mittel zur Verfügung. Also selber machen....

Danke für alles,

Dirk

[mlweb]

Von Peter Müller gibt es zwei gute Videos

https://www.video2brain.com/de/video...en-per-flexbox
https://www.video2brain.com/de/video...rtgeschrittene

Ansonsten im Internet massenhaft englischsprachiges. Ist aber meist gut bebildert und mit Beispielen versehen. Kann man m.E. auch mit weniger guten Englischkenntnissen verstehen.
Unter den deutschen Webseiten finde ich https://www.mediaevent.de/tutorial/flexbox.html für einen ersten Überblick ganz gut.

[Andreas]

Wenn du nicht weiter kommst, kannst du jederzeit hier im Forum fragen. Immer am besten einen Link auf eine Seite mit dem Problem. Die Seite sollte validiert sein und nur die nötigsten Elemente enthalten, welche den Fehler verursachen bzw. das Problem darstellen.

[zoomzoom]

Danke für die Hinweise, ich werde mein Glück mal versuchen. Als erstes mal die Video beschaffen.
Könnte mir jemand von Euch noch verraten, wie ich das eine Logo linksbündig und das andere rechtsbündig auf gleicher Höhe bekomme? Habe ja ein Modul mit diesem Code
<!-- indexer::stop -->
<div class="mod_article block globals_logo">
{{insert_content::9}}
{{insert_content::29}}
</div>
<!-- indexer::continue -->

https://awesto.dl-ms.de/index.php/startseite.html

Danke im voraus für die Hilfe.
Dirk

[Andreas]

.globals_logo .ce_image:first-child {
  float: left;
}
.globals_logo .ce_image:nth-child(2) {
  float: right;
}

Gib am besten noch allen Bilder in .image_container display:block, weil die sonst inline sind, d.h. sie werden im Prinzip wie ein Buchstabe behandelt, was schon mal zu Pixelfehlern führen kann.

.image_container img {
  display: block;
}

Am besten deaktivierst du dir auch diese Felder für die Abstände, das führt oft zu Durcheinander und mit einem saubern CSS brauchst du das nicht.

Dem Bild kannst du noch den Title 'Akademie AWeStO - {{env::host}}' und die Verlinkung auf '{{env::url}}' geben.

Flexbox wär auch ne gute Lösung, aber ich glaube, dass du dieses rechte Bild besser als Hintergrundbild per CSS einbindest, es sei denn, es ist ein Bild, welches verlinkt werden soll. Dann brauchst du da überhaupt nicht mit links und rechts zu machen.

[Andreas]

<!-- indexer::stop -->
<div class="mod_article block globals_logo">
  {{insert_content::9}}
  {{insert_content::29}}
</div>
<!-- indexer::continue -->

Ich habe letztens mal irgendwo (ich glaube bei rocksolid) gelesen, dass die Indexer, wenn sie keine Leerzeilen dazwischen haben, schon mal zu irgendwelchen Fehlern führen können. Deswegen zeige ich das immer mit Leerzeilen. Weiß da jemand was Genaueres dazu?

[zoomzoom]

Vielen Dank für diese Hilfestellung.

Die nächste Hürde, die ich nicht überwinden kann, ist folgende: wie lautet der CSS Style, damit ich "Passwort vergessen" so stylen kann wie das LogIn darüber? Also Eingabebereich für Benutzername und Mailadresse unter der Beschreibung.

https://awesto.dl-ms.de/index.php/mitglieder.html

Dirk

[Andreas]

Zuerst einfach mal "Tabellenloses Layout" im Modul anhaken.

Du solltest dir das HTML und CSS auch mit den Devtools im Firefox ansehen - F12.

[zoomzoom]

Hallo Andreas,
kleine Ursache aber große Wirkung. Da wäre ich nicht drauf gekommen.

Ich nutze schon im FF die Möglichkeit, die Elemente zu untersuchen. Ist ja das gleiche wie F12. Ich nutze dann die Ansicht "Inspektor". Sollte ich woanders besser klar kommen?

Dirk

[Andreas]

Nein, der Inspektor ist schon das richtige. Im Firebug funktioniert mittlerweile leider einiges nicht mehr, da die Entwicklung eingestellt wurde. Betrifft aber im Moment hauptsächlich die JS-Konsole.

[zoomzoom]

Die Probleme nehmen heute kein Ende. Ich suche mir einen Wolf nach einem plausiblen Grund dafür:

1. Ich habe subcolumns installiert erst über den Erweiterungskatalog, danach alles retour und neu über den Composer. Das FE zeigt mir zwar zwei Spalten an, jedoch sind beide nicht auf gleicher Höhe. Ich weiß nicht warum!

https://awesto.dl-ms.de/index.php/startseite.html

2. auf der gleichen Startseite ist ein Modul vom Typ Nachrichtenliste angelegt. Der Link zur Weiterleitungsseite funktioniert, der Beitrag wird im Modul NAchrichtenleser auch angezeigt. Sobald ich aber auf eine andere Seite wechsle und wieder zurück gehe, ist der Bericht verschwunden. Auch hier komme ich nicht dahinter, warum! Der Artikel soll dauerhaft angezeigt werden. Gleiches gilt im übrigen auch für die Events.

Schon mal Tausend Dank für sachdienliche Hinweise.

Dirk

[Andreas]

Zu 1: Benutzt du selbst geschriebenes HTML? Der Quellcode ist fehlerhaft. Bitte die Seiten immer validieren, bevor man sich hier meldet. Für den Firefox gibt es ein Addon "HTML-Validator". Das Addon "Web Devoloper" hat auch einen Direktlink um die angezeigte Seite online zu validieren.

Zu 2: Keine Ahnung, was du meinst.

[zoomzoom]

Also, ich benutze kein selbst geschriebenes HTML! Wie schon geschrieben, habe ich installiert und nichts geht.

Zum 2. Punkt: du bist auf der Startseite und folgst entweder einem link bei den Terminen oder dem kurz gefassten. Wird alles angezeigt wie es sein soll. Zum einen beim Nav. Punkt Termine und bei Vereinsleben/Berichte. Aber nicht dauerhaft. Denn wenn Du diese Navipunkte direkt anklickst, wird nichts angezeigt. Das ist mein Problem.

[Andreas]

Ja, das ist ein Reader auf der Seite Berichte. Wenn du die Seite normal aufrufst, weiß der Reader nicht, welche News er darstellen soll. Das ist normal. Normalerweise ist die Struktur so:

- Seite mit Newsliste
  - Unterseite mit Newsreader (im Menü versteckt).
- Noch ne Seite

[Andreas]

Also, ich benutze kein selbst geschriebenes HTML! Wie schon geschrieben, habe ich installiert und nichts geht.

Irgendwer macht dir ein vereinsamtes

</div>

zwischen den Container und den Footer. Wenn du also kein Template angepasst hast, dann kontrolliere, welche Erweiterung das macht. Allerdings sieht das stark nach nem falsch angepassten fe_xxx Template aus.

Edit: Könnte auch an den Subcolumns liegen, dass du die Elemente nicht richtig aufgesetzt hast, oder die Erweiterung buggy ist. Du kannst auch mal [dma_simple_grid] versuchen (CSS kannst du dir dabei aussuchen, unsematic, bootstrap, contao grid, foundation ...) oder [rocksolid-columns]. Es gibt auch noch [simple_columns], das hat aber keine unterschiedliche Einstellung für große und kleine Viewports.

[MacKP]

Jap, Subcolumns hat da einen kleinen Bug: https://github.com/felixpfeiffer/Con...umns/issues/29
Das schließende </div> kannst du dir aber recht einfach selber in den Code einbauen.

Viele Grüße

[zoomzoom]

Hallo MacKP,
vielen Dank für den Hinweis auf meinen Hilferuf. Damit ich nicht mehr zerstöre als repariere, könntest Du mir vielleicht sagen, wie ich das <div> einbauen kann, oder?

Dirk

[MacKP]

Hmm ich weiß gerade keine Installation wo ich das gemacht hatte...
Wenn ich mir das auf github anschaue, dann sollte das mit der Version da auch nicht mehr passieren. Guck mal ob das Template hier dem von dir entspricht:
https://github.com/felixpfeiffer/Con...olsetEnd.html5

Viele Grüße

[zoomzoom]

Guten Morgen,

habe ich verglichen. Beide Templates sind identisch. Wer könnte Rat wissen?

[do_while]

Selbst ist der Mann.

Zu jedem Inhaltselement, was Subcolumns nutzt, gibt es auch ein Template(-Schnipsel), der auf der Seite ausgegeben wird. Wenn man sich die Templates ansieht, muss zwischen dem Start- und dem Endelement eine ausgeglichene Anzahl von öffnenden und schließenden <div>s sein.

[zoomzoom]

Guten Morgen,

selbst ist der Mann, wenn er denn kann! Wie kann ich das denn vergleichen und den Fehler beseitigen?

[do_while]

Im Groben soll doch folgende vereinfachte Struktur dabei herauskommen:

<div>  <!-- Beginn der Subcolumns -->
    <div>
        <!-- Inhalt Spalte 1 -->
    </div>
    <div>
        <!-- Inhalt Spalte 2 -->
    </div>
    <div>
        <!-- Inhalt Spalte 3 -->
    </div>
</div>   <!-- Ende der Subcolumns -->

Jedes div, was geöffnet wird muss auch wieder geschlossen werden. Nach dem Ende der Subcolumns müssen soviele </div> enthalten sein, wie mit <div> geöffnet wurden.
Jede Spalte hat ein Template, dann gibt es noch jeweils eines für den Start und für das Ende.

[zoomzoom]

Danke für die Erklärungen und Hilfestellungen.
Der Fehler ist gefunden, ein ganz banaler: ein falsches Modul war im Layout falsch eingebunden. Schon funktioniert alles prima!!