Beiträge von MrMurphy

  • Probleme mit responsivem Design

    Hallo,

    zunächst solltest du bei HTML das "Best Practice" berücksichtigen. Das benötigst du um überhaupt die Grundlagen für ein Responisve Design zu erstellen.

    So sollten zum Beispiel a-Elemente sich immer in geeigneten Containern wie p, h1 bis h6, li u.s.w. befinden.

    Weiterhin solltest du grundsätzlich auf "position: absolute" verzichten. Das beißt sich in der Regel mit Responsive Design.

    Zitat

    Ich habe den Code beim responsiven Teil für @media (max-width: 900px) und @media (max-width: 480px) geschrieben.

    Die Vorgehensweise ist falsch und führt genau zu den Problemen, mit denen du dich grade rumschlägst.

    Die Breakpunkte des Responsive Design hängen nicht von Bildschirm- oder Fenstergrößen, sondern vom Inhalt ab. Danach musst du sie also ausrichten. Sich von vornherein auf bestimmte Breiten wie 900px oder 480px festzulegen ist schlicht falsch. Sowas wird leider immer noch von Leuten verbreitet, die das Responsive Design nicht verstanden haben oder gar noch am Papierlayout festhängen.

    Gruss

    MrMurphy

  • Div wird nicht automatisch so lange wie Text div

    Hallo,

    freundlich gesagt hast du die Seite sehr individuell erstellt. Du hast viele bewährte Vorgehensweisen zur Erstellung von Webseiten schlicht ignoriert. Deshalb sind nachträgliche Korrekturen nur schwer durchzuführen. Zudem wird fast jede Korrektur neue Probleme schaffen.

    Als Denkanstoß:

    Das div#impress befindet sich innerhalb des div#text01. Das div#text01 hast du mit der CSS-Anweisung "position: absolute" aus dem Textfluß herausgenommen, wie es so schön heißt. Der Effekt ist, das das div#text01 keine Beziehung zu den umgebenden div mehr hat, also auch nicht zum div#wrapper. Das div#wrapper kann also nicht mehr auf die Größenänderungen des div#text01 und seines Inhalts reagieren.

    Du must also "position:absolute" beim div#text01 entfernen.

    Und so musst du immer weiter zurück suchen. div#text01 befindet sich zum Beispiel in einem div#background-plakat, dem eine feste Höhe zugewiesen wurde. Da die für den Inhalt von vom div#impress nicht ausreicht muss die auch entfernt werden.

    u.s.w.

    Gruss

    MrMurphy

  • Homepageproblem

    Hallo,

    ich denke auch das dir ohne Link zu der Seite (eventuelle bei einem Freeware-Provider wie bplaced.net) nicht zu helfen ist.

    Das fängt schon damit an, das deine Grafik offensichtlich nicht zu deinem Quelltext passt. So ist in deinem Quelltext links die schmale Spalte und rechts die breite. In der Grafik ist das genau anders rum. In dem Quelltext hat die obere Navi einen blauen Hintergrund, in der Grafik der footer.

    Außerdem hast du verschiedene Tippfehler / Rechtschreibfehler im Quelltext, z. B. background_color, abolsute.

    Das Grundproblem scheint zu sein, das du dich vor den HTML- / CSS-Grundlagen drücken willst. Du hast zum Beispiel ein float (#menu ul li), das nicht durch ein clear oder ein clearfix abgeschlossen ist. Sowas geht bei der Vererbung beim CSS gar nicht. Lösch einfach mal dieses float um die Auswirkungen zu testen.

    Außerdem sollte man heutzutage bei neuen Seiten HTML5 und CSS3 und deren Elementen und Möglichkeiten benutzen.

    Gruss

    MrMurphy

  • Zelenabstand beim Internet Explorer größer als mit anderen Brwosern! :)

    Hallo

    Zitat

    Die Website ist leider noch nicht online .

    Ja und? Wofür gibt es Freeware-Provider? Zum Beispiel bplaced.net:

    http://foreninfo.bplaced.net/seiten_fremdpr…tand_im_ie.html

    Das Problem ist, das du die Abstände mit geschützten Leerzeichen erstellt hast. Das mag bei Textverarbeitungen funktionieren, im Internet nicht, da die Browser über die Größe solcher Leerzeichen selbst entscheiden müssen.

    Allein wenn der Zoom-Faktor geändert wird ändert sich die Darstellung, daher wohl auch die geänderte Ansicht im gleichen Browser bei dir.

    Heißt für dich: Grundlagen lernen und die Seite komplett neu aufbauen. Eine Korrektur ist leider nicht möglich.

    Gruss

    MrMurphy

  • Html für alle Browser anpassen

    Hallo,

    irgendwie hast du von dem ganzen Themenkomplex vollkommen unrealistische Vorstellungen.

    Niemand lernt HTML, CSS, JQuery ... durch das Ändern / Anpassen einer Seite.

    Mit den Angaben aus dem head-Bereich kann dir wohl auch kaum jemand helfen. Außer dir zu raten das aktuelle HTML5 und CSS3 zu nutzen.

    Angaben wie

    Zitat

    alles ordentlich angezeigt wird, ... alles komplett verschoben

    sind abolut nichtssagend.

    Zudem hängt die Ansicht nicht nur vom Browser, sondern auch von der Fenstergröße oder dem Betriebssystem mit den vorhandenen Schriftarten ab.

    Wenn du konkrete Hilfe benötigst benötigen wir einen Link zu der Seite und eine konkrete Fehlerbeschreibung.

    Gruss

    MrMurphy

  • Html5 und CSS3 lernen

    Hallo

    Zitat

    Bücher veralten aber auch schnell wieder,

    Und deshalb soll man sich Bücher, die ein Thema aktuell in seiner Gesamtheit beschreiben, nicht kaufen?

    Deine verlinkten Seiten zeigen doch grade das Hauptproblem von HTML5 / CSS3 Tutorials: Die Autoren picken sich grade mal das raus, was sie selbst verstehen. Und das ist in der Regel nur ein kleiner Teilaspekt. Leicht verständliche Informationen finden sich dann immer wieder auf hunderten von Seiten, teilwiese sogar direkt geklaut. Zwar wichtige, aber schwerer zu verstehende, Informationen finden sich gar nicht oder nur nach langem suchen.

    Soweit ich xR0fl verstanden habe sucht er grade eine Quelle, egal ob Homepage oder Buch, die HTML5 / CSS3 komplett im Zusammenhang erklärt.

    Gute Bücher veralten zudem weniger schnell. Auf das "Vorgängerbuch" wird immer noch als Grundlage für HTML4 / CSS2 verwiesen, obwohl es bereits acht(?) Jahre alt ist. Da HTML5 / CSS3 der Standard der nächsten Jahre sind bleibt ein gutes Buch auch entsprechend aktuell. Ob sich die Schreibweise für ein paar CSS-Anweigungen ändert oder neue hinzukommen ändert daran überhaupt nichts. An den entscheidenden Informationen, den Grundlagen, der Semantik, Responsive Design, wird sich in den nächsten Jahren nichts ändern.

    Gruss

    MrMurphy

  • Html5 und CSS3 lernen

    Hallo,

    mit dem Wechsel zu HTML5/CSS3 hat eine radikale Veränderung stattgefunden, mit der viele "alteingesessene" Webseitenersteller überfordert sind. Sogenannte HTML5/CSS3 Tutorials sind deshalb häufig von schlechter Qualität.

    Deshalb solltest du lieber etwas Geld in die Hand nehmen und ein Buch wie "Flexible Boxes" von Peter Müller erstehen.

    Gruss

    MrMurphy

  • Weiße Ränder zwischen divs auf IOS-Geräten

    Hallo

    Zitat

    ich habe in keinem Forum eine Antwort gefunden, die mir bei der Beseitigung dieser unter einem Pixel großen weißen Linien hilft

    Im Hamburger Elbtunnel wird ein Geisterfahrer gemeldet. Reaktion eines Autofahrers: "Einer?`Hunderte."

    Merkst was? Du bist der Autofarer und merkst es nicht mal.

    Wie sollen wir dir helfen, wenn du uns die entscheidenen Informationen vorenthälst? Mit deinen Quellcodeschnipseln erhalten wir folgendes Ergebnis:

    http://foreninfo.bplaced.net/seiten_fremdpr…01_abstand.html

    Gruss

    MrMurphy

  • Flexbox hilfe

    Hallo

    Zitat

    Ich bin kein Profi in solchen Sachen wie HTML und CSS.

    Das bringt dir nichts - auch als Laie musst du dich an die Regeln und die "Best Practices" von HTML und CSS halten. Dein Quellcode hat damit aber leider so gut wie nichts zu tun.

    Zitat

    Das Problem ist, dass das bild zu sehen ist, obwohl die Flexbox dort endet.

    Das verstehe ich nicht.

    Die Browser sind so programmiert, das sie versuchen jede Information anzuzeigen, die im Quelltext angegeben wird. Wenn du ein Bild einfügst werden die versuchen es auch anzuzeigen. Auch wenn es über das umgebende Element hinausgeht.

    Ob das Bild angezeigt wird oder nicht hat mit Flexbox überhaupt nichts zu tun. Wenn Elemente nicht angezeigt werden sollen wird dafür üblicherweise die CSS-Anweisung "display: none;" benutzt. Das gilt auch für Laien.

    Meine Tips für dein Beispiel:

    • Alle DIVs rausschmeißen
    • Alle Klassen rausschmeißen
    • Alle br-Elemente rausschmeißen
    • Semantisch korrekt mit dem dl-Element arbeiten
    • Die Möglichkeiten von HTML5 und CSS nutzen (z. B. :nth-child)
    Zitat

    Aber wenn in der Spalte "Aufgabe" viel Text steht

    Ich sehe dort nicht viel Text sondern ein langes Wort. Das ist etwas ganz anderes.

    Zitat

    flex:2 100%;

    Weißt du überhaupt was du da tust? Das du damit flex-grow und flex-shrink bestimmst?

    Gruss

    MrMurphy

  • Bild relativ zu anderem Bild ausrichten

    Hallo

    erkläre mal bitte was du mit "auf der gleichen Höhe wie das Bild" meinst. Soll die Oberkante der beiden Bilder auf einer Linie sein, oder die Unterkante oder die horizontale Mitte?

    Und warum sollen es 50px sein? Um flexibel zu bleiben wären Prozent-Angaben sinnvoller.

    Am geeignetsten erscheint mir das Flexbox Modell.

    Gruss

    MrMurphy

  • Relativegrößen mit Nachfahren und Margin oder Position:absolute

    Hallo

    Zitat

    verlass ich mich zum jetzigen Zeitpunkt erstmal aufs buch.

    Wenn die Informationen zu deinem HTML / CSS aus dem Buch kommen solltest du es in die Tonne treten. Das ist einfach nur Schrott. So wirst du nie aktuelles HTML5 und CSS3 lernen weil deine Grundlagen schlicht grottenschlecht sind. Und das später umzulernen funktioniert in der Regel nicht.

    Zudem hast du ja noch das zusätzliche Problem, das du klassischer Designer bist. Deshalb musst du zusätzlich damit klarkommen, das du für Internetseiten 70% bis 80% deines Designerwissen nicht nutzen kannst, weil es mit HTML und CSS nichts zu tun hat.

    Ich hatte dir ja bereits in meinem ersten Beitrag geschrieben:

    Zitat

    Internetseiten mit HTML und CSS sind ein vollkommen anderes Medium als Word, pdf, Plakate, Poster, Flyer u.s.w.

    Du gehst jedoch bei Internetseiten genau so vor wie bei den klassischen Medien. Das funktioniert nicht.

    Gruss

    MrMurphy