Beiträge von Clemens-XS

Da hab ich mich zu früh gefreut:

Sobald einspaltig dargestellt wird, ragt der margin des Textblocks, der sonst die linke Spalte gebildet hätte, nach rechts aus dem Layout unsichtbar heraus.

Aber die bisher rechte Spalte erhält durch das padding eine unerwünschte Einrückung, die natürlich ziemlich stört, je schmaler die einspaltige Darstellung wird.

Was kann ich tun, damit die beiden Abstände, die ich für die Spalten definiert habe, nur dann vom Browser beachtet werden, wenn tatsächlich zwei Spalten angezeigt werden und keine Wirkung haben, wenn nur einspaltig angezeigt wird?

Oder gibt es eine elegantere Möglichkeit, den Abstand zwischen den Spalten zu vergrößern? Z.B. mit dem CSS-column-gap property?

addi Ich hab's jetzt mal mit zwei mal span6 ausprobiert und jetzt funktioniert es. Das div mit span5 hatte ich ja nur aufgrund deiner Anregung übernommen, ohne über das Grid nachzudenken.

Herzlichen Dank! Da hätte ich lange dran gesucht.

Und jetzt hab ich soeben gerade geschafft, den Abstand zwischen den beiden Textspalten zu vergrößern. Ich hatte mir ja bereits "Abstandshalter" mit den Klassen right-cl und left-cl gebastelt. Macht also in der linken Spalte rechts einen Abstand und in der rechten Spalte nach links einen Abstand. So bleibt es symmetrisch. Beides bringt ein padding von jeweils 1em. Ich nutze also:

div class="row-fluid right-cl"

div class="row-fluid left-cl"

Herzlichen Dank für deine hilfreichen Tipps!

Danke addi

Jetzt bin ich erst wieder dazu gekommen, deine Tipps auszuprobieren. Die Spalten funktionieren jetzt endlich unter allen Variationen, wie ich es mir wünsche...

allerdings mit zwei deutlichen Schönheitsfehlern, die ich per Screenshot hier zeige:

Die beiden Textspalten sind aus mir unerklärlichen Gründen nicht gleich breit. Im Screenshot ist die linke 260px und die rechte 214px. Dabei nutzt die rechte Spalte deutlich den verfügbaren Platz nicht aus.

Außerdem möchte ich, dass der Abstand zwischen den Spalten etwas größer ist.

Wie kann ich diese beiden Fehler beheben?

OK, ich muss gleich wieder in meine Praxis und vorher Mittagessen. Ich will mir das in Ruhe anschauen, hab aber so viel verstanden, dass ich mit "class span-6" usw. etwas erreichen kann, weil ich so eine Spalte aus dem Grid oder mehrere erwischen kann.

Davon hab ich aber noch nicht eine Erkennung, wie breit denn die aktuelle Main-Content-Spalte ist. Wird sie breiter als ca. 480px, würde ich gerne 2-spaltige Darstellung erreichen.

Das ist richtig! Deshalb ja "Experimentier-Website". Auch die template.php (default.php) des Protostar ist verändert. Und ide viewport-width.css ist einfach auch nur eine user.css oder custom.css oder wie man sie nennen mag, die per @import ins template.css eingefügt wird.

Da manche Klassen wie z.B. "content" "container" usw. bereits anderweitig vergeben sind, habe ich für die meisten der von mir angelegten Klassen das Postfix "-cl" angehängt.

Aktuell ist ein Entwickler damit beschäftigt, bestimmte Teile zu programmieren, wodurch auch viel JS in die template.php hinein gekommen ist.

Und wenn das Ganze mal fertig ist, werde ich sicher auch das Template als Kopie anlegen. Aktuell hat es sich nun mal so ergeben.

Das Ganze ändert aber nix daran, dass ich jetzt mmer noch nicht weiß, wie ich zum Ziel komme. Irgend was mit Bootstrap soll deiner Äußerung nach die Lösung bringen, das habe ich bisher verstanden.

..."durch Bootstrap 2 ersetzen" – Keine Ahnung! Sorry, aber du könntest mir auch raten, die Aufgabe mit einer C++ Programmierung zu erledigen.

