Beiträge von MrMurphy

    Hallo


    Zitat

    Ich dachte es gäbe eine Möglichkeit diese Liste in einer extra-Datei zu schreiben und dann in allen HTML-Dateien einfach nur einen Verweis zu dieser Datei zu setzen.


    Es gibt verschiedene Möglichkeiten, mit denen Anfänger aber häufig überfordert sind, da sie mehr als nur HTML und CSS verlangen.


    Aktuell sinnvoll und gebräuchlich:


    1. Verwendung eines Content-Management-Systems (CMS) wie zum Beispiel Joomla, die es als Freeware gibt.


    oder


    2. Verwendung eines Editors der das Auslagern von Seiteninhalten zulässt. Der kostenpflichtige Dreamweaver kann das zum Beispiel. Oder eines Editors der das gleichzeitige Ändern von mehreren Dateien gleichzeitig zulässt wie das kostenpflichtige UltraEdit. Mir sind leider keine Freeware-Editoren bekannt die sowas unterstützen.


    oder


    3. Die zusätzliche Verwendung der Programmiersprache PHP. Für das Auslagern reichen ein paar einfache Befehle wie include, es muss also nicht die gesamte Sprache gelernt werden.


    Bei Joomla oder PHP muss der der Provider allerdings PHP unterstützen. In den billigsten Vertragsstufen ist PHP häufig nicht vorhanden, häufig muss deshalb in einen etwas teueren Vertrag gewechselt werden. Zum Testen reichen aber Freeware-Anbieter wie bplaced.net. Auf dem eigenen Rechner wird ein Webserverprogramm wie XAMPP benötigt, das es als Freeware-Variante gibt.


    Von älteren Lösungen wie Framesets kann nur abgeraten werden. Die werden von HTML5 nicht mehr unterstützt.


    Gruss


    MrMurphy

    Hallo


    Das geht nicht direkt.


    Du musst die Worte in geeignete Inline-Elemente einfügen und kannst die dann mit CSS gestalten. Dazu ist zum Beispiel das span-Element geeignet. Zum Beispiel


    HTML
    <p>Von <span>Microsoft</span> werden keine Updates mehr bereitgestellt.</p>


    Das CSS dazu könnte so aussehen:


    Code
    p span {
       background-color: yellow;
    }


    Wenn du unterschiedliche Hintergrundfarben verwenden möchtest kannst du den span-Elementen Klassen zu weisen und dazu passende im CSS verwenden.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Das komische an der Geschichte, dies passiert nur auf der Startseite.


    Auf den Unterseiten war bereits bei jedem vierten div ein clear gesetzt um das float global aufzuheben. Auf der Startseite vor deiner Änderung offensichtich nicht.


    Für gleichhohe Boxen gibt es flexbox, auch als Flexbox-Modell bekannt. Ich weiß allerdings nicht in wie weit das bei dem von dir verwendeten XHTML 1.0 funktioniert. Da XHTML bereits 2008 offiziell zu Grabe getragen wurde und seitdem nicht mehr weiterentwickelt wird benutze ich es seitdem nicht mehr.


    Irgendwann werden auch die Browserhersteller XHTML als unnützen Ballast abwerfen. Das wird zwar noch einige Zeit dauern, trotzdem solltest du dir Gedanken machen mittelfristig auf HTML5 umzusteigen. Zumal auch Google Seiten mit veraltetem HTML4 bzw. XHTML 1.0 bereits abwertet. Das kommt grade für gewerbliche Seiten nicht gut.


    Gruss


    MrMurphy

    Hallo


    Zitat

    dass das css überhaupt nicht berücksichtigt/angezeigt wird


    Dann stimmt in der Regel der Datei- und / oder Pfadname nicht. Das ist deinen Angaben aber nicht zu ernehmen.


    Zitat

    Bei dem background-image hab ich keinen Plan wie das funktioniert.


    Eventuell ist die Ursache dass du keine Dateiendung angegeben hast.


    Gruss


    MrMurphy

    Hallo,


    du hast leider falsche Vorstellungen wie in HTML mit CSS Elemente angeordnet werden beziehungweise aufeinander reagieren. Deshalb wäre es am sinnvollsten du würdest erst einmal die Grundlagen lernen.


    So werden mit position:absolute Elemente aus dem Fluss einer Webseite genommen und können nicht mehr auf andere Elemente reagieren. Damit ist jede Berechnung sinnlos.


    Weiterhin bestimmt sich die Höhe von Elementen aus ihrem Inhalt. Es ist schlechter Stil in Webseiten unnötige Höhenangaben zu machen. Außerdem führt das immer wieder zu Problemen, wenn sich der Inhalt ändert.


    Wenn zwei nebeneinanderliegende Spalten gleich hoch werden sollen muss entweder auf "faux column" zurückgegriffen werden oder sie müssen mit dem "Flexbox-Modell" ausgerichtet werden.


    Wenn Seiten sich auch bei wenig Inhalt mindestens bis zum unteren Fensterrand erstrecken sollen solltest du nach "sticky footer" suchen.


    Ohne grundlegende Änderungen an deinem CSS-Code wird aber keine der Lösungen funktionieren.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Ich möchte dass außerhalb von diesem Rahmen der Background geändert werden kann ohne dass die Header Sidebar und die überschrift davon abhängig sind. Wie ihr seht ändert sich auch der Inhalt vom Wrapper.


    Dann darfst du nicht dem Sternchen ( * ) die Hintergrundfarbe geben. Das ist sowieso schlechter Stil. Sondern dem body.


    Das margin und padding beim Sternchen auf Null setzen hat sich auch nicht bewährt und sollte vermieden werden. Viele Abstände, die die Browser von sich mitliefern, sind sinnvoll und können problemlos übernommen werden.


    Zitat

    Das Menü soll runter bis zum Footer gehn und der Content soll genauso runter bis zum Footer. Leider habe ich das bisher nicht geschafft.


    Das geht auch nicht so einfach, sondern erfordert einiges an Hintergrundwissen.


    Bis vor ein, zwei Jahren ging das nur mit optischen Tricks. Dazu kannst du nach "faux column" googeln. Das sollte jede Menge Infos liefern, so dass ein ellenlanger Text von mir sinnlos wäre.


    Als weitere Möglichkeit kannst du den Hintergrund mit "background-image linear-gradient" füllen.


    Oder du must dich mit dem Flexbox Modell beschäftigen. Dazu wirst du deine Datei aber komplett neu aufbauen müssen. Das wäre zwar in die Zukunft gerichtet sinnvoll, grade wenn deine Seite auch auf Smartphones und Tablets funktionieren soll. Aber dazu wird dir noch das Hintergrundwissen fehlen. Wenn es dich interessiert kannst du nach "flexbox" googeln. Dazu gibt es inzwischen auch einige deutschsprachige Seiten.


    Gruss


    MrMurphy

    Hallo,


    so genau ist noch nicht klar geworden worum es dir überhaupt geht.


    Mit "display: none;" werden Elemente versteckt und ihr Platz frei gegeben. Warum reicht dir das nicht aus?


    Gruss


    MrMurphy

    Hallo,


    das geht nicht. Wenn der Link im HTML-Quelltext ist kann er mit CSS nicht entfernt werden. Er kann nur versteckt werden, ist aber immer noch im Quelltext und damit für den Besucher auffindbar.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Da schreibst du nämlich ausdrücklich, dass der content_wrap eine Ausnahme ist.


    Aber doch mit Flexbox und nicht mit height oder min-height. Darum ging es doch die ganze Zeit.


    Zitat

    Dann mach ich das wohl mit der min-height...


    Deine Entscheidung.


    Gruss und viel Erfolg


    MrMurphy

    Hallo



    Zitat

    Was hab ich falsch gemacht?


    Keine Ahnung. Es gibt verschiedene Möglichkeiten einen Sticky Footer mit Flexbox zu erreichen. Und die Vorlage deiner Quelle zeigst du trotz Nachfrage nicht. So ist Hilfe natürlich schwer möglich.


    Und ich frage mich natürlich warum ich


    CSS
    #content_wrap {
    ...
    min-height: 70%;
    }


    lese, obwohl ich


    Zitat

    Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.


    geschrieben habe. Mit solchen Angaben zwingst du die Browser dazu anders zu rechnen als vorgesehen. Dann bekommst du natürlich manchmal auch unerwartete Ergebnisse.


    Zitat

    Aber wenn ich z.B. einen zweiten Artikel hinzufüge, also mehr Content hab, sieht es so aus


    Deshalb schreibe ich mir doch die Finger wund, erst mal den Inhalt zu erstellen und dann das Layout.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Ok, das bedeutet, dass ich die Höhe nur mit der Eigenschaft flex: 1; (Beispiel) bestimmen kann.


    Nein. Du kannst die Höhe natürlich auch anders bestimmen. Es ist in der Regel nur weder nötig noch sinnvoll.


    Zitat

    Weil ich möchte ja nicht, dass die Flexbox alle Container automatisch gleichgroß darstellt.


    Nein. Flexbox gibt den Containern automatisch nur den Platz den ihr Inhalt erfordert. Damit ein Container mehr Platz bekommt musst du eingreifen. Siehe zum Beispiel



    Du hast die Frage


    Zitat

    Wo gefunden?


    noch nicht beantwortet.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Ich hab einmal eine Variante gefunden, wo man dem Wrapper die min-height: 100vh;


    Wo gefunden? Wrapper sind nur "erfunden" worden um Webseitenentwickler zu nerven und sollten in der Regel weggelassen werden. Sie sind, von Ausnahmen abgesehen, schlicht unnötig. Ein natürlicher und immer vorhandener Wrapper ist das body-Element.


    Zitat

    Gibt man den Flex-Items, also z.B. Header etc., eine Höhe in Prozent


    Die Höhe eines Containers richtet sich nach seinem Inhalt. Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.


    Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.


    Das ist in deinem Fall das div "content_wrap". Welches ich persönlich einfach mit der id "inhalt" bedenken würde. Eine id ist inhaltsleer und warum kompliziert wenn es auch einfach geht.


    Dein "content_wrap" bzw. mein "inhalt" bekommt zum Ausdehnen die Anweisung


    CSS
    flex: 1 0 auto;
             -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */


    Hinweis:


    CSS
    flex: 1;


    reicht vornehmlich auch, aber das ist technisch doch etwas anderes als nur


    CSS
    flex: 1 0 auto;


    und kann in bestimmten Konstellationen zu Problemen führen.


    Ähnliches gilt dafür, dass die Anweisung mit dem Prefix hinter der Anweisung ohne Prefix steht. Das ist im Regelfall unsinnig, hat in diesem Fall aber technische Gründe.


    Gruss


    MrMurphy

    Hallo,


    es gibt unterschiedliche Möglichkeiten per CSS oder per JavaScript. Welche davon für dich am geeignetsten ist kann ich deiner Frage nicht entnehmen.


    Wenn es darum geht das Bild beim Anklicken nur etwas zu vergrößern solltest du dich mit CSS, transform und transition beschäftigen.


    Beispiele mit Quellcode zum Beispiel auf

    [[[LINK GING AUF DOMAIN, DIE ES SO NICHT MEHR GIBT, daher wurde der Link gelöscht]]]


    Für's Anklicken brauchst du nur :hover durch :active ersetzen.


    Gruss


    MrMurphy

    Hallo


    Zitat

    klar ist noch kein inhalt drinnen


    Nee, ist überhaupt nicht klar. Und vernünftiges Layout kannst du so auch nicht lernen.


    Zitat

    was ist an dem div aufbau schlecht?


    Erst mal fehlt die Semantik.


    Und dann wird durch die vielen schließenden div der Quelltext auch für den Webseitenersteller selbst ganz schnell unübersichtlich.


    Zitat

    habe viele aktuelle videos gesehen die einen solchen aufbau machen?


    Die sind entweder nicht aktuell (das Internet vergisst nie) oder die Ersteller haben von aktuellem HTML / CSS keine Ahnung. Davon gibt es leider sehr viele. Nur weil jemand ein Video bei YouTube veröffentlichen kann ist er noch lange kein Spezialist für Webseiten.


    Zitat

    html5 grundgerüst? oder hat es auch einen fachbegriff?


    Es gibt kein immer passendes Grundgerüst. Das Grundgerüst hängt vom Inhalt ab. Und der ...


    Gruss


    MrMurphy

    Hallo,


    es wäre besser du wärst bei deinem Thema geblieben oder hättest ein neues eröffnet, da die Überschrift deins Alten zu deinen aktuellen Fragen nicht passt.


    Zitat

    ich habe jetzt mal grundgerüst für responsive webdesign gemacht und hoffe, es stimmt so?


    Das kann dir niemand beantworten. Denn, da du es noch immer nicht verstanden hast:


    Der Inhalt bestimmt das Layout und damit auch das responsive Design.


    Also: Erst Inhalt, dann Layout und Design. Der Inhalt fehlt bei dir noch komplett. Deshalb


    Zitat

    also bevor ich weiter bastel, wollte ich fragen ob ich das so richtig und "sauber" mache?


    kann man dich nur auf einige strukturelle Mängel hinweisen. Nein, das ist nicht sauber.


    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


    XHTML ist bereits vor 8 Jahren für tot erklärt worden und wird seitdem offiziell nicht mehr weiter entwickelt. Aktuell sinnvoll ist nur HTML5, also


    HTML
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8">
       ...


    HTML
    <div id="wrapper">


    Ein Wrapper ist überflüssig wie ein Tropf. Weg damit.


    HTML
    <div ...


    Du leidest unter Divits, auch Diveritis genannt. Besser mit HTML5 die dafür vorgesehenen Container wie header, nav, main, footer u.s.w. verwenden. Und div nur, wenn es nichts besseres gibt.


    CSS
    @media screen and (max-width: 350px){
    ...
    @media screen and (min-width: 350px){
    ...


    Ganz schlecht.


    Zunächst werden die CSS-Anweisungen erstellt, die für alle Fenstergrößen gelten sollen.


    Dann sollte man sich entscheiden, ob man nach Mobile-First oder Desktop-First vergehen will. Technisch sind beide Vorgehensweisen vollkommen gleichwertig. Anfängern wird gerne zu Mobile-First geraten, da auf Smartphones häufig nicht der gesamte Inhalt der Seite angezeigt werden soll.


    Die min-width bzw. max-width-Angaben richten sich dann nach dem Inhalt der Seite - der bei dir noch komplett fehlt. Für 350px eine Media Query zu erstellen ist heutzutage meist nicht notwendig.


    CSS
    #wrapper {
    	max-width: 950px;
    }


    Warum soll der Inhalt höchstens 950px breit werden? Solche Einschränkungen stammen aus dem letzten Jahrtausend und das Responsive Design soll auch dazu dienen, Desktop-Fenster mit Inhalt zu füllen und den Usern grade kein halbleeres Fenster vorzusetzen. Den insgesamt überflüssigen Wrapper habe ich bereits erwähnt.


    CSS
    max-height: 258px;


    height-Angaben sollten so weit wie möglich unterbleiben. Die Höhe richtet sich nach dem Inhalt und die können die Browser selbst bestimmen.


    Zitat

    Dabei funktioniert "auto" ja auch und geht für alle Größen?


    auto ist in der Regel sinnvoller, funktioniert aber nicht in allen Situationen. Es gibt also kein entweder .. oder.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Ein Bootstrap(Grids)-Aufbau ersetzt also das Grundgerüst mit Containern komplett, ja?


    Kann, muss aber nicht. Jede Webseite benötigt ein Grundgerüst, das du aber selbst zusammenbauen kannst.


    Zitat

    Ich teste jetzt mal Aptana Studio 3, Scriptly hat mir manchmal zu wenig Hilfsvorlagen und Texterkennungen. Einwende? :-).


    Auch bei den Editoren gibt es kein richtig oder falsch. Ein einfacher Editor, den der Anwender in und auswendig kennt ist häufig sinnvoller als ein anspruchsvoller, mit dem der Anwender aber überfordert ist.


    Scriptly hat das Problem seit 3 Jahren nicht mehr weiterentwickelt zu werden und teilweise HTML5 bzw. CSS3 Regeln nicht umsetzen zu können. Ich hatte es schon in anderen Foren, das bestimmte Lösungen damit schlicht nicht möglich waren. Von daher kann ich den nicht mehr empfehlen.


    Gruss


    MrMurphy

    Hallo


    Zitat

    also sind diese grids ein rollstuhl für webdesigner


    Das ist zwar etwas übertrieben, aber im Prinzip: ja.


    Zitat

    sollte ich das thema dann direkt vergessen und ohne arbeiten


    Nein. Grids sind eine Hilfe, aber sie schränken auch ein. Darüber musst du dir klar sein. Ein optimal mögliches, aktuelles Responsive Design ist damit nicht zu erreichen.


    Im oberen Bereich der Webseitenerstellung sind Grids halt nur die zweite Wahl, aber besser als die meisten anderen Möglichkeiten. Wobei noch zwischen Grids und Spaltenlayout zu unterscheiden ist. Nicht das du Grid schreibst aber ein Spaltenlayout meinst.


    Ein sinnvolles Grid zu erstellen erfordert sehr viel Hintergrundwissen. Wenn ich deine Beiträge lese, fehlt dir das. Wenn du Grids benutzten willst solltest du deshalb auf bewährte wie Bootstrap zurückgreifen und dich da einarbeiten.


    Gruss


    Murphy

    Hallo


    Zitat

    braucht man eigentlich gestalungsraster bzw grids zwangsläufig


    Nein, die sind eher nachteilig, da sich dann der Inhalt dem Grid anpassen muss und


    Zitat

    Nicht die Ausgabegeräte bestimmen das Aussehen einer Webseite, sondern ihr Inhalt.


    das nur sehr eingeschränkt funktioniert, abhängig von der Gridgröße.


    Grids von von Webseitenerstellern bevorzugt, die mit einem Responsive Design überfordert sind. Die Seiten passen sich dann zwar der Fensterbreite an, aber es müssen viele Kompromisse geschlossen werden.


    Grids eignen sich, wenn nicht so sattelfesten Webseitenerstellern der grundsätzliche Aufbau der Seite erleichtert werden soll, siehe zum Beispiel Bootstrap.


    Zitat

    ist ein div aufbau eine alternative zu grids oder gehört es eigentlich zusammen


    Bei "div aufbau" wird mir ganz schummrig. Besser wäre "Aufbau mit semantisch korrekten Containern". Und ja: das gehört dann zusammen.


    Zitat

    grids klingen mir moderner und bessere für responsive als der aufbau mit div tags


    Nein, das gehört zusammen. Und besser: nein. Grids sind wie schon geschrieben ein Hilfsmittel, welches ein optimales Responsive Design einschränkt.


    Zitat

    diese grips und raster sind eigentlich hilfen zum leichter arbeiten, oder?


    Genau: Leichter arbeiten für den Webseitenersteller, für die Besucher hingegen ein schlechteres Design. Aber immer noch um Klassen besser als statische Seiten.


    Gruss


    MrMurphy

    Hallo


    Zitat

    wenn man eben ganz genaue Tabellen bzw Elemente eben baut die nicht vverzogen werden sollen und Text ect immer gleich bleibt


    Diese Vorstellung ist bereits seit Jahren veraltet. Webseiten müssen nicht überall (auf jedem Gerät) gleich aussehen, sondern so, dass die Besucher sie möglichst problemlos erfassen und lesen können.


    Deshalb kann ich nur immer wiederholen: Nicht die Ausgabegeräte bestimmen das Aussehen einer Webseite, sondern ihr Inhalt.


    Beispiel: Wenn eine Tabelle (hoffentlich auch mit tabellarischen Daten) in der Breite (und eventuell auch Höhe) nicht vollständig angezeigt werden kann sollte überlegt werden, wie sie anders gestaltet werden kann. Die User dann wild rauf und runter sowie seitswärts scrollen zu lassen wäre so ziemlich die schlechteste Lösung.


    Gruss


    MrMurphy