Eddie: CSS - über die GESAMTE Seitenbreite / -laenge

Hallo allerseits,

wie schaffe ich es, einem div-Bereich, der ein sich wiederholendes Hintergrundbild hat, zu sagen, dass er nicht 10 Pixel (beim IE, NN4.7: 100px, Opera: 30px) vor dem rechten Bildschirmrand aufhoeren sondern sich ueber die gesamte Breite strecken soll?

Nach links und nach oben konnte ich Netscape insofern erziehen, als dass ich einfach -5px als Position angegeben habe.

Das Ganze sieht so aus:

<div style="
  background-image:url(./_pics/sky.gif);
  background-repeat:repeat-x;
  position:absolute;
  top:-5px;
  left:-5px;
  right:0;
  width:100%;  // lass ich das weg, tut's bei NN aber nicht bei IE und Opera
  height:74px;
  min-height:74px;
  max-height:74px;
  margin:0px;">
    <img src="./_pics/blank.gif" height="74px" width="1px">
</div>

Vielleicht ist es ja auch ein gutes Zeichen fuer morgen, dass Rechts keine Chance hat... :-)

Ein aehnliches Problem habe ich auch noch mit ganz unten ausgerichtetem Inhalt, der auch dann unten sein soll, wenn der Seiteninhalt selbst mal eher knapp ist...

Und Scrollleisten will ich bei alldem natuerlich auch vermeiden, was es wohl nicht gerade einfacher macht.

Danke fuer Anregungen,
Eddie

(Ich bin mir sicher, dass die Thematik hier schon haeufig durchgekaut worden ist, nur hab ich's deshalb trotzdem nicht in der Suche gefunden.)

  1. Hallo allerseits,

    Hallo einerseits :)

    wie schaffe ich es, einem div-Bereich, der ein sich wiederholendes Hintergrundbild hat, zu sagen, dass er nicht 10 Pixel (beim IE, NN4.7: 100px, Opera: 30px) vor dem rechten Bildschirmrand aufhoeren sondern sich ueber die gesamte Breite strecken soll?

    [1] das hintergrundbild erstreckt sich schon über das ganze <div>, bloss erstreckt sich das <div> nicht über die ganze seite. überigends: wenn sich das <div> sowieso über die ganze seite strecken soll, brauchst du es doch eigentzlich nicht. nimm doch einfach den body, der streckt sich automatisch über die ganze seite.

    Nach links und nach oben konnte ich Netscape insofern erziehen, als dass ich einfach -5px als Position angegeben habe.

    funktioniert zwar, geht aber auch sauberer. dein problem ist nicht der div selbst, sondern der margin vom <body>. falls du also ein <div> über die ganze seite haben willst (was nur für das hintergrundbild jedoch unnötig ist, siehe [1]), versuch doch mal:

    <body style="margin:0px;padding:0px">
    ...
    <div style="width:100%;height:100%;margin:0px">
    blabla
    </div>
    ...
    </body>

    ich empfehle dir (zum verständnis) die lektüre von selfhtml --> css

    »»[...] Vielleicht ist es ja auch ein gutes Zeichen fuer morgen, dass Rechts keine Chance hat... :-)

    na hoffen wirs  mal.

    Ein aehnliches Problem habe ich auch noch mit ganz unten ausgerichtetem Inhalt, der auch dann unten sein soll, wenn der Seiteninhalt selbst mal eher knapp ist...

    Und Scrollleisten will ich bei alldem natuerlich auch vermeiden, was es wohl nicht gerade einfacher macht.

    das problem kenn ich. gibts aber meiner meinung nach keine gute lösung für. es sei denn, du willst _tabellen_ (ihhrrggh, *schüttel*) benutzen.

    tschÖ
    *stefan

    ------zum ausschneiden und aufkleben-------

    Die Siegesfeier findet unter der Schaukel statt!!!<<

    (Bart Simpson)

    ------zum ausschneiden und aufkleben-------

    1. danke fuer die Hilfe, alles was mit Breite zu tun hatte geht jetzt.

      Ein aehnliches Problem habe ich auch noch mit ganz unten ausgerichtetem Inhalt, der auch dann unten sein soll, wenn der Seiteninhalt selbst mal eher knapp ist...

      das problem kenn ich. gibts aber meiner meinung nach keine gute lösung für. es sei denn, du willst _tabellen_ (ihhrrggh, *schüttel*) benutzen.

      tja, nachdem mit diesem Problem mein Nachmittag und meine Laune vergangen sind, habe ich es letztlich auch mit einer Tabelle versucht, ziemlich tricky, wie ich finde:

      hier ganz grob:

      <div absolut, ganz oben>
      <table height="100%">
      <tr height=270px> // Platz bis zum Beginn meines Inhalts
         nix!!!
      </tr>
      <tr>
      Inhalt
      </tr>
      <tr height="100%">
      Impressum
      </tr>
      </table>
      </div>

      Ziemlich ueble Konstruktion, die auch dadurch nicht besser wird, dass NN alle anderen divs durcheinanderwuerfelt.
      Vielleicht sollte ich einfach das Risiko eingehen, dass NN kein Impressum bekommt!!!

      schwer genervt und trotzdem dankbar - Eddie

      1. Hi,

        tja, nachdem mit diesem Problem mein Nachmittag und meine Laune vergangen sind, habe ich es letztlich auch mit einer Tabelle versucht, ziemlich tricky, wie ich finde:

        hier ganz grob:

        <div absolut, ganz oben>
        <table height="100%">
        <tr height=270px> // Platz bis zum Beginn meines Inhalts

        ^^
                         erstmal muss das in "" und dann ohne px am ende
                        (es ist ja kein css). die meisten browser verstehens
                        zwar auch so, ist aber trotzdem falsch.

        nix!!!
        </tr>
        <tr>
        Inhalt
        </tr>
        <tr height="100%">
        Impressum
        </tr>
        </table>
        </div>

        geht auch einfacher:

        <body style="margin:0px;padding:0px">
        <table width="100%" height="100%">
        <tr><td valign="bottom">
        schalala...inhalt...schalala
        </td></tr>
        </table>
        </body>

        zur erklärung:
        margin und padding im <body> wie gehabt.

        <table> ist 100% breit wie hoch.

        <td valign="bottom">: valign bedeutet vertical align, was wiederum vertikale text-ausrichtung bedeutet. soll heissen: der text wird am unteren ende der zelle ausgerichtet.

        bei manchen browsern/fenstergrössen ist vielleicht ein 'geistert-rollbalken' zu sehen, also so ein sinnloser rollbalken, mit dem man die seite nur ein paar pixel nach oben/unten scrollen kann. um den wegzukriegen (falls er dich stört) gibt es mehrere tricks:
        du könntest das height von der tabelle auf 'fast 100%' setzen (also 99% oder 98% oder so, mal ein bisschen experimentieren), und/oder du könntest im body-style overflow:auto versuchen (das bedeutet, dass der rollbalken nur dann angezeigt werden soll, wenn es auch was zu scrollen gibt). Oder du lässt ihn einfach da wo er ist (stört ja keinen :).

        viel spass damit + den kopf nicht hängen lassen
        *stefan