Beiträge von Sailor56

    header.php ist der richtige Ort... und zwar direkt hinter dem '<header id="masterhead"....> Tag.
    Dann müsstest du noch deine Formatierung mit der Einfügung der Hintergrundgrafik (siehe dein erster Post) entfernen... am besten auskommentieren.
    im php durch:
    /* .. auskommentierter Inhalt.. */
    im html durch
    <!-- .. auskommentierter Inhalt.. -->
    löschen würde ich es nicht, denn das ist eine Rückfallposition, die man vielleicht irgendwann mal wieder braucht.
    Die Formatanweisung mit dem
    .site-header {
    padding: 0px !important;
    }
    gehört dann natürlich in das Custom CSS.

    Du solltest, falls du es nicht noch nicht gemacht hast, dir ein 'Child-Theme' anlegen und die Änderungen dort durchführen, denn sonst kann es dir passieren, dass mit dem nächsten Update deines Themes alles wieder auf Anfang gesetzt wird... das Child-Theme würde aber erhalten bleiben.

    Ich habe das jetzt mal getestet (mit FireFox 'Inspektor')!
    Was habe ich gemacht?
    1. IMG Tag in
    <header id="masterhead" class="site-header"...>
    <img src="http://neu.lessing-gymnasium.eu/wp-content/upl…ader3d_1920.jpg" style="width: 100%; margin-bottom: -5px;">
    ...
    </header>

    2. Custom CSS für class="site-header" padding auf 0px gesetzt:
    .site-header {
    padding: 0px !important;
    }

    und so sieht es dann bei mir mit dem FireFox aus:
    280 Pixel breit (Handy)

    680 Pixel breit (noch Handy - fast Tablet)

    1024 Pixel breit (Standard VGA)

    1600 Pixel breit (Desktop / Laptop) sieht genau so gut aus - kann aber hier leider nur jeweils 3 Bilder hochladen.

    Ahhhh.... jetzt kommen wir der Sache näher. Ich sehe, was das Problem ist.
    Das Bild hat vorgegebene Proportionen in Höhe und Breite - ebenso hat dein Header Proportionen, die allerdings variabel sind. Zumindest die Breite richtet sich immer nach der Bildschirmauflösung.
    Solange die Proportionen von Bild und Bildschirm passen, sieht es gut aus, aber in dem Moment, wo (wie in deinem Fall) der Platz in der Breite nicht ausreicht, fängt die Webseite/ der Browser an es zu korrigieren... na ja, er versucht sein Bestes.
    Folgende Idee: Mit dem jetzigen Layout als Hintergrundbild im Header werden wir das Problem so leicht nicht lösen können - aber, wäre es möglich das Bild als <img..> in den Header einzufügen.
    Dem Bild kann man einen 'width: 100%;' geben und dem Header müsste man alles Größenangaben (auch 'padding') wegnehmen. Seine Größe richtet sich dann nach dem Inhalt (dem Bild).
    Hätte den Nachteil, dass die Höhe deines Headers dann nicht mehr fixed ist - aber das Bild sollte immer vollständig zu sehen sein.

    Sorry, aber dann ist irgendetwas anders bei dir nicht richtig!
    Mit 'background-size: cover;' sieht das bei mir so aus:

    Oder wie soll es aussehen?

    PS: das ist die Ansicht mit FireFox Webentwickler Tool 'Inspektor'. Im unteren Bereich links (blau hinterlegt) das gewählte Element - im unteren Bereich rechts das dazugehörige CSS.
    Kann man da auch direkt zum testen ändern und schauen, wie es sich auswirkt.

    Das liegt daran, dass das Bild nicht als <img...> eingefügt ist, sondern als Hintergrundbild im <header id="masterhead"....>.
    Das Bild belegt als keinen Platz, sondern seine angezeigte Größe richtet sich nach dem ihm vom Elternelement angebotenen Raum.
    Der Header (id=masterhead) hat jedoch außer einem padding= 20px 0px; keine weiteren 'Raumangebote' für das Hintergrundbild - es bleibt bei einer Höhe von 2*20px!
    Mach das Padding größer - also insgesamt die Bildhöhe - dann sollte es gehen!

    Von der Wirkungsweise ist es eigentlich egal, ob nun Custom CSS oder Child Theme. Der Unterschied besteht darin, dass das Custom CSS im Quellcode der ausgelieferten HTML Seite direkt in einer Style Definition ausgegeben wird... also sichtbar im Quelltext steht.. und das Child Theme als externe Datei zur Verfügung steht und eingelesen wird.

    Beides ist aber richtig und auch sicher vor Änderungen, die sich durch Updates am Theme ergeben könnten.
    Ich persönlich würde aber die Variante mit dem Child Theme bevorzugen - das ist aber mehr ein Bauchgefühl

    Auch mit einem Mac solltest du in der Lage sein mit dem vorhandenen Browser - Safari denke ich - deine Seite und deren Layout zu analysieren.
    Schau doch mal, ob dir das weiter hilft:

    https://developer.apple.com/safari/tools/

    Dass sich durch die Änderung der Breite der div-Container auch Änderungen am Inhalt dieser Container ergeben, ist nicht ungewöhnlich. Oft sind dort im CSS Angaben enthalten, die in % des Elternelementes angegeben sind - Beispiel: div Container mit 1000px Breite - darin 2 div Container mit 52% bzw 38% des verfügbaren Platzes (1000px) und darin dann Bilder, die jeweils 100% des verfügbaren Platzes zugewiesen bekommen. Und genau das scheint bei dir der Fall zu sein - deine Bilder sind offensichtlich mit width: 100%; ausgezeichnet. Ja - dann nehmen die sich auch den Platz.

    Aber auch hier kann man natürlich mit CSS eingreifen und zB mit max-width: 535px; eine Maximalgröße vorgeben. Man muss dann nur dieses Element sehr genau ansprechen können, denn du willst ja nicht alle Bilder so auszeichnen, sondern nur die im Container #primary und dort dann nur die, die sich in einem div mit der Klasse .post-thumbnail befinden.
    Dann wäre eine Angabe

    #primary .post-thumbnal img {max-width: 535px;}

    vielleicht zielführend. Aber das musst du ausprobieren und immer beachten, dass Änderungen an einer Stelle auch Einfluss auf andere Elemente haben können.
    Und da diese Beitragsbilder als Hyperlink ausgebracht sind, öffnet sich beim Anklicken eine neue Seite - und da werden die Karten neu gemischt. Den HTML Code und das CSS, dass dort die Darstellung bestimmt, musst du erneut betrachten.

    Das liegt daran, dass die beiden Elemente ('.has-sidebar #primary' und '.has-sidebar #secondary') den verfügbaren Platz... jetzt 1500px... untereinander aufteilen!
    #primary ist definiert mit 58%
    #secondary ist definiert mit 32%
    Auch diese Parameter kannst du im Custom CSS anpassen.

    Am Besten du kannst du so was erkennen und testen mit den Tools, die die meisten Browser eingebaut haben - zB der Inspektor (unter 'Extras' -> 'Web-Entwickler') beim Mozilla FireFox!
    siehe anhängende Bilder.

    Die Breite des unteren Bereiches wird durch das Element '<div class="wrap">....</div> bestimmt.

    Für diese Klasse (.wrap) ist in der styles.css eine maximale Breite von 1000px (.wrap {max-width: 1000px;}) vorgegeben.

    Diesen Wert kannst du in einem Child Theme oder auch im Custom CSS nach deinen Bedürfnissen ändern!

    So ganz klar ist mir nicht, was du mit der Beschreibung ...'versuche ich das logo bild im gesamten head anzuzeigen'... und ... 'immer einen dicken Rahmen um das bild habe ein padding oder so'... meinst.

    Auf der Seite sehe ich einen head-Bereich (#masterhead .site-header) - für '.site-header' ist das Hintergrundbild 'cropped-Kopfstreifen.jpg' festgelegt! Das Bild wird jedoch nicht dargestellt, da es möglicherweise von anderen Elementen Überdeckt wird.

    Dann sehe ich an der oberen Begrenzung des 'headers' ein farblich abgesetztes 'nav' (#top-navigation .top-navigation / background-color: rgba(255, 255, 255, 0.15)).
    An der unteren Begrenzung des 'headers' ein farblich abgesetztes 'nav' (#site-navigation .main-navigation / background-color: rgba(255, 255, 255, 0.15)).

    Ist das der 'dicke Rahmen', den du angesprochen hast? Dann müsstest du hier den color-Wert anpassen. Ggf. auf transparent und für diese beiden Elemente den border-Wert auf 0 setzen.

    Zwischen diesen beiden Elementen sehe ich dann ein 'div' (.container), dass jetzt mit einem Hintergrundbild 'Kopfstreifen.png' versehen ist, welches auch auf der Seite angezeigt wird.

    Die Hintergrundfarbe des gesamten Bereiches ist, so wie ich das sehe, mit der .site-header festgelegt. Die anderslautenden Farbangaben in den 'nav-Containern' könnten vielleicht dein Problem sein.

    Habe gerade nochmal näher auf dein Problem geschaut! Es ist sogar noch etwas komplizierter, denn nicht nur der IFrame, sondern auch das darüber liegende Bild befinden sich innerhalb des <p>...</p>.
    Hier mal ein Screenshot, wie das mit dem FireFox Inspector aussieht.
    Dieser blau hinterlegte Bereich im oberen Teil markiert die Ausdehnung des <p> Elementes, dass im unteren Code-Teil markiert ist!

    Das ist das, was dir Wordpress 'vorgaukelt' - du siehst sie nicht in der Textansicht, aber sie sind da. Werden automatisch von Wordpress gesetzt.
    Was du aber versuchen solltest, ist Wordpress zu überlisten und ein <p class="irgendein_name"><iframe....></iframe></p> in deine Textansicht des Dokumentes zu schreiben.
    Das sollte Wordpress dann auch so übernehmen und nicht noch zusätzlich irgendwelche HTML Codes in dein Dokument schmuggeln.
    Mit dem zugewiesenen Klassennamen kannst du dann mit CSS gezielt dieses <p>-Element ansprechen und formatieren.


    Nachtrag:
    Es wäre vielleicht sogar sinnvoller, statt des <p>-Elementes ein <div>- Element zu nutzen. also so..

    <div class="irgendein_name"><iframe....></iframe></div>

    Du hast deinen ersten Iframe innerhalb eines <p><iframe..></iframe></p> platziert. das <p> beansprucht 100% der Breite und verhindert, so wie ich es einschätze, jeglichen Versuch irgendwas neben das erste Iframe zu positionieren.
    Versuche mal diesem <p> eine Klasse zuzuteilen (zb <p class="wetterframe">)
    Diese Klasse solltest du dann eine Breite passend zum Iframe geben, das Attribut float: left; und margin ganz nach deinen Bedürfnissen.
    Der folgende Iframe muss dann auch mit float: left; positioniert werden - sonstiges wieder nach deinen Bedürfnissen
    Und nicht vergessen... nach dem Frame das float durch clear: all wieder aufzuheben.