Ich müsste mich da in die Tiefe einarbeiten und dazu fehlt mir schlichtweg die Zeit.

Ich ahnte nicht, dass weitere Angaben für die Beantwortung nötig wären. Ich nutze das Protostar Template mit der Auswahl "FluidDesign". Dies beruht auf Bootstrap 2.3.* und hat ein 12-spaltiges Grid.

Der Main-Content erhält entweder 9 oder die vollen 12 Spalten, abhängig davon, ob die rechte Seitenspalte genutzt wird.

Ich nutze also zwar das Grid, weiß aber nicht, wie ich Bootstrap oder andere Techniken für meine Aufgabe nutzen kann. Deshalb ja meine Frage hier.

Meine Experimentier-Website ist hier:

Da inzwischen rund 2/3 meiner Besucher mit Mobilgeräten kommen und nur 1/3 via Desktop, verliert allmählich die spaltige Darstellung an Bedeutung. Sie soll ja nur die Lesefreundlichkeit sicher stellen, bevor die Zeilen zu lang werden.

Irgend eine template-eigene Abfrage zwingt sowieso bei allen Mobilgeräten zu einer Darstellung nur mit Main-Content = 1 Spalte, auch wenn das Gerät deutlich über 1200px screenwidth hat (was mich aber nicht stört).

Hmmmm, habe ich mich missverständlich mit meinem Anliegen ausgedrückt?

Sicherheitshalber noch mal nur die Beschreibung der Schwierigkeit:

• Die Website soll ab ca. 750px screenwidth eine rechte Spalte einblenden.
• Der Main-Content soll, um den Text lesefreundlich zu halten, ab einer Breite des Main-Content-Container von ca. 480px eine zweispaltige Darstellung des Main-Content bieten.

Mache ich die zweite Bedingung, die sich ja nur auf den Main-Content bezieht, ebenfalls von @screenwidth abhängig, so wird

der Main-Content schlagartig recht breit dargestellt,

sobald die rechte Spalte wegfällt. Gleichzeitig verhindert die @screen media-Regel, dass der Main-Content weiterhin zweispaltig dargestellt wird. Die Zeilenlängen des Text sind zu lang.

Auch bei bestmöglicher Wahl der @media-Grenzen werden die Spalten im Main-Content dann schlagartig zu schmal,

sobald die rechte Spalte hinzu kommt.

Ein erster Lösungs-Ansatz vielleicht:

die zweispaltige Darstellung sollte von der Breite des main-content Container abhängig sein.

Leider gibt es dafür keine @media-Regel. Aber evtl. könnte man mit der Kombination min-width oder max-width

und display: none etwas gestalten?

Die Verknüpfung des Screenwidth-Status mit der zweispaltigen Darstellung wäre auch deshalb schwierig, weil die meisten Webseiten gar keine Elemente in einer rechten Spalte haben. Und dieser Zustand lässt den Main-Content breit werden, ohne dass dies durch eine "CSS-Abfrage" erkannt werden kann.

Vielleicht müsste man in die template.php eingreifen und dort feststellen, ob eine rechte Spalte erschaffen wird. Wenn ja, erzeugt diese PHP-Datei eine CSS-Klasse, die in Verbindung mit Screenwidth eine Steuerung der Zweispaltigkeit erlaubt? – Oder löst man so etwas lieber mit JS?

Ich hab ja noch Chrome und Midori auf meinem Manjaro-Linux laufen. Damit muss ich dann halt gegen testen. Hässlich aufwendig dieser Mist!

Ich kann mich also damit „trösten“, dass es anderen auch so geht!

Bisher hatte ich eine Lösung, die ganz gut funktioniert hat, bei der sich aber die Breite auf die screenwidth bezog und per @media-Kondition leicht gesteuert werden konnte.

Besonders schön war, dass beide Spalten immer gleich lang waren, egal wie der Text sich darin verteilt hat! Sogar bei Bedarf konnte ich eine vertikale Trennlinie zwischen die Spalten ziehen, die natürlich bei einspaltiger Darstellung verschwand.

Leider gibt es auch die Notwendigkeit, nicht nur den main-content in manchen Webseiten darzustellen, sondern auch eine Seitenspalte. Die Breite der Seitenspalte würde aber fälschlich bei einer @media-Kondition mit einbezogen. Das führt dann zu viel zu schmalen Spalten im main-content, wenn die Seitenspalte angezeigt wird.

Hier ein Ausschnitt aus dem CSS, das mittels @media gut funktioniert hat und sogar für einen automatisch eingefügten Abstand zwischen den Spalten gesorgt hatte:

.column-cl {
      float: left;
      width: 100%;
      box-sizing: border-box;
    }

@media screen and (min-width: 800px) {
    .right-cl {
        padding-right: 1em;
        /* border-right: 1px solid #fbb;  
           bei Bedarf Trennlinie zwischen den Spalten */
    }
    .left-cl    {
        padding-left: 1em;
    }
} 

    /* Clear floats after the columns */
.row-cl:after {
      content: "";
      display: table;
      clear: both;
    }


/* Oberhalb von 800px soll zweispaltig dargestellt werden */
@media screen and (min-width: 800px) {
  .column-cl {
    width: 50%;
      }
} 

Im HTML sieht dann die Anwendung so aus:
<h3 class="head-bg">Erster Untertitel</h3>
    <div class="row-cl">
        <div class="column-cl right-cl">
            <p>Text in der linken Spalte</p>
        </div>
        <div class="column-cl left-cl">
            <p>Text in der rechten Spalte</p>
        </div>
   </div>

Um die viel zu kleinen Spalten zu vermeiden, darf sich die Kondition nicht mehr mittels @media screenwidth auf die darstellbare Breite insgesamt beziehen, sondern muss sich auf die Breite des div containers ".row-cl" beziehen.

Erst wenn "row-cl" breiter als 480px ist, soll zweispaltig dargestellt werden.

Frage: Wie kann ich mittels min-width oder max-width Definitionen oder mit anderen CSS-Möglichkeiten mein Ziel erreichen?

Keine Ahnung, was das nu wieder war. Heute passt wieder alles. – Ich vermute, dass mir mal wieder der Chaceh vom Firefox einen Streich gespielt hat, obwohl ich extra ein AddOn installiert habe, mit dem der Cache vom Firefox gelöscht wird.

So hilfreich die Developer Tools im Firefox sind... aber du änderst was in einer CSS-Datei und kannst dich nicht darauf verlassen, dass Firefox auch nach einem CacheClean die vorgenommenen Änderungen wirklich anzeigt.

Man muss dazu den Tab der entsprechenden Seite schließen und wieder neu in einem Tab frisch öffnen. Erst dann wird die Seite zuverlässig neu aufgebaut!

Alternative: Ich muss die Seite in einem anderen Browser kontollieren, der dieses Problem nicht hat, wei z.B. Midori. Chromium traue ich noch nicht über den Weg.

Ich hab in meiner htaccess die bisher übliche mod rewrite-Einstellungen beibehalten, die von Joomla empfohlen sind.

"moderne" siehe mein Screenshot

Ach ja und danke an addi Hab das jetzt mal ausprobiert. In älteren Joomla-versionen gab es das wohl noch nicht.

Danke Astrid, jetzt funktioniert es auch bei mir.

Das WorkAround mit dem Menütyp URL hat aber leider auch zwei Nachteile, wie ich jetzt feststellen konnte:

1.) Mein MobileMenü zeigt, wenn ich auf der Seite "Inhalt" bin und das Menü neu ausklappen lasse, nicht an, dass ich auf der Seite Inhalt bin, sondern statt dessen auf "home".

2.) Ich möchte auf der rechten Seitenspalte zwei Module anzeigen lassen. Anscheinend verhindert Joomla dies, wenn der main content über eine URL eingefügt wird.

Und jetzt, wo ich wenigstens mal das Inhaltsverzeichnis angezeigt bekomme, hätte ich noch gern dessen Erscheinungsbild dem der restlichen Site angepasst:

Ich möchte der Darstellung des Inhalts, die von OSM als HTML geliefert wird, eine class zuweisen, durch die das ganze Inhaltsverzeichnis (wie alle meine Beiträge) in einem schattenbehafteten Rahmen angezeigt wird.

Im Menü selbst geht das nicht, aber wo sonst?

