Beiträge von Sailor

    Vor langer Zeit habe ich mal gelernt, dass Zeilenumbrüche und mehrfache Leerzeichen im Quelltext vom Browser ignoriert und nicht dargestellt werden. Das hat sich wohl mit HTML 5 geändert(?).

    Jetzt, wenn ich im Quelltext einen Zeilenumbruch einfüge (wegen der besseren Lesbarkeit), wird im Browser ein 'Textknoten, der nur Leerraum enthält' eingefügt. Das wäre ja nicht so schlimm, aber dieser Textknoten ist 4x17px groß. man könnte zwar bei Bedarf die so entstehende 'Lücke' durch ein negatives Margin schließen... aber gibt es da nicht irgendein cleveres Stückchen CSS Code, das dem Browser sagt, er soll diesen Unsinn mit den Textknoten erst gar nicht machen?


    Immer alle Elemente, die man durchgehend dargestellt haben möchte in eine Codezeile schreiben, ist auch keine wirkliche Lösung.


    Das gleiche Verhalten tritt auch bei andern Elementen - zB bei aufeinander folgenden Bildern auf.

    Hier auf dem Bild ist der Effekt gut zu erkennen

    textknoten.jpg


    Zum spielen auch der zugehörige Quellcode im Fiddle...

    https://jsfiddle.net/nvc71Ljg/


    Hat jemand eine Idee - Lösung - Vorschlag?

    Ohne deinen Code (HTML und CSS) zu sehen, ist das schlecht zu beantworten - aber wenn ich es richtig verstehe, dann willst du das Bild bei jeder Auflösung zentriert und nur bis zu einer maximalen, festgelegten Größe angezeigt haben.

    Dann teste mal so ein Setup...

    Was verstehst du unter 'flex Layout'?

    Nun ja... beinahe ;)!

    Du nutzt 'onscroll' um deine deine Funktion aufzurufen - dann wird auch nur der Teil ausgeführt, der sich innerhalb der Funktion ( im Bereich der {} ) befindet.

    Versuche mal, deinen gesamten Script-Code innerhalb der window.onscroll = function () {...} unterzubringen.

    Dann hast du if(w > 768 && h > 1024 >) als Abfrage. da ist die letzte spitze Klammer zuviel - und ist es das, was du willst WENN die Breite größer 768px UND die Höhe größer 1024px??

    Um ein kleines, mobiles Display zu erkennen, würde da nicht if( w < 768 && h < 800 ) (Werte natürlich nach deinen Vorstellungen) eher zum Ziel führen?

    Die Methode, die Style Attribute zuweist, ist vielleicht auch etwas unglücklich - und warum setzt du in der else Anweisung nur die Position zurück?

    Zunächst mal sehe ich, dass du sehr viele Elemente mit overflow: hidden; formatiert hast... dann hast du auch die Funktion scrollen ausgeschaltet. Hinzu kommt, dass du mit festen Größen (in Pixeln) bei der Größenfestlegung deines Logo's arbeitest.

    Das ist nicht responsive - auch wenn du da mit mehreren Mediaqueries versuchst, das anzupassen. Auf der Startseite ist das Bild zB zu groß (in der Höhe) und schiebt damit den Container mit den Social-Media Buttons nach unten über den Bildschirmrand hinaus---- und dann führtoverflow: hidden; dazu, dass du nicht nicht nach unten scrollen kannst.

    Könnte sein, dass es ganz einfach an der Defaulteinstellung vom CSS liegt - da werden Bilder mit 'verical-align: baseline;' formatiert. Baseline ist aber eben nicht unten, sondern erzeugt einen wenige Pixel großen Abstand nach unten.

    Versuche es mal mit vertical-align: top; ... oder vertical-align: bottom;

    Die Browser-Konsole zeigt mir Fehler in den Dateien 'compiled.js' und '2kaumw.js' an. Und wenn ich das richtig sehe, sind diese beiden Dateien mit irgendeinem Komprimierungstool bearbeitet worden.

    Versuche mal die Dateien ohne diese Komprimierung einzubinden - oft kommen solche Fehler durch fehlerhafte Komprimierung zustande.

    In beinahe allen Foren sind Crosspostings nicht erlaubt (siehe dazu die Forenregeln, denen du ja mit deiner Anmeldung zugestimmt hast).

    Aber Crossposting hin und her - das bringt dich nicht weiter! Gib uns den kompletten Code (besser noch einen Link zur Seite) und dein Problem wird gelöst werden... Rätselraten mag hier keiner.

    <div> <img src="https:///s/files/1/0262/3445/4119/files/FRAU-01.png?802" align="left" height="42" width="42"> <p style="margin-left: 47px; height: 0; padding: 10px;"> <font size="2"> Products are tested and approved by Susan </font></b> </p ></</div><br>

    Das ist ein seltsames, veraltetes und fehlerhaftes Stück Code... vielleicht, wenn du es korrekt schreibst, ist dein Problem behoben.

    Code
    1. <div>
    2. <img src="https:///s/files/1/0262/3445/4119/files/FRAU-01.png?802" style="height: 42px; width: 42px; border: 0;" align="left" alt="">
    3. <p style="margin-left: 47px; height: 0; padding: 10px; font-size: 1.2em;">
    4. Products are tested and approved by Susan
    5. </p>
    6. </div>
    7. <br>

    Natürlich gibt es so was - erkläre nur ganz genau was du vor hast, dann wirst du hier bestimmt ein paar Antworten und Tipps zur Lösung bekommen.

    Was verstehst du unter 'Boxen'?

    Was ist 'Bilder usw.'?

    Was ist 'so ein ähnliches Popup-Fenster'?

    Das musst du schon näher kund tun und am besten auch schon einen Code-Entwurf von dem haben, was du versucht hast, beifügen.

    Oh nein... jetzt zum mitschreiben ;)

    Im CSS...

    im HTML...

    Code
    1. <div class="Headerbild"><img src="images/Headerbild.png" alt="ein Bild"></div>

    Na ja... fast...!

    Das hast du im Code!

    Code
    1. <div style="padding-left:16px"></div>
    2. <div>
    3. <img src="images/Headerbild.png" alt="Bild">
    4. </div>

    Wo ist da die Klasse .Headerbild, die du im CSS für das Div mit dem Bild definiert hast? Außerdem .. das .div .Headerbild geht gar nicht! Eine Klasse .div gibt es nicht!!!

    Also 1. das leere Div löschen... 2. dem Div mit mit dem Bild die Klasse Headerbild geben... 3. dem Bild eine Klasse geben und die mit width: 100%; im CSS formatieren.

    Warum zeichnest du dein Dokument mit dem HTML 5 Doctype aus und nutzt dann in der Folge XHTML Elemente?

    Besser / empfehlenswerter wäre utf-8 als Charset - und dann gleich HTML 5 konform einbinden mit <meta charset="utf-8"> .

    Dir fehlt im <head> das <meta name=viewport content="width=device-width, initial-scale=1">, womit Anzeigefehler bei mobilen Endgeräten vermieden werden.

    Absolute Größenangaben in Pixel sind kaum responsive - das solltest du anders lösen (zB mit % oder vw)

    Dein Bild möchtest du in das leere <div> einfügen?

    Dann mach dieses <div> genau so groß, wie dein .topnav und das dann nach Möglichkeit responsive. So vielleicht...

    Dann kannst du das Bild mit <img....> in das Div einfügen und mit width: 100%; formatieren.

    Wenn du das Bild unter die Navigation haben möchtest, dann mal nach "css background image" googlen.

    Ansonsten, wenn du mehr Hilfe zu dem Thema brauchst, dann musst du uns schon einen Link zu der Seite geben - oder wenigstens den Code (HTML und CSS) hier posten.