Beiträge von MrMurphy

    Hallo

    Zitat

    Ich muss die 2 Bilder und die Überschrift in div1 machen.

    Das ist die sinnvollste Lösung - wenn es denn unbedingt ein div sein soll.

    Allerdings ist dein Quelltext recht unstrukturiert und enthält sinnfreie Angaben. So willst du zum Beispiel ein Bild mit einer Höhe von 150px in ein div mit einer Höhe von 130px quetschen. Das kann nur Probleme geben.

    Ich tendiere zur folgenden Lösung:

    Gruss

    MrMurphy

    Hallo,

    Zitat

    es geht mir um das Verständnis

    Das scheint dein Problem zu sein.

    Zitat

    Je nach Breite des Bildschirms

    und

    Zitat

    z.B. 1024 hat die Hintergrundfarbe blau wenn die Seite gewechselt wird, 760 hat die Farbe Gelb.

    deuten darauf hin, dass du die Funktion vom Responsive Design mit Media Queries falsch verstanden hast.

    Es ist unmöglich für jedes Gerät bzw. für jede Pixelanzahl Webseiten zu erstellen. Smartphones haben heutzutage teilweise bereits höhere Pixeldichten als Desktop-Bildschirme. Zusätzlich muss die Webseite noch auf Hoch- und Querformat reagieren. Außerdem hat es sich als besucherfreundlich erwiesen wenn Webseiten nicht seitwärts gescrollt werden müssen.

    Deshalb hat es sich als praktikabel erwiesen, wenn Webseiten nicht nach Geräten oder Fensterbreiten erstellt werden, sondern auf ihren Inhalt reagieren. Dann entstehen viele deiner Probleme erst gar nicht.

    Mit einem Link zu deiner Seite kann dir das eventuell praktischer erläutert werden. Natürlich nur, wenn deine Seite auch bereits Inhalt enthält, auf den sie reagieren kann.

    Gruss

    MrMurphy

    Hallo

    dann zeig' mal den Quelltext (HTML und CSS) vor und nach den Änderungen.

    Entweder sind im Quelltext Fehler oder du verwendest Elemente, bei denen ein Zeilenumbruch ausnahmsweise die Darstellung im Browser beeinflußt.

    Oder der Beautifier ist Schrott.

    Gruss

    MrMurphy

    Hallo

    Deine Angaben sind leider nicht sehr aussagekräftig.

    Zitat

    wie kann ich sowas mit html/css machen?

    Dazu fehlen leider noch einige Angaben. Wie soll sich die Grafik bei hochkanten Fenstern verhalten, zum Beispiel bei Smartphones oder Tablets? Wenn sie das ganze Fenster ausfüllt wird der Papagei doch arg verzerrt.

    Zitat

    ich habe jetzt mal testweise dieses layout mit einem webtool erstellt

    Mit welchem Webtool? Nur als Grafik?

    Zitat

    stretcht der header nicht über die gesamte seite

    Du musst ihm 100% Breite geben und das padding und margin vom body auf 0 setzen. Hintergrund: Der Body wird von den Browsern standardmäßig mit etwas margin ausgeliefert. Die Vorgabe vom padding sollte zwar bereits 0 sein, aber es gibt Webtools die von sich aus padding vergeben.

    Natürlich darf der header sich auch nicht in weiteren Containern befinden, die weniger als 100% Breite haben.

    Zitat

    text soll auch unterm header durchscrollen

    Dann muss der header mittels "position: absolute" oder "position: fixed" aus dem Textfluss genommen werden und der restliche Inhalt benötigt einen Abstand nach oben (margin-top) in Höhe des headers.

    Zitat

    der hintergrund fix sein

    Meinst du das Bild mit dem Papageien? Das geschieht mittels CSS "background-position" und "background-attachment", siehe zum Beispiel

    http://wiki.selfhtml.org/wiki/CSS/Eigen…ben_und_-bilder

    Der Bitte meiner Vorschreiber Groß- und Kleinschreibung zu verwenden kann ich mich nur anschließen. Texte nur mit kleinen oder großen Buchstaben sind einfach schwerer zu lesen. Deshalb gilt das in Foren als unhöflich. Wie würdest du dich fühlen wenn du jemandem helfen willst und der dich unhöflich und arrogant behandelt?

    Gruss

    MrMurphy

    Hallo,

    deine hr-Elemente sich sachlich schlicht falsch. Sie sollten also gelöscht werden.

    In HTML5 haben alle Elemente, also auch das hr-Element, eine semantische Bedeutung und sollten deshalb nicht verwendet werden um zum Beispiel Abstände zu schaffen. Dafür ist das CSS zuständig, zum Beispiel mit dem margin-Attribut.

    Wenn du ein Framework wie Bootstrap (?) benutzt solltest du auch dessen Möglichkeiten nutzen und nicht mit Eigenkreationen herumpfuschen, speziell wenn dir offensichtlich das dafür notwendige Hintergrundwissen fehlt.

    Erst wenn die Möglichkeiten des Frameworks nicht mehr weiterhelfen sollte mittels eigenem CSS sanft und sachgerecht eingegriffen werden.

    Zitat

    Kannst du mir ein Tipp geben wie ich das anders umsetzen soll?

    Dem body die blaue Hintergrundfarbe geben und den anderen Elementen einen Abstand geben, wenn die blaue Hintergrundfarbe sichtbar sein soll.

    Gruss

    MrMurphy

    Hallo,

    Zitat

    klappt es ja auch...

    Dabei handelt es sich auch um p-Elemente, die zudem andere Anweisungen erhalten als dein select-Element.

    Ich kann auch nicht nachvollziehen, warum in einer Select-Box seitwärts gescrollt werden soll, zumal das benutzerunfreundlich ist.

    Dein Quelltext läßt leider auch keine eigenen Prüfungen zu. Wenn Quelltext, dann vollständig, ohne php-Angaben oder besser noch ein Link zu der Datei.

    Angaben wie

    HTML
    size="15"

    sollten zudem nicht mehr verwendet werden, sie gelten offiziell als veraltet.

    Zitat

    Da er sonst bei langen Zeilen den Text abschneidet

    Nein, nur wenn du die Voreinstellungen überschreibst. Die Voreinstellungen sind doch so, dass die Select-Box die Breite des breitesten Eintrags annimmt.

    Gruss

    MrMurphy

    Hallo

    dazu kannst du in der style.css die margin Angabe

    Code
    #wrap {
        ...
        margin: 0px;
    }

    durch

    Code
    #wrap {
        ...
        margin: 0 auto;
    }

    Insgesamt könntest du die benutzerfreundlichkeit aber steigern, indem du auf die Leerflächen verzichtest und statt dessen die Schriftgröße vergrößerst.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Da meiner Meinung nach alle 4 Eigenschaften Bilder einsparen...

    Das sehe ich genau so. Eigentlich ist keine der vier Antworten korrekt.

    Somit ist Frage auf jeden Fall nicht eindeutig lösbar.

    Wahrscheinlich sollen die Antworten transform und transition richtig sein.

    Einerseits haben die einige Eigenschaften, die (bewegte) Grafiken nicht bieten können. Andererseits wurden viele Effekte von transform und transition in gif- oder flash-Animationen dargestellt, wenn halt auch schlichter. Tatsache ist aber das sie bewegte Grafiken ersetzen und damit einsparen können.

    Gruss

    MrMurphy

    Hallo

    Zitat

    wäre das dann nicht eine lange Reihe nach unten auf einem Smartphone bis der eigentliche Inhalt kommt?

    Ich denke

    Zitat

    möchte ich eine neue Homepage

    dass du die Homepage erstellen willst? Dann bestimmst du die Anzahl der Seiten und ihren Inhalt. Damit kann sich das Problem überhaupt nicht stellen.

    Außer du bist süchtig nach einem Aufklappmenü und kannst nicht davon lassen.

    Wenn du wirklich viele Seiten benötigen solltest erstelle besser mehrere kleine Menüs die dann nur auf den relevanten Seiten auftauchen, dann aber auch dauerhaft sichtbar sind.

    Gruss

    MrMurphy

    Hallo

    Zitat

    umwandeln in Text

    Ja.

    Zitat

    gibt es andere gute Lösungen

    Nein. pdf und HTML basieren auf vollkommen unterschiedlichen Grundlagen. pdf-Seiten haben so zum Beispiel eine bestimmte Größe, HTML-Seiten sind jedoch im Prinzip unendlich groß und haben keine Grenzen.

    Zitat

    Sticky Footer - gibt es da brauchbare Ansätze?

    Es ist immer wieder lustig wie wichtig Sticky Footer genommen werden. Dabei sind sie ziemlich überflüssig. Seiten ohne Inhalt will eh' niemand lesen.

    Und ja, Flexbox bietet brauchbare Ansätze für Sticky Footer.

    Zitat

    Habe Bildergalerien bei denen ich min. 250 px breite habe (ist noch übernommen vom alten Design)

    480px. Es mögen noch vereinzelt einige mit weniger Breite herumschwirren, aber die haben dann in der Regel auch keine auch nur halbwegs brauchbaren Browser. Einspaltige Seiten mit weniger als 480px werden bei einem vernünftigen HTML-Grundgerüst im Regelfall auch auf schmaleren Viewpoints sinnvoll dargestellt.

    Gruss

    MrMurphy

    Hallo,

    als Hilfe kann ich dir nur mitteilen dass das Verhalten normal ist.

    Die Schriftarten benötigen JavaScript und das wird durch NoScript blockiert. Das musst du halt berücksichtigen und kannst noch ein, zwei Standardschriftarten im CSS angeben. Ob deine Besucher JavaScript blockiert haben kannst du schließlich nicht beeinflussen.

    Gruss

    MrMurphy