Den Font für body habe ich auf meiner neuen Experimental-Website prozentual definiert. Beim Ausprobieren per CSS fand ich heraus, dass es einen Sprung der Fontgröße gibt bei 98%. Gebe ich 97% ein, kommt in Chrome und Midori (=Safari) die Schrift in der gewünschten Höhe. In Firefox wird sie größer dargestellt, sodass es schon deutlich stört.

Ich habe dann versucht, es auf 96 und 95% zu setzen. Die Schrift bleibt dann in Chome und Midori immer noch auf der gewünschten Größe, aber die Größe in Firefox verringert sich nicht, wie ich angenommen hatte.

Würde ich aber noch kleiner werden, so wäre der Font in Chrome und Midori zu klein, wenn er in Firefox richtig wäre.

Link zur Experimental-Website:

Was tun? Sollte ich denn trotz Responsive Design die Fonts doch wieder in festen Pixeln angeben? Oder hilft das nicht gegen die jetzige Schwierigkeit?

Auf meiner neu installierten Experimentierseite sind die "modernen URLs" aktiviert, bei denen die Beitrags-IDs rausgefiltert werden. Nun habe ich in einer der Kategorien einen neuen Beitrag angelegt und diesen als Haupteintrag markiert. Er erscheint auch einwandfrei auf der Homepage. Aber die zugehörige URL führt zu einer 404 statt zur gewünschten Seite.

Der neue Beitrag hat – außer der Darstellung auf der Hauptseite – keinen Zugang z.B. über einen Menüpunkt.

Erst nachdem ich den Beitrag über einen Menüpunkt in einem Schattenmenü verlinkt habe, war der Fehler weg. Ich dachte, der Kunstgriff über das Schattenmenü wäre in der jetzigen Joomla-Version nicht mehr nötig?

Gibt es eine einfachere Möglichkeit als über ein Schattenmenü zu gehen?

Gerade hab ich OSMap free installiert und über einen Menüpunkt die HTML-Liste meiner Webseiten anzeigen lassen wollen. Wenn ich den Menüpunkt anklicke, erhalte ich eine 404-Seite.

Gehe ich im Backend auf das Editieren der von OSMap erstellten Sitemap, so sind alle Seiten-URLs dort richtig aufgeführt. Und natürlich ist die Sitemap "veröffentlicht".

Nun weiß ich nicht, wie ich den Fehler beheben kann. Denn was nicht angezeigt wird, kann ich schlecht untersuchen.

Aaaachhhh, das Leben kann doch auch mal so einfach sein!

Herzlichen Dank sag ich dir!

Von w3schools hatte ich ein responsive Design mit zwei gleich langen Spalten, die sich selbst anpassen. Das zugehörige CSS sieht so aus:

.column-cl {
      float: left;
      width: 100%;
      box-sizing: border-box;
    }
    
.right-cl {
    padding-right: 1.2em;
    }
    
.left-cl    {
    padding-left: 1.2em;
    }

    /* Clear floats after the columns */
.row-cl:after {
      content: "";
      display: table;
      clear: both;
    }

/* Oberhalb von 800px soll zweispaltig dargestellt werden */
@media screen and (min-width: 800px) {
  .column-cl {
    width: 50%;
      }
  }

Mit den beiden von mir zusätzlich eingeführten Klassen left-cl und right-cl will ich dafür sorgen, dass bei zweispaltiger Darstellung zwischen den beiden Spalten ein Abstand bleibt. Im HTML habe ich also beide Klassen für eine div-Spalte verwendet:

<div class="column-cl right-cl"> 
und für die zweite Spalte natürlich:
<div class="column-cl left-cl"> 

Jetzt habe ich mir damit aber das Problem eingehandelt, dass bei einspaltiger Darstellung immer der Text, der sonst die erste Spalte bildet, eine um die Einrückung kürzere Zeilenlänge hat und der Text, der sonst in der zweiten Spalte stehen würde, ist deutlich sichtbar nach rechts eingerückt.

Ich könnte natürlich für beide Spalten ein padding nach links und rechts verwenden. Dann aber ist der Text gegenüber den meistens nicht in Spalten stehenden Überschriften eingerückt. Und zudem würde unnötig Platz verschwendet, wenn der Beitrag auf einem kleinen Display gezeigt wird.

Gibt es in diesem Code-Beispiel eine Möglichkeit, statt zwei eben drei Spalten zu erzeugen, wobei dann die zweite Spalte leer bleiben würde und sehr schmal wäre, um den Abstand zwischen den Spalten eins und drei zu halten. Spalten 1 und 3 würden wie bisher den Text beinhalten.

Da die mittlere (Abstandshalter-)Spalte inhaltsleer bleibt, würde sie automatisch auf Null zusammen fallen, wenn der Text aufgrund der @media-Regel wieder einspaltig gezeigt werden soll.

So weit meine Überlegungen. Vielleicht gibt es noch einfachere Lösungen?

Jedenfalls reicht mein CSS-KnowHow nicht aus, hier eine Lösung zu finden und so würde ich mich über Lösungs-Ideen freuen.

Entscheidend ist das Zusammenspiel von Bildgrößen und dazu passenden @media Pixelwerten und das auch wieder abgestimmt auf die gesonderten @media-Regeln für die Umschaltung zwischen "mit Randspalte" und "ohne Randspalte".

Mit sehr viel Experiementieren und drei verschiedenen Bildgrößen mit vier @media-Konditionen sieht es jetzt ziemlich gut aus.

Allerdings darf kein Bild in einem zweispaltig angelegten Beitrag in einer der beiden Spalten stehen (also ein sehr schmales Bild) und dies soll dann auch noch sowohl dann funktionieren, wenn der main-content zusammen mit einer rechten Spalte steht als auch dann, wenn diese Spalte weg fällt. Die dann auftretenden Sprünge in den Bildbreiten lassen sich auch nicht mehr mit object-fit weg bekommen.

Nun brauche ich keine Anregungen mehr zu diesem Thema. Danke!

Ich habe das verflixte Problem, dass bei einspaltiger Darstellung des main-content die im Beitrag führenden Bilder viel zu groß werden, besonders die Höhe. Ich könnte z.B. bei der Aufnahme der Fotos schon darauf achten, dass links und rechts genug übrig bleibt, um auch Seitenverhältnisse von bis zu 1 : 4,3 verwirklichen zu können. Das ist aber bei vielen Motiven nicht immer machbar!

Ich könnte aber auch den Beitrag bei kleiner Screenwidth einspaltig zeigen und ab einer nächsten Breite zweispaltig und ab der darauf folgenden Breite wieder einspaltig, aber dann mit einer Haupt- und einer Seitenspalte in 2/3 zu 1/3 geteilt. Und wenn's noch breiter wird, den Beitrag wieder zweispaltig darstellen.

Dabei würde das Bild bei zweispaltiger Darstellung des Beitrags nur in einer Spalte erscheinen.

Wenn diese Unterteilung mit @media gelingen würde, benötige ich wahrscheinlich nur zwei verschiedene Seitenverhältnisse des gleichen Bildes und würde dennoch die Ladezeit und den Datentransfer für den Besucher gering halten.

Beispiele (ACHTUNG: reine Experimentier-Website)

Wie kriege ich das nun in mehreren @media-Regeln untergebracht? Oder muss ich für jede Darstellungsgröße eine eigene Klasse für das Bild definieren, die dann bei Nicht-Erfüllung der Bedingung @media auf display: none gesetzt wird?

Kleine Ergänzungsfrage: Ich könnte ja mit object-fit: cover arbeiten. Aber dann müsste ich ein relativ großes Bild (Ladezeiten) laden, damit bei kleinen Screenwidth der gewünschte Effekt eines Bildausschnitt wirksam wird.

Hab schon mit folgendem experimentiert:

.cover-cl {
    object-fit: cover;
    max-width: 100%;
    height: 230px;
    }

Sieht gut aus, wenn ein genügend großes Bild geladen wird UND wenn das Bild-Wichtige möglichst in der Bildmitte steht und nicht nach der Drittel-Regel weiter außen liegt.

Wähle ich die Bilder schon vorher mit der @media-Kondition so aus, dass nichts überflüssig Großes geladen wird, sieht's eher mickrig aus.