Jürgen: Horizontale Wiederholung eines Elements

Guten Tag,

wie kann ich ein Bilder in horizontaler Wiederholung ab einer bestimmten Position wiederholen lassen

Der Abstand von links soll 200px und von oben 52px betragen.
Der Abstand vom rechten Bildschirmrand soll aber 10 px betragen.
Ist dieses nicht möglich????? Reiße mir gleich die Haare aus. :(

Ich habe mit dieversen von Selfhtml rumgetüftelt und dieses hier das was ich meine funktionieren sollte aber nicht tut.

#greybar
{
  position: absolute;
  top: 52px;
  left: 200px;
  margin-right: 10px;
  background-repeat:repeat-x;
}

Danke

  1. Hi,

    div#greybar
    {
    margin:52px 10px 0 200px;
    background:url(bildname.png) repeat-x;
    }

    warum immer absolut positionieren?

    freundliche Grüße
    Ingo

    1. Hi

      die Grafik ist zu weit unten. Scheint sich an dem Element darüber zu orientieren.
      Wenn ich aber folgendes hinzufüge verschwindet die Grafik ganz. :( ????
      position: absolute;

      div#greybar

      {
      margin:52px 10px 0 200px;
      background:url(bildname.png) repeat-x;
      }

      warum immer absolut positionieren?

      Heut ist mein erster Tag mit "ohne Tabellen". Habe jahreland nur mit Tabellen für das Layout gearbeitet und habe heute morgen begonnen das Tabellengerüst abzureißen.

      Es scheint aber nix zu klappen.

      Was ist denn mit "absolut" verkehrt ?

      Danke

      1. Hallo,

        die Grafik ist zu weit unten. Scheint sich an dem Element darüber zu orientieren.

        Mach mal die Grenzen der Elemente sichtbar.
        /* Element 1*/ { border: 1px dotted red; }
        /* Element 2 */ { border: 1px dashes blue; }
        Das ist sehr hilfreich bei der Fehlersuche.
        (Den Margin kannst Du leider nicht sichtbar machen.)

        Wenn ich aber folgendes hinzufüge verschwindet die Grafik ganz. :( ????
        position: absolute;

        _Was_ positionierst Du absolut?
        Und hast Du begriffen, dass "absolut" in bezug auf das Mutter-Element gemeint ist?
        http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position

        Stell am besten Mal Deine Testseite online und poste hier den Link (</faq/#Q-19>).

        Gruesse,

        Thomas

        1. Hi,

          Mach mal die Grenzen der Elemente sichtbar.
          /* Element 1*/ { border: 1px dotted red; }
          /* Element 2 */ { border: 1px dashes blue; }
          Das ist sehr hilfreich bei der Fehlersuche.
          (Den Margin kannst Du leider nicht sichtbar machen.)

          Versuche ich mal.

          _Was_ positionierst Du absolut?

          Ein Bild.

          Und hast Du begriffen, dass "absolut" in bezug auf das Mutter-Element gemeint ist?

          http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position

          Nein, das habe ich absolut nicht begriffen. Die Seite die Du mir gegeben hast habe ich mir unmittelbar vor meinem ersten Posting angeschaut. Es ist auch nicht beschrieben was genau ein Elternelement ist.

          Stell am besten Mal Deine Testseite online und poste hier den Link (</faq/#Q-19>).

          Geht im Moment nicht. Kann im moment nichts mit ftp hochladen.

          Aber wie kann ich denn etwas absolut zu den Bildschirmrändern anordnen, wenn nicht mit "absolut".

          Ist ja ein Widerspruch.

          "relativ" und "absolut" sind vertauscht ?

          ??????

          Hilfe.

          Meine Seite sieht nun aus wie ein Puzzelspiel dass ich gerade auf dem Boden ausgeschüttet habe.

          Danke

          1. Hallo,

            Nein, das habe ich absolut nicht begriffen. Die Seite die Du mir gegeben hast habe ich mir unmittelbar vor meinem ersten Posting angeschaut. Es ist auch nicht beschrieben was genau ein Elternelement ist.

            Es ist das Element, das in der Verschachtelung der Elemente ein anderes "umfasst".

            <body>
              <h1>Ueberschrift<h1>
              <p>Bla bla <img src=".." alt=".."></p>
              <div>
                 <p>E-Mail: fritzli@example.com</p>
              </div>
            </body>

            Fuer H1 und fuer P ist BODY das Mutterelement.
            Fuer das IMG ist das erste P das Mutterelement.
            Fuer das zweite P ist DIV das Mutterelement.

            Aber wie kann ich denn etwas absolut zu den Bildschirmrändern anordnen, wenn nicht mit "absolut".

            Kannst Du schon.
            Aber die betreffenden Elemente muessen unmittelbar Kinder von BODY sein.

            Meine Seite sieht nun aus wie ein Puzzelspiel dass ich gerade auf dem Boden ausgeschüttet habe.

            Das ist ein ueblicher Nebeneffekt von position...

            Ich empfehle Dir, ein Stylesheet, das position verwendet, vor moeglichst
            vielen Browsern fernzuhalten, insbesondere Netscape 4 und MS IE <5.

            Gruesse,

            Thomas

            1. Hi,

              aber wie soll ich ein 3 Spaltiges Layout mit einer Logozeile ganz oben OHNE! position hinbekommen.

              Wie soll das bitte gehen ?

              Danke

              1. hi,

                aber wie soll ich ein 3 Spaltiges Layout mit einer Logozeile ganz oben OHNE! position hinbekommen.

                Wie soll das bitte gehen ?

                nun ja, an erster stelle im quelltext kommt deine "logozeile", -darunter_ dann die drei spalten, die mit float etc. ausgerichtet werden.

                sieh dich mal auf http://glish.com/css/ um, da findest du einige hilfreiche beispiele mit guten erläuterungen.

                gruss,
                wahsaga

              2. Hi,

                aber wie soll ich ein 3 Spaltiges Layout mit einer Logozeile ganz oben OHNE! position hinbekommen.

                wie wahsaga schon schrieb: beschäftige dich mit 'float' und 'margin'.
                wenn in meinem beispiel weiter oben das bild nicht die gewünschten randabstände hatte, dann deshalb, weil andere elemente vorher im quelltext definiert waren (oder weil der browser für body noch ein margin bzw. padding setzt, was du aber auf 0 setzen kannst).

                bedenke bei absoluter positionierung, daß du hier große probleme bekommst, wenn die inhalte der so positionierten elemente z.b. durch schriftvergrößerung, aber auch durch zu kleine bildschirmfenster, nicht mehr "passen". viele solcher layouts fallen dann auseinander. wenn du dagegen die elemente über float nebeneinander positionierst und über margin die abstände zueinander setzt, wird vieles leichter und auch stabiler.

                freundliche Grüße
                Ingo

        2. Hi,

          _Was_ positionierst Du absolut?
          Und hast Du begriffen, dass "absolut" in bezug auf das Mutter-Element gemeint ist?
          http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position

          Leider ist das, was dort steht, falsch.

          Bei position:absolute beziehen sich die Koordinaten auf das innerste Eltern-/Großeltern-/Urgroßeltern-/...-Element, welches eine andere Positionierung als static hat.

          siehe 1.) http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position:
          absolute
              The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block.

          siehe 2.) http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details:
          If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static'

          cu,
          Andreas

          --
          Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
          http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
          1. Hallo,

            Bei position:absolute beziehen sich die Koordinaten auf das innerste Eltern-/Großeltern-/Urgroßeltern-/...-Element, welches eine andere Positionierung als static hat.

            Achso. Danke fuer die Aufklaerung und die Links!
            Wieder was gelernt...

            Gruesse,

            Thomas

  2. Hallo,

    wie kann ich ein Bilder in horizontaler Wiederholung ab einer bestimmten Position wiederholen lassen
    Der Abstand von links soll 200px und von oben 52px betragen.

    Durch die Positionierung legst Du nur fest, wo das "erste" Hintergrundbild stehen soll.
    Es wird dann rund um dieses Bild gekachelt, bei repeat-x also rechts _und_ links vom
    "ersten" Bild, und zwar bis an die Grenzen des Elements (d.h. bis zum Border).

    Es ist _nicht_ moeglich, zu sagen, "vom ersten Bild an nur nach rechts kacheln".

    Der Abstand vom rechten Bildschirmrand soll aber 10 px betragen.

    Dann kannst Du z.B. fuer body einen margin-right oder border-right von 10px festlegen.
    Dieser Bereich erhaelt dann kein Hintergrundbild.

    Befasse Dich mit dem Box Modell von CSS.
    http://www.w3.org/TR/REC-CSS2/box.html
    Das Hintergrundbild betrifft die Bereiche Padding und Content.

    Gruesse,

    Thomas