Contao Konferenz & College 2019 in Duisburg - JETZT TICKET SICHERN!
Ergebnis 1 bis 18 von 18

Thema: Hintergrundfarbe für Header quer über den Browser

  1. #1
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard Hintergrundfarbe für Header quer über den Browser

    Hallo,

    ich habe eine Contao 3 Webseite angelegt. Der #wrapper ist (mit Responsive Grid) 1140px breit. Nun würde ich dem #header gerne eine Hintergrundfarbe geben, die quer über den kompletten Browser geht und nicht bei #wrapper endet, weil der #header im #wrapper enthalten ist. Bei Contao 2 habe ich einfach die fe_page angepasst und den #header aus dem #wrapper genommen. Wenn ich das nun machen würde, wäre das Responsive Grid zerstört. Habt ihr eine Lösung für das Problem parat?

    Einzige Lösung, die mir bisher eingefallen ist, ist dem Body ein Hintergrundbild zu geben. Das geht in diesem Fall allerdings nicht (bzw. ist nicht optimal), weil der Hintergrund einen Verlauf hat und ich somit eine riesige Datei anlegen müsste...

  2. #2
    Contao-Nutzer Avatar von Toad
    Registriert seit
    18.02.2010.
    Ort
    NRW
    Beiträge
    177

    Standard

    Vielleicht verstehe ich das falsch, aber kannst du dem Body nicht einfach einen Verlauf verpassen?
    while(!asleep()) {sheep++;}

  3. #3
    Contao-Nutzer
    Registriert seit
    04.04.2012.
    Beiträge
    142

    Standard

    body background oder zusätzliches div in fe_page mit positon:absolute, würde ich jetzt spontan sagen ohne großartig drüber nachzudenken ...

  4. #4
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Dem body kann ich den Verlauf geben, ja. Dieser Verlauf soll nicht nur im #header sein, sondern auf der kompletten Webseite. -> Das wäre damit erledigt.
    Aber nun soll der #header noch eine Hintergrundfarbe bekommen, die eben über die komplette Breite geht.

    Ein neues div anlegen und absolut positionieren und mit z-index nach hinten schieben wäre eine Möglichkeit, ja. Aber ist das schön?

  5. #5
    Contao-Nutzer Avatar von Toad
    Registriert seit
    18.02.2010.
    Ort
    NRW
    Beiträge
    177

    Standard

    Mein #header geht über die Breite soweit ich weiß. Hat dein #wrapper Margin oder Padding?
    while(!asleep()) {sheep++;}

  6. #6
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Weder noch, der hat nur 100% hight und ist relative positioniert...

  7. #7
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    https://www.paypal.com/de/webapps/mpp/home hier ist es ähnlich wie bei meiner Seite.

  8. #8
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    444

    Standard

    Hallo ElMariachi,
    vielleicht ist es das was du möchtest:

    Code:
    #header {
      background-color: #025C59;
      height: 150px;
      left: 0;
      min-height: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10;
    }

  9. #9
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    444

    Standard

    In deinem Beispiel, geht der Headerhintergrund auch nicht über den gesamten Bildschirm!

    Nimm dir mal Firebug zur Hand und sehe dir die Styleinformation für das html Tag an!

    Viele Grüße Steffen

  10. #10
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    <div class="homepageHero"> geht über die komplette Breite...

  11. #11
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    293
    User beschenken
    Wunschliste

    Standard

    verstehe das Problem nicht. der #header ist doch ein Block Element, geht also immer über die volle Breite, es sei denn, man schränkt bereits den Wrapper ein. Das kann man aber auflösen und dann #header .inside wieder beschränken, genau wie #container und #footer. dann braucht man das mit dem wrapper nicht und hat die Flexibilität die einzelnen Bereiche auch über die volle Breite laufen zu lassen.
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  12. #12
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    444

    Standard

    Zitat Zitat von ElMariachi Beitrag anzeigen
    <div class="homepageHero"> geht über die komplette Breite...
    Das Hintergrundbild hat eine Breite von 1600 Px und die gesamte Webseite hat keine festen Breiten sondern nur Mindestbreiten Angaben.

  13. #13
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Wie gesagt: Responsive Grid mit einer Breite von 1.140px -> Wrapper hat also eine Breite von 1.140px. -> Somit kann der #header nicht breiter als das werden...

  14. #14
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Ich mache es einfach so, wie timmey123 geschrieben hat... Danke.

  15. #15
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    293
    User beschenken
    Wunschliste

    Standard

    man sollte sich vom grid nicht einschränken lassen. dachte sowas soll helfen und nich stören . also, bau das grid um, oder leg dir in der fe_page einfach ein neues div über den wrapper an. das kannst du dann recht simpel stylen und mit position absolute positionieren.
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  16. #16
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Neues Div ist angelegt und absolut positioniert. Ist denke ich die beste Variante. LIEBEN DANK an alle!

  17. #17
    Contao-Nutzer
    Registriert seit
    05.12.2012.
    Beiträge
    22

    Frage Geschicktere Lösung möglich?

    Gibt es da inzwischen (unter 3.0.2) auch eine andere Möglichkeit, als die fe_page zu verändern? Updatesicher?
    Zudem würde ich gerne weiter den Layout-Builder, Responsive Grid und CSS-Reset verwenden.

    Mein (Darstellungs-) Anliegen:
    Ich hätte auch gerne einen (vertikalen) Verlauf, der über die gesamte Fenster-/ Bildschirmbreite geht, als Hintergrund für den header, aber eine davon unabhängige Hintergrundgrafik für den body/main.

    Besten Dank für jeden Hinweis.

  18. #18
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    293
    User beschenken
    Wunschliste

    Standard

    du bist doch updatesicher, solange du nur die Templates anpasst. Ist nicht schlimm
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •