Taney: Boxmodel mit DIV'S

Hallo, meine Seite ist mit Boxen aufgebaut, anstatt Tabellen.
Ein Top, Main und dann Footer.
Sprich, drei Boxen mit der Breite 766px untereinander und zentriert angeordnet.

#top {
width:766px;
height:146px;
padding-top:1px;
border-left: 1px solid #ACA899;
border-right: 1px solid #ACA899;
line-height:16px;}

#main {
width:766px;
padding:0;
border-left: 1px solid #ACA899;
border-right: 1px solid #ACA899;}

.. usw.

Ich würde nun gerne einen Bereich für Werbebanner (Skypescraper) rechts von der Box erstellen, weiß aber gerade nicht, wie ich das anstellen muss.
Die jetzige Boxen sollen weiterhin zentriert sein und nur an der rechten Seite ein Bereich angehänt werden, ob es nun auf die Bildschirmbreite passt oder nicht, wäre zweirangig.
Hoffentlich habe ich meine Problematik gut genug erklärt.
Viele Grüße

  1. Hi,

    Hallo, meine Seite ist mit Boxen aufgebaut, anstatt Tabellen.

    Du meinst Boxen, wie sie z.B. durch <p>, <span>, <title>, <strong>, <div> und <table> entstehen?

    Ich würde nun gerne einen Bereich für Werbebanner (Skypescraper) rechts von der Box erstellen, weiß aber gerade nicht, wie ich das anstellen muss.

    Recherchiere, wonach sich absolute Positionierung richtet, und beschäftige Dich mit möglichen Werten der margin-Eigenschaft. Das wäre zumindest einer von mehreren gültigen Ansätzen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Hello out there!

    Sprich, drei Boxen mit der Breite 766px untereinander und zentriert angeordnet.

    Isch ’abe gar keinen 766px breiten Viewport!

    Und andere Nutzer, deren Browserfensterinneres ebenfalls schmaler ist, werden sich auch mit Grausen von deiner Seite abwenden, weil niemand gern horizontal scrollt.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hallo,
      bei 766px Breite müssen ja normalerweise sehr sehr wenige Leute horizontal scrollen?
      Auf einem Bildschirm mit 800x600 Auflösung klappt das ja gut.
      Gut, die Werbung sieht man dann nicht mehr, wäre aber egal.

      html {overflow-x:hidden;}
      wäre nicht gut ne?

      Grüße

      1. Hi,

        bei 766px Breite müssen ja normalerweise sehr sehr wenige Leute horizontal scrollen?

        und diese (angeblich) sehr wenigen interessieren Dich nicht?

        Auf einem Bildschirm mit 800x600 Auflösung

        Verwende *nie wieder* den Begriff "Auflösung" im Zusammenhang mit irgend etwas des Themenbereichs Webdesign. Die Gründe kannst Du in rauhen Mengen im Archiv nachschlagen.

        html {overflow-x:hidden;}
        wäre nicht gut ne?

        Nein, invalider Code wäre in der Tat nicht gut.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hallo Cheatah,

          Auf einem Bildschirm mit 800x600 Auflösung

          Verwende *nie wieder* den Begriff "Auflösung" im Zusammenhang mit irgend etwas des Themenbereichs Webdesign. Die Gründe kannst Du in rauhen Mengen im Archiv nachschlagen.

          Irgendwie fällt mir bei diesen Sprüchen derzeit immer dieses eine Bild aus der c't ein... ;-)

          Grüße

          Marc *SCNR* Reichelt || http://www.marcreichelt.de/

          --
          Linux is like a wigwam - no windows, no gates and an Apache inside!
          Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
          1. Hallo Marc,

            Irgendwie fällt mir bei diesen Sprüchen derzeit immer dieses eine Bild aus der c't ein... ;-)

            Die Verwendung wird c't-Lesern zum individuellen Gebrauch gestattet. Jede Weiterverbreitung ist untersagt.

            (Ein Link hätte doch auch gereicht?!)

            Mit freundlichen Grüßen,
            André

            1. Hallo Zeromancer,

              Die Verwendung wird c't-Lesern zum individuellen Gebrauch gestattet. Jede Weiterverbreitung ist untersagt.

              (Ein Link hätte doch auch gereicht?!)

              Oha, den Satz habe ich glatt übersehen, da ich mir die Bilder seit längerem nur direkt - über den Pfad des großen Bildes - ansehe.
              Ich vermute allerdings, dass es hier im Forum sehr viele c't-Leser gibt. Und ich habe das Bild ja nicht kopiert, sondern direkt eingebunden - es bleibt weiterhin auf dem Ursprungs-Server.

              Und nichtsdestotrotz ist das Bild doch eher animierend zum Kauf einer c't, hat also einen gewissen werbeähnlichen Effekt... ;)

              Grüße

              Marc Reichelt || http://www.marcreichelt.de/

              --
              Linux is like a wigwam - no windows, no gates and an Apache inside!
              Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
  3. Hallo Taney,

    Sprich, drei Boxen mit der Breite 766px untereinander und zentriert angeordnet.

    Warum das oft keine gute Idee ist, kannst du im Beitrag Optimierung für Bildschirmauflösungen nachlesen.

    Ich würde nun gerne einen Bereich für Werbebanner (Skypescraper) rechts von der Box erstellen, weiß aber gerade nicht, wie ich das anstellen muss.

    Eine Grundlagenbeschreibung und viele Beispiele findest du im Beitrag Spaltenlayout mit CSS.

    Grüße
     Roland