Beiträge von MrMurphy

    Hallo,


    du solltest für den header gar keine Höhe angeben sondern sie durch den Browser berechnen lassen.


    Als Beispiel habe ich mal eine Seite mit aktuellem HTML / CSS erstellt und etwas Responsive Design eingebaut:



    Gruss


    MrMurphy

    Hallo


    Zitat

    Ich fachkundige Hilfe wäre ich begeistert


    Glaube ich eher nicht.


    Problem: Im Gegensatz zu Papierseiten (Bücher, Zeitungen, Plakate u.s.w.) haben Webseiten keine (sinnvoll) definierbaren Größen. Siehe


    http://little-boxes.de/lb1/1-d…ist-nicht-aus-papier.html


    http://little-boxes.de/lb1/1.1-papierdenken.html


    und die folgenden Seiten.


    Im Endeffekt wird eine Webseite so groß wie ihr Inhalt. Wenn der nicht ausreicht um das Fenster zu füllen hört die Seite eher auf. Ist der Inhalt größer muss gescrollt werden, möglichst nur nach unten bzw. zurück.


    Wenn du trotzdem den Eindruck erwecken möchtest, dass nicht ausreichender Inhalt das gesamte Fenster füllt, kannst du nach "sticky footer" suchen.


    Gruss


    MrMurphy

    Hallo,


    das geht nicht mit CSS.


    Du kannst eine Grafik erstellen und an der gewünschten Stelle einfügen. Am sinnvollsten erscheint mir eine SVG-Grafik, deren Größe als Vektorgrafik flexibel angepasst werden kann und die auf vielfältige Weise in eine HTML-Datei eingebunden werden kann.


    Gruss


    MrMurphy

    Hallo,


    entweder ist die Datei nicht hochgeladen


    oder


    der Pfadname stimmt nicht


    Code
    1. ../pics/Kühe.jpg


    vs.


    Code
    1. Kühe.jpg


    oder


    der Dateiname macht Probleme, hier das ü


    oder


    der Dateiname stimmt in Groß-/Kleinschreibung nicht mit der Angabe in der CSS-Datei überein.


    Pfad-, Datei- und Ordnernamen sollten nur aus Buchstaben des englischen Alphabets, Zahlen und dem Unterstrich bestehen, das vermeidet viele Probleme im Vorfeld. Noch mehr Probleme werden vermieden wenn von den Buchstaben nur die Kleinbuchstaben verwendet werden, also die Kleinbuchstaben des englischen Alphabets, Zahlen und der Unterstrich.


    Gruss


    MrMurphy

    Hallo


    Zitat

    Wo habe ich einen Fehler drin?


    Dein Grundproblem sind deine veralteten Vorstellungen von HTML und CSS. Mit aktuellem HTML5 und CSS3 hat dein Quelltext leider eher wenig zu tun.


    Durch


    Code
    1. * {
    2. margin: 0px;
    3. padding: 0px;
    4. }


    werden alle Abstände auf Null gesetzt. Das war vor 15 Jahren mal angesagt, hat sich aber inzwischen als nachteilig herausgestellt. Die meisten Abstände der Browser-Stylesheets sind durchaus sinnvoll und sollten genutzt werden. Wenn du die Eigenschaften trotzdem behalten willst musst du natürlich alle Abstände mit eigenen Werten belegen.


    Andererseits vergibst du unnötigerweise Höhenangaben (height), die das Layout einschränken. Die Höhe von Containern wird durch deren Inhalt bestimmt und soll vom Browser selbst bestimmt werden.


    Zitat

    bei den Menüpunkten einen Abstand nach oben hinzubekommen


    Wenn du dem umgebenden Container .navigation eine Höhe von 2em gibst bleibt bei einer Schriftgröße von 1.5em nur wenig Platz für Abstände. Da du zudem die li-Elemente zu inline-Elementen bestimmst werden die Möglichkeiten Abstände zu bestimmten weiter eingeschränkt. Eine weitere Einschränkung ist das veraltete und überflüssige center-Element.


    Von daher ist die gesamte CSS-Konstruktion zu überdenken.


    Momentan kannst du nur die Höhe von .navigation vergrößern, zum Beispiel auf 4em und den li-Elementen ein line-height von 4em hinzufügen. Oder halt statt der 4em andere dir passende Werte einsetzen.


    Spätestens bei kleineren Fenstern wird dir das Layout aber um die Ohren fliegen.


    Durch das setzen von "display: inline;" reagieren die li-Elemente nicht mehr auf Abstände wie padding oder margin.


    Insgesamt wäre es sinnvoller das Menü mit "display: block;" zu definieren und die Menüpunkte mit float, oder aktueller flex, nebeneinander zu setzen sowie das height bei .navigation und das center-Element wegzulassen. Dazu benötigst du aber mehr Hintergrundwissen.


    Gruss


    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
    1. <p>Von <span>Microsoft</span> werden keine Updates mehr bereitgestellt.</p>


    Das CSS dazu könnte so aussehen:


    Code
    1. p span {
    2. background-color: yellow;
    3. }


    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
    1. #content_wrap {
    2. ...
    3. min-height: 70%;
    4. }


    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
    1. flex: 1 0 auto;
    2. -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */


    Hinweis:


    CSS
    1. flex: 1;


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


    CSS
    1. 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