Beiträge von MrMurphy

Hallo

Die Änderung der Hintergrundfarbe funktioniert.

Nur befinden sich in dem Container weitere Container mit eigenen Hintergrundfarben, zum Beispiel .elea-eluanda-box-1. Dadurch ist die Hintergrundfarbe von .elea-eluanda nicht zu sehen.

Du musst also die Hintergrundfarben der inneren Container entfernen.

An den Stellen, die von keinen Containern überdeckt werden, ist die Hintergrundfarbe immer direkt sichtbar.

Gruss

MrMurphy

Hallo

So ein Verhalten wird mit JavaScript erzeugt. Wobei in diesem Fall die Grundlage wohl eher keine Tabelle (table-Element) ist.

Nur mit HTML und CSS ist so ein Verhalten nicht zu erzeugen.

Wahrscheinlich ist das JS-Programm auch speziell für die gezeigte Webseite erstellt worden und darf nicht einfach auf eigenen Webseiten verwendet werden.

Gruss

MrMurphy

Hallo

Zitat

Du willst mir sagen, die 3rem funktionieren nicht, weil woanders 0 steht?

Nein. Die 3rem funktionieren doch.

Eventuell hast du falsche Vorstellungen wie padding überhaupt funktioniert.

Das code-Element ist ein sogenanntes Inline-Element.

Dadurch wirkt sich padding nur zu Beginn der ersten Zeile des Elements und nur nach Ende der letzten Zeile des Elements aus.

Bei inline-Elementen wirkt sich padding weder auf den oberen noch auf den unteren Abstand aus.

Das padding wirkt auch nicht auf den Inhalt des Elements, also die einzelnen Worte.

Dein Beispiel ist auch schlecht zum Testen geeignet. Probier dein CSS mal bei folgendem html-Quelltext aus und spiel mit den Werten rum, dann sollte es deutlicher werden:

<p>Dies ist ein Text <code> code code code codecode codecode code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code codecode code  code code  code code  code code  code codecode code </code> mit einem eingebetteten code-Element.</p>

Gruss

MrMurphy

Hallo

Das von dir gezeigte padding funktioniert, da padding-top und padding-bottom 0rem betragen.

Wenn du padding-top und padding-bottom einen anderen (höheren) Wert geben willst musst du aus dem code-Element ein Block-Element machen.

Gruss

MrMurphy

Hallo Clapi

Du hast leider vollkommen falsche Vorstellungen wie Responsive Layout funktioniert, was es kann, was es nicht kann und auch nicht können muss.

Du musst dich von deinem 2-Stufen-Modell lösen. Wie schon geschrieben gibt es nicht den Unterschied zwischen mobiler und Desktop-Version. Aus dem Gefängnis musst du dich befreien. Das Responsive Design dient dazu auf jeder Bildschirmgröße, vollkommen unabhängig vom Gerät, eine möglichst benutzerfreundliche Darstellung zu erreichen. Und heutzutage gibt es unzählig viele Geräte mit unterschiedlichen Bildschirmgrößen und dazu noch unterschiedlichen Auflösungen - und "täglich" kommen neue hinzu. Das schöne ist, dass du dir bei einem richtig erstellten Responsive Layout keine Gedanken über neue Geräte machen musst - die Webseite funktioniert auch auf denen.

Mit deiner starren Unterscheidung von nur zwei Varianten bist du deshalb auf der Verliererstraße. Das kann schlicht nicht funktionieren. Dein Denkansatz ist also bereits falsch, den musst du ändern.

Es funktioniert nicht zunächst zwei, oder großzügig auch drei, Breakpoints ohne jeden Bezug zur Seite vorzugeben und danach die ganze Seite auszurichten.

Im Gegenteil muss zunächt die Seite mit Inhalt erstellt werden und dann wird geschaut, welche Elemente wann einen Breakpoint benötigen. Das ist im Endeffekt auch vom Arbeitsaufwand her viel vorteilhafter.

Gruss

MrMurphy

