Christoph: Header - links und rechts zwei verschiedene Farben

Hi, ich hab ein kleines Problem und zwar erstelle ich gerade für einen Kumpel eine Internetseite. Ich möchte die Seite dynamisch gestalten sodass Sie sich mit der größe des Displays anpasst. Auf die linke Seite vom Header soll eine andere Farbe wie auf der rechten Seite. Um mein Anliegen zudeutlichen hänge ich eine Grafik an.

Ebenso habe ich eine Frage und zwar hab ich den Footer am Boden fixiert, jedoch zieht der Content nicht bis unten hin nach. Hat jemand eine Lösung?

http://www.bilder-upload.eu/show.php?file=fc7c4f-1433843498.png

Liebe Grüße

  1. Hallo Christoph,

    ich hab ein kleines Problem und zwar erstelle ich gerade für einen Kumpel eine Internetseite. Ich möchte die Seite dynamisch gestalten sodass Sie sich mit der größe des Displays anpasst. Auf die linke Seite vom Header soll eine andere Farbe wie auf der rechten Seite. Um mein Anliegen zudeutlichen hänge ich eine Grafik an.

    ich würde es wohl so umsetzten:

    header::before {
      content: "";
      width: 128px;
      background-color: #0C0;
      padding-right: 25px;
      margin-left: -25px;
    }
    
    header {
      width: 1000px;
      margin: 0 auto;
      height: 100px;
      background-color: #666;
    }
    
    <body>
       <header> </header>
    </body>
    
    1. Hallo Christoph,

      ich hab ein kleines Problem und zwar erstelle ich gerade für einen Kumpel eine Internetseite. Ich möchte die Seite dynamisch gestalten sodass Sie sich mit der größe des Displays anpasst. Auf die linke Seite vom Header soll eine andere Farbe wie auf der rechten Seite. Um mein Anliegen zudeutlichen hänge ich eine Grafik an.

      ich würde es wohl so umsetzten:

      header::before {
        content: "";
        width: 128px;
        background-color: #0C0;
        padding-right: 25px;
        margin-left: -25px;
      }
      
      header {
        width: 1000px;
        margin: 0 auto;
        height: 100px;
        background-color: #666;
      }
      
      <body>
         <header> </header>
      </body>
      

      Also die Farben Links und Rechts sollen bei einem größeren Bildschirm immer bis zum Rand gehen und 100% macht er nicht, da dann die erste Farbe eben komplett 100% ist und das normale Headerbild überdeckt.

    2. @@Jnnbo

      ich würde es wohl so umsetzten:
      width: 128px;

      Nein.

      width: 1000px;

      Nein.

      LLAP 🖖

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Also das wäre der Code zum Header:

    #header {
    background-image: url(images/header.png);
    background-repeat:no-repeat;
    width:100%;
    min-width:980px;
    height:189px;
    background-position: center; 
    }
    
    #header_links {
    background-color:#0F0;
    width:100%;
    height:189px;
    float:left; 
    }
    
    #header_rechts {
    background-color:#FFF;
    width:100%;
    height:189px;
    float:right;
    }
    
  3. @@Christoph

    Um mein Anliegen zudeutlichen hänge ich eine Grafik an.

    Wann tust du das? Achso, du meinst den unten angegebenen URI.

    Über dem Eingabefeld findest du die Buttons [Link hinzufügen] und [Bild hinzufügen]; unter dem Eingabefeld [Bilder hierher ziehen oder klicken, um sie hochzuladen.].

    Ein Bild sagt mehr als 100 Worte? Ein Link zur betreffenden Seite sagt noch viel mehr.

    Es ist mir auch unklar, wie sich „1680px lang“ und „15 Zoll Bildschirm [sic!]“ mit „sodass Sie sich mit der größe des Displays anpasst“ vertragen soll.

    LLAP 🖖

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Christoph

      Um mein Anliegen zudeutlichen hänge ich eine Grafik an.

      Wann tust du das? Achso, du meinst den unten angegebenen URI.

      Über dem Eingabefeld findest du die Buttons [Link hinzufügen] und [Bild hinzufügen]; unter dem Eingabefeld [Bilder hierher ziehen oder klicken, um sie hochzuladen.].

      Ein Bild sagt mehr als 100 Worte? Ein Link zur betreffenden Seite sagt noch viel mehr.

      Es ist mir auch unklar, wie sich „1680px lang“ und „15 Zoll Bildschirm [sic!]“ mit „sodass Sie sich mit der größe des Displays anpasst“ vertragen soll.

      LLAP 🖖

      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

      Also der Header ist 1680px lang, dass ist aber zum Beispiel für ein 13Zoll oder 15Zoll Display zu groß in diesem Fall soll nur ein Ausschnitt des Headers gezeigt werden (Einfach width:100%; background-position: center; fertig!). Je größer der Bildschirm des Users wird desto mehr bzw. wird der Header vollständig anzeigt. Ab einer bestimmten Bildschirmgröße wird, jedoch doch nur weiß links und rechts vom Header anzeigt weil das Header-Bild zu Ende ist. Gut das kam einfach mit background-color beheben, jedoch endet das Bild links und rechts mit einer verschiedenen Farbe und diese Farbe soll bei größeren Disyplays jeweils bis zum Ende an den Bildschirm rand gehen.

      1. @@Christoph

        Ab einer bestimmten Bildschirmgröße wird, jedoch doch nur weiß links und rechts vom Header anzeigt weil das Header-Bild zu Ende ist. Gut das kam einfach mit background-color beheben, jedoch endet das Bild links und rechts mit einer verschiedenen Farbe und diese Farbe soll bei größeren Disyplays jeweils bis zum Ende an den Bildschirm rand gehen.

        Kommt mir doch bekannt vor. Da ha’m wa’s ja.

        Die Farben kommen mit border-left bzw. border-right ins Spiel.

        LLAP 🖖

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@Christoph

        jedoch endet das Bild links und rechts mit einer verschiedenen Farbe

        Auf dem Bild ist aber noch mehr drauf als ein Farbverlauf?

        Wenn nein, ist ist ein Bild unsinnig; einen Farbverlauf kriegt man mit CSS-Gradienten hin.

        Wenn ja, wäre es vielleicht trotzdem angebracht, den Vordergrund freizustellen und den Hintergrund mit CSS-Gradient zu färben.

        LLAP 🖖

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. @@Christoph

          jedoch endet das Bild links und rechts mit einer verschiedenen Farbe

          Auf dem Bild ist aber noch mehr drauf als ein Farbverlauf?

          Wenn nein, ist ist ein Bild unsinnig; einen Farbverlauf kriegt man mit CSS-Gradienten hin.

          Wenn ja, wäre es vielleicht trotzdem angebracht, den Vordergrund freizustellen und den Hintergrund mit CSS-Gradient zu färben.

          LLAP 🖖

          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

          Es sind Wellen auf dem Header, ehm wegen den Border wie bekomme ich es hin, dass er sich der Größe anpasst.

          Hier ist die Seite um das mal zuzeigen: http://s525294627.online.de/Demo/lehmann/

          1. @@Christoph

            jedoch endet das Bild links und rechts mit einer verschiedenen Farbe

            Auf dem Bild ist aber noch mehr drauf als ein Farbverlauf?

            Wenn nein, ist ist ein Bild unsinnig; einen Farbverlauf kriegt man mit CSS-Gradienten hin.

            Wenn ja, wäre es vielleicht trotzdem angebracht, den Vordergrund freizustellen und den Hintergrund mit CSS-Gradient zu färben.

            LLAP 🖖

            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

            Es sind Wellen auf dem Header, ehm wegen den Border wie bekomme ich es hin, dass er sich der Größe anpasst.

            Hier ist die Seite um das mal zuzeigen: http://s525294627.online.de/Demo/lehmann/

            Also ich habe es jetzt dem Verlauf hinbekommen jedoch stellt meine Farbe nicht zu 100% da, also Farbabweichung.

            1. @@Christoph

              jedoch endet das Bild links und rechts mit einer verschiedenen Farbe

              Auf dem Bild ist aber noch mehr drauf als ein Farbverlauf?

              Wenn nein, ist ist ein Bild unsinnig; einen Farbverlauf kriegt man mit CSS-Gradienten hin.

              Wenn ja, wäre es vielleicht trotzdem angebracht, den Vordergrund freizustellen und den Hintergrund mit CSS-Gradient zu färben.

              LLAP 🖖

              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

              Es sind Wellen auf dem Header, ehm wegen den Border wie bekomme ich es hin, dass er sich der Größe anpasst.

              Hier ist die Seite um das mal zuzeigen: http://s525294627.online.de/Demo/lehmann/

              Also ich habe es jetzt dem Verlauf hinbekommen jedoch stellt meine Farbe nicht zu 100% da, also Farbabweichung.

              DANKE! Hat sich alles erledigt :))

            2. Hallo Christoph,

              Also ich habe es jetzt dem Verlauf hinbekommen jedoch stellt meine Farbe nicht zu 100% da, also Farbabweichung.

              Bitte vermeide Vollzitate. Sie stören nur den Lesefluss.

              Bitte verlinke die problematische Seite auf http://s525294627.online.de/Demo/lehmann/ sehe ich nichts, was zu deiner Problembeschreibung passt.

              Bis demnächst
              Matthias

              --
              Signaturen sind bloed (Steel) und Markdown ist mächtig.
  4. Hallo,

    Ich möchte die Seite dynamisch gestalten sodass Sie sich mit der größe des Displays anpasst.

    Wir haben im Wiki ein paar Anregungen zum Thema.

    Gruß
    Kalk