Home > CSS > Banner (div) außerhalb des Contents positionieren

Banner (div) außerhalb des Contents positionieren

In CSS gibt es viele Möglichkeiten ein Banner rechts oder links außerhalb der Seite und somit außerhalb des Contents zu positionieren. Auf vielen Webseiten werden gerne interne Werbebanner platziert, die auf eigene statt fremnde Angebote oder Seiten verlinken. Besonders bei Aktionen, Sonderangeboten oder neuen Artikeln kann man so die Aufmerksamkeit der Kunden auf diese „Hightlights“ lenken. CSS bietet verschiedene Methoden ein DIV mit einem Banner in einem bestimmten Bereich außerhalb des eigentlichen Contentbereichs zu platzieren.

In diesem Tutorial erkläre ich wie man auf einer HTML Seite ein DIV Element mit einem Banner (Werbebanner bzw. Werbemittel) rechts außerhalb vom Content platziert. Vielleicht wurde ja bereits ein Skyscraper Banner (160 Pixel breit 600 hoch) auf einem Nachrichtenmagazin wie SPIEGEL, WELT oder anderen Portalen gesehen. Das Werbemittel wird in der Regel rechts neben die Seite gesetzt. Ganz oben, oberhalb vom Header der eigentlichen Seite, noch ein Leaderboard bündig an den Skyscraper-Banner ausrichten, et Voila, schon haben wir eine Wallpaper (Werbemittel im Hockeyschläger Format) Kampagne gestartet.

Nun denn, das Positionieren ist im Grunde sehr simpel. Wir brauchen zuerst ein HTML Gerüst mit einem Hauptcontainer. In diesem Container liegt die komplette Webseite mit Header, Menü / Navigation, Textcontent, Footer und alle anderen Bereiche der HTML Seite. Das div Element bekommt für die position-Eigenschaft den Wert absolute. Anschließend können wir das DIV Tag mit negativen Wert aus dem höchsten Container „hinausschieben“.

Wie man oben im HTML Code sieht, haben wir einen div Container mit der ID „main“. In diesem liegt ein weiteres div Element mit der ID „banner“, welches unser Banner beinhaltet und auf eine Unterseite verlinkt. In dem Stylesheet im HEAD-Bereich der HTML Seite erkennt man, dass man die Skyscraper Bannerbox mit right und left ausrichten kann.

Mit „top: 0px“ sitzt die DIV-Box ganz oben. Mit „right: -165px“ befindet sich das div mit einem Abstand von 5 Pixeln rechts neben Webseite. Ist der Header mit einem darunterliegenden horizontalem Menü zum Beispiel 50 Pixel hoch und möchte man, dass das Banner rechts auf gleicher Höhe wie die Navigation erscheint, dann schreibt man „top: 50px“. Das div Tag kann man damit um 50 Pixel nach unten verschieben. Genau so lässt sich das Werbebanner in alle vier Richtungen verschieben, indem man zuvor die jeweilige Eigenschaft (top, bottom, left, right) einsetzt.

  1. max
    22. April 2012, 00:42 | #1

    ja aber ich habe das gestern auch gemacht bevor ich hier gelandet bin, und das problem ist das bei versch. monitoren das ding verrutscht. hast du dafür eine lösung ?

    habe es jetzt mit prozentangabe versucht, aber es verschiebt sich noch immer bei einem 15er schirm. auf einen 17 zoll ist es optimal.

    .container_google {
    width:150px;
    background-color:#fff;
    margin:auto;
    height:610px;
    position:absolute;
    overflow:hidden;
    right: 8%;
    top: 171px;
    }
    #google_box {background-color: #fff ; width:auto; height:610px; padding-top: 2px;}
    .container_google { clear:left;}

    • Peter
      22. April 2012, 11:48 | #2

      Dass sich die Darstellung bei verschiedenen Auflösungen anders verhält, ist bei prozentualen Angaben zwangsläufig so. Wenn man in jeder Auflösung die gleiche Darstellung erreichen will, dann muss man schon mit festen Pixel Angaben, besonders bei der Breite, arbeiten. In diesem Tutorial wird das Banner mit negativen Wert in der Eigenschaft „right“ positioniert und somit aus dem Container geschoben. Könnte man noch den dazugehörigen HTML Code sehen, sowie den body CSS Block? So kann man die Ursache des Problems leider nur vermuten. 🙂

  2. max
    22. April 2012, 13:58 | #3

    hallo ! hatte zeuerst mit pixel -right positioniert aber das war das selbe. drumm bin ich dann auf % umgestiegen. ich bin jetzt nich bei meinen pc aber versuche das html zu erklären.

    habe keinen container und innerhalb den rest der seite sondern einen div nach dem anderen alle die gleiche breite und mittig.

    lg

    • Peter
      22. April 2012, 16:53 | #4

      Hallo max,

      wenn kein globaler div-Container im body-Teil festgelegt wurde wie oben im Beispiel „main“, in welchem sich die einzelnen divs befinden, dann ist das „Eltern“ Element dieser divs der body Bereich der HTML Seite. Und wenn für body keine feste Breite (in Pixel) festgelegt wurde, dann ist dieser Bereich variabel.

  3. max
    25. April 2012, 23:19 | #5

    hallo !

    entweder einen container über alle divs, oder body { 1000px;….. liege ich da richtig ?

    container über alle divs dann müsste der abstand zum container bei einen 15er oder 22er monitor gleich sein ?

    lg max

    • Peter
      27. April 2012, 00:47 | #6

      Hallo max,

      ganz genau. Entweder man legt eine Breite von 1000px für body oder den „globalen div Container“ fest. Anschließend kann man im body bzw. im globalen div einen div mit dem Banner platzieren und durch „position: absolute“ und „right: -10px“ diesen ausrichten.

  4. camparie
    24. August 2012, 16:25 | #7

    Wenn der Skyscraper nun an dem Header anliegt und ich nach unten scrolle möchte ich dass dieser so lang an dem Header bleibt bis dieser das Browserfenster verlässt. Der Skyscraper soll dann allerdings am oberen Rand des Browserfensters mit runterrutschen!
    Hoffe das ist halbwegs verständlich gewesen! 🙂

    • Peter
      28. August 2012, 10:33 | #8

      Das müsste dann mit der Eigenschaft „position“ und dem Wert fixed realisiert werden.

  5. Ole
    10. April 2013, 17:06 | #9

    Hallo, sehr gute Anleitung ersteinmal!

    Haben aber auch dieses Problem, das sich der Banner komplett in den Content rein schiebt beim verkleiner der Browser-Größe.

    Benutzte die Anleitung bei WordPress in der Header.php Datei.

    Hat einer eine lösung?

  6. Ole
    10. April 2013, 19:15 | #10

    @Ole
    Ok, ich denke das ich vielleicht eine lösung gefunden hab.

    [code]
    #banner {
    float: right;
    height: 660px;
    position: absolute;
    width: 120px;
    left: 1165px;
    top: 0px;
    }
    #banner2 {
    float: left;
    height: 660px;
    position: absolute;
    width: 120px;
    right: 1164px;
    top: 0px;
    }
    [/code]
    zB

  7. Fabian
    8. Januar 2014, 13:58 | #11

    Danke, ihr habt mir sowas von den Tag gerettet!! 🙂
    Ich war schon am verzweifeln, aber die Lösung mit dem Container über alle Divs mit einer festen Breite ist genau das, was ich sonst nirgendwo finden konnte!

  1. Bisher keine Trackbacks