Hallo

Leider hast du nicht die IE-Version genannt.

Ich habe mir die Seiten im IE11 angeschaut.

Der hat Probleme bei der Darstellung der linken Box, nicht der rechten. Dort wird der Text mit jeweils einem Buchstaben in einer Zeile angezeigt.

Ursache ist, dass der IE11 Flexbox zwar gerne können will, aber nicht richtig kann. Ob das auch für neuere IE-Versionen gilt weiß ich leider nicht.

Flexbox kann und sollte auch mit dem IE11 verwendet werden, aber seine Eigenheiten müssen dabei berücksichtigt werden.

In diesem Fall ist es die Anweisung

display: inline-flex

im Zusammenhang mit der Kurzanweisung

flex: 1

Bei der Kurzschreibweise werden alle drei betroffenen Werte geändert, wobei der IE11 wohl bei der flex-basis andere Werte als die meisten anderen Browser setzt.

Außerdem wird die Anweisung

box-sizing: border-box

verwendet. Bei Flexbox verwendet der IE11 jedoch grundsätzlich das Standard-Box-Modell, also content-box. Das lässt sich leider auch nicht ändern oder anpassen.

Am sinnvollsten ist wohl statt display: inline-flex zunächst display: flex zu verwenden. Wenn es dann noch Probleme gibt müssen eventuell noch die Kurzschreibweise und das Box-Modell angepasst werden.

Laut Inspektor befindet sich die Anweisung display: inline-flex in der Klasse .podcasteinzel in der Datei autoptimize_3de19db6eedb6f39ec147386d9b68249.css

Gruss

MrMurphy

Hallo

Zitat

Vielleicht ist ein Plugin dafür verantwortlich.
Deaktiviere mal der Reihe nach alle Plugins und schau, ob sich was ändert.

Nein. Das Problem ist der fehlerhafte Quelltext, siehe

https://validator.w3.org/nu/?doc=http%3A%2F%2Fkasimira.de%2F

Hinweis: Der Validator steigt in Zeile 263 aus, es werden also nur die ersten Fehler angezeigt. Die Masse der Fehler fehlt deshalb noch.

Unter anderem folgen wohl auch noch Container (zum Beispiel div) die geschlossen werden obwohl sie nicht geöffnet sind.

Die Browser sind gehalten Webseiten auch bei fehlerhaftem Quelltext möglichst noch anzuzeigen.

Da die mögliche Ursache von Fehlern gegen Unendlich tendiert kann die Behandlung von Fehlern nicht vorgegeben werden. Jeder Browser kann deshalb nur versuchen Fehler im Quelltext nach seinen eigenen Regeln zu korrigieren.

In diesem Fall fügen einige Browser halt das b-Element ein. Sowas kann nur durch einen sauberen, fehlerfreien Quelltext vermieden werden.

Gruss

MrMurphy

Hallo

Das sollte möglich sein.

Zunächst musst du die passende CSS-Datei finden. Laut meinem Browser ist das

http://sackkarrekaufen.com/wp-content/themes/brickyard/style.css?ver=4.6.1

Ziemlich in der Mitte findet sich der Eintrag

.entry-headline-text {
  background: white;
  display: inline-block;  
  max-width: 90%;
  padding-right: 15px;                     
}

Den kannst du erweitern zu

.entry-headline-text {
  background: white;
  color: #bf790f;
  font-family: arial, sans-serif;
  display: inline-block;  
  max-width: 90%;
  padding-right: 15px;                     
}

Wobei die Schriftart bereits Arial ist, font-family kann also aktuell auch entfallen.

Gruss

MrMurphy

Hallo

Deine Problembeschreibung ist leider nicht eindeutig.

Bei mir skaliert das header-Bild weder im FF noch im IE11.

Die Ursache ist wohl das float des umgebenden Containers, welches nicht gecleart wird.

Durch float werden Elemente aus dem Dokumentenfluß genommen und müssen durch ein passendes clear wieder "eingefangen" werden. Alter Merksatz: "Kein float ohne clear".

Da das float an dieser Stelle unnötig ist sollte es komplett entfernt werden, das ist die sauberste Lösung.

Ansonsten sollte ein sogenannter clearfix verwendet werden. Das ist natürlich nicht so gut: Erst wird ein Fehler eingebaut und dann wieder korrigiert.

Infos zu float / clear finden sich massenhaft mit der Suchmaschine deiner Wahl, zum Beispiel

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Im übrigen zeigen der FF und der IE11 die Seite korrekt an. Die von dir gewünschte Anzeige in den anderen Browsern erfolgt nur, weil die Korrekturen durchführen, die eigentlich nicht vorgesehen sind.

Gruss

MrMurphy

Hallo

Wie SirEctor bereits schrieb:

Zitat

Man müsste sich das mal live ansehen können. Anhand eines Bildes bekommt man weder HTML noch CSS.

So können wir nur raten und dir allgemeine Tips geben.

Meine Vermutung: Du hast Probleme mit den Collapsing Margins, siehe zum Beispiel

https://wiki.selfhtml.org/wiki/CSS/Box-Modell

Gruss

MrMurphy

Hallo

Unsinnige Bezeichnungen erschweren die Hilfe. Eine Klasse mit der Bezeichnung flexbox und dem Inhalt display:table mag zwar sachlich korrekt sein, in der Praxis erschweren sie jedoch die Übersicht.

Zum Verständnis: Es geht um diese Container?

<div class="flexbox">
   <div class="flexbox__item flexbox__item--logo">
   </div>
   <div class="flexbox__item flexbox__item--menus">
   </div>
</div>

Ich werde sie zur besseren Übersicht im Weiteren so bezeichnen:

<div class="flexbox">
   <div class="logo">
   </div>
   <div class="menus">
   </div>
</div>

Kurz: flexbox, logo und menus

Problem:

a) logo und menus sollen übereinander plaziert werden
b) der Inhalt von logo und menus soll zentriert werden

Das sind zwei Probleme, die nichts miteinander zu tun haben. b) bekommst du wahrscheinlich selber hin, ansonsten bitte noch einmal nachfragen. Ich beschäftige mich zunächst mit a).

Dazu sollten grundsätzlich Breitenangaben (width, max-width, min-width) sowie äußere Abstände (margin) von flexbox, logo und menus entfernt werden.

Du hast es zunächst mit display-table ausprobiert. Das ist eine Möglichkeit. Statt display:table-cell für logo und menus müsstest du dann aber display: table-row verwenden.

Also

.flexbox {
         display: table;
      }
      .logo {
         display: table-row;
      }
      .menus {
         display: table-row;
      }

Diese Lösung verhält sich dann aber auch wie eine HTML-Tabelle - mit allen Nachteilen.

Mit Flexbox gibt es zwei Lösungsmöglichkeiten.

Zunächst

.flexbox {
         display: flex;
         flex-direction: column;
      }
      .logo {
      }
      .menus {
      }

Mehr braucht es nicht. Schöne neue Flexboxwelt.

logo und menus brauchen keine Angaben. Zur Erinnerung: Ich gehe davon aus dass alle Breiten- und Abstandsbeschränkungen gelöscht wurden.

Oder

.flexbox {
         display: flex;
         flex-wrap: wrap;
      }
      .logo {
         flex: 1 1 100%;
      }
      .menus {
         flex: 1 1 100%;
      }

Zum Schluß sollte noch darauf hingewiesen werden, das logo und menus Blockelemente sind, die von Haus aus untereinander stehen. Meine Lösungen korrigieren also nur eigentlich überflüssig oder falsch angewandte CSS-Anweisungen. Sauberer wäre es diese zu suchen und zu löschen. Dass das grade bei Fremdlayouts nicht immer möglich ist, ist mir bewußt. Meiner Ansicht nach gehört dieser Hinweis aber zu einer seriösen Antwort.

Gruss

MrMurphy