Beiträge von Sailor

    Der erste und vielleicht entscheidende Fehler ist, dass du wahrscheinlich eine steinalte Version von WordPress verwendest - oder du einen heftigen Fehler beim Erstellen des eigenen Themes gemacht hast.

    Der <!DOCTYPE... den du da verwendest (HTML 4.01 strict) ist schon lange nicht mehr aktuell... das HTML, dass du dann im Code verwendest, passt teilweise nicht zum DOCTYPE.

    Du solltest als erstes die Seite auf HTML5 umstellen, dann sind wahrscheinlich die meisten Fehler schon behoben.

    Hmmm... da hast du dir ein etwas seltsames Layout für deine Seite gebastelt.


    Und das was dein div mit der ID main da macht, hast du genau so ins CSS geschrieben


    sei 590 Pixel breit - width: 590px;

    schwimme an der rechten Seite - float: right; (das ist der größte Fehler den du machen kannst!)

    halte vom rechten Rand einen Abstand von 56,3 % - right: 56,3%;


    ja... das macht das Div dann.


    Aber mal nebenbei, wie soll das eigentlich aussehen, wenn es fertig ist? Noch sehe ich da nicht, was du mit deinem Layout erreichen willst.


    Und du solltest dir mal die Fehlermeldungen anschauen, die deine Seite im Validator produziert.


    https://validator.w3.org/check…29&doctype=Inline&group=0

    das mit einem script in js zu bewerkstelligen,

    das wäre möglich, aber damit hättest du die gleichen ungelösten Probleme, wie mit deinem jetzigen Ansatz.

    Außerdem - was man mit CSS erledigen kann, sollte man auch mit CSS machen.

    Und was machen Nutzer, die JavaScript deaktiviert haben?

    Margin:... bringt im Endeffekt ja dass gleiche Ergebnis, nutzt mir also da leider auch nichts.

    Das ist so nicht richtig! Mit dem 'width' Ansatz wird der Inhalt des divs (wenn der Flügel eingeklappt ist) lediglich gestaucht.. als zusammen gequetscht! Hast du das mal mit Inhalt in deinen divs probiert.

    Mit der margin Lösung wird der div (mit Inhalt) nach außen... aus dem Sichtbereich geschoben und kommt beim hover, so wie er angelegt ist, in den Sichtbereich geschwebt.

    Deine Idee ist kann so nicht funktionieren.

    Deine div's 'MailErgebnisse' und 'OptiErgebnisse' haben keine Breite... belegen damit auch keinen Platz.

    Der rechte Flügel funktioniert nur deswegen, weil dort (standardmäßig) das <p>...</p> sich links anordnet - so wie im linken Flügel auch, nur dass links eben links vom <p> nur ein leerer Container ohne Inhalt ist... na ja, wäre, wenn du die Reihenfolge im Quellcode änderst, so dass zuerst das <div> und dann das <p> kommt.


    Es wird aber trotzdem scheitern, weil in dem Augenblick, indem du deinen beiden Containern Inhalt hinzufügst, das Ganze Layout zerschossen wird... teste das mal, dann siehst du was ich meine.


    Du solltest überlegen, ob du diesen 'Einfliegeeffekt' der Flügel statt mit 'width' nicht besser durch 'margin-left: -xxx; bzw 'margin-right: -xxx; umsetzt.

    1. Der eingefügte Link funktioniert nicht... da fehlt das '.html' am Ende.

    2. Womit ist dieser Code erstellt - erinnert mich irgendwie an etwas, was von MS-Word / MS-Office erstellt wurde.

    3. Die verwendete HTML Version ist total veraltet, du solltest vielleicht HTML 5 nutzen, um deine Seite aufzubauen

    4. So viele Fehler findet man nur selten.... https://validator.w3.org/nu/?d…gel.de%2Fnachrichten.html

    5. Am HTML Quellcode kann man nicht erkennen, warum das nicht funktioniert - man muss den PHP Code der Seite sehen, auf der die Verarbeitung der Formulardaten stattfindet und von der aus die Mail versendet werden soll.

    Ein Element, das mit Position fixed positioniert ist, kann nicht in einem Elternelement sein... es ist nirgendwo drin... es ist komplett aus dem 'Textfluss' herausgenommen. Es ist fixiert da, wo du es eingefügt hast.

    Und wenn du da bei einzelnen Browsern Probleme mit der Darstellung hast, dann solltest du uns einen Link zur Seite... oder den Quellcode (HTML CSS) zeigen, damit wir uns das anschauen können.

    Du solltest die Formatanweisungen nicht in den Iframe-Tag schreiben, sondern in ein Stylesheet... so wie alle anderen CSS Formatierungen auch.

    Ich vermute, dass bei dir der starre Wert '600' für die Höhe des Frames Probleme macht - versuche das mal zu ersetzen durch

    Code
    height: 600px;
    max-height: 100vh;

    .. wohlgemerkt... in einem Stylesheet - oder zumindest in einem style="...." innerhalb des Iframe -Tags.

    Ungetestet ... aber einen Versuch wert.

    Füge zunächst ein Platzhalterbild (zB ein leeres .gif) an die Stelle ein, an der dein großes gif erscheinen soll und gib mittels CSS diesem Bild die Dimensionen, die das große gif hat. Gib diesem Platzhalter eine ID und zum Schluss, am Ende deines Codes fügst du ein JavaScript ein

    <script>document.getElementById('meinBild').src='das_richtige_bild.gif';</script>

    Sorry... aber das ist nur die Hälfte dessen, was jemand braucht, der dir helfen will!

    Was steht in deiner 'stylesheet/style.css' ... nichts? Ohne zu sehen, wie die anderen Elemente formatiert sind, kann man kaum was sagen.

    Aber ist jetzt auch egal.. du schreibst...

    Der Footer bleibt immer noch oben am Seitenende der nicht-scrollbaren Seite.

    Ja.. das soll wohl so sein. er bleibt da, wo du ihn im Textfluss eingefügt hast - am Ende der Seite. Und wenn das Ende der Seite früher ist, als das Ende des Bildschirms, was ja bei nicht scrollbaren Seiten eigentlich die Regel ist, dann wird der Footer auch da angezeigt, wo der Code zu Ende ist.


    Schau mal in Betrag #3... da habe ich das schon mal nachgefragt und dir auch dafür schon alternativen Möglichkeiten genannt.

    Nur was du jetzt genau erreichen willst, ist mir weiterhin unklar... wo soll der Footer sein (scrollbar / nicht scrollbar) ... soll er mitscrollen oder immer sichtbar am unteren Bildschirmrand sein... oder irgendwas anderes?


    Die Qualität der Antworten hängt immer auch von der Qualität der Frage ab...


    Bevor ich es vergesse. In deinem HTML Quellcode, hast du ein <style>body... </style> inmitten des "body's"! Das gehört da nicht hin - das muss in den <head>... </head>.

    Wie soll sich der Footer denn verhalten?

    Immer sichtbar am 'Fuß' der Seite?

    Dann müsstest du mit 'position: fixed;' arbeiten

    Code
    #footer {
    ...
       position: fixed;
       left: 0px;
       bottom: 0px;
       right: 0px;
    ...
    }

    Soll der Footer unten auf der Seite sein... also unterhalb des restlichen Codes und erst dann sichtbar sein, wenn man nach unten scrolled?

    Dann solltest du 'position: relative;' oder 'position: static;' verwenden.


    Ggf. solltest du dir überlegen, das Layout der Seite mit Flex-Box zu realisieren und den Footer als Flex-Item anzulegen.


    Frage:

    Warum hast du mache Formatierungen (zB position und bottom) doppelt in deinem CSS. Einmal reicht und vermeidet Fehler.