Quaeck: Background color position

Hi,
Ich habe ein kleines CSS Problem.
Also ich möchte meinen background 2px vom linken Rand entfernt haben. Dies habe ich zunächst mit padding-left:2px versucht, jedoch bewirkte dies kein Ergbenis.
So sieht mein Bild bisher aus:
http://img225.imageshack.us/img225/4419/falschnb5.jpg

Und so soll es mal aussehen, wenn es fertig ist:
http://img513.imageshack.us/img513/6868/richtigas5.jpg

Mein Code dazu sieht wie folgt aus:
.hallo{
background-color:#F8F8F8;
border-top:2px solid #E8E8E8;
border-left:2px solid #E8E8E8;
border-bottom:2px solid #E8E8E8;
border-right:2px solid #E8E8E8;
}

Kann mir jemand mal einen Tip geben, wie ich das hin bekomme??

  1. Gudn!

    So sieht mein Bild bisher aus:
    http://img225.imageshack.us/img225/4419/falschnb5.jpg

    Und so soll es mal aussehen, wenn es fertig ist:
    http://img513.imageshack.us/img513/6868/richtigas5.jpg

    ich sehe zwar bis auf den Text keinen Unterschied, vermute aber, dass Du background-position suchst.

    Gruß aus Fürth in Mittelfranken,
    Samoht

    --
    fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
    1. Gudn!

      ich sehe zwar bis auf den Text keinen Unterschied, vermute aber, dass Du background-position suchst.

      nein tust du nicht... :)

      sorry

      Gruß aus Fürth in Mittelfranken,
      Samoht

      --
      fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
      1. Hi Samoht,

        ...vermute aber, dass Du background-position suchst.

        nein tust du nicht... :)

        Tut er nicht? Dann habe ich die Ursprungsfrage falsch verstanden. Ich habe nämlich gerade dazu geraten. *g*

        mfG

        gooxsy

        --
        SELFCODE: sh:( fo:| ch:? rl:° br:& n4:? ie:% mo:) va:} de:> zu:) fl:( ss:( ls:& js:{

  2. Hi Quaeck,

    Ich habe ein kleines CSS Problem.

    ich denke, da fehlen _viele_ Grundlagen.

    Also ich möchte meinen background 2px vom linken Rand entfernt haben. Dies habe ich zunächst mit padding-left:2px versucht, jedoch bewirkte dies kein Ergbenis.

    padding ist der _Innenabstand_ eines Elements und hat _nichts_ mit der Hintergrundgrafik zu tun.

    border-top:2px solid #E8E8E8;
    border-left:2px solid #E8E8E8;
    border-bottom:2px solid #E8E8E8;
    border-right:2px solid #E8E8E8;

    Sowas kann man zusammenfassen und somit den Code schlanker und übersichtlicher machen:

      
    border:2px solid #E8E8E8;  
    
    

    Kann mir jemand mal einen Tip geben, wie ich das hin bekomme??

    Prinzipiell ja, beschäftige Dich mit background-position.

    Aber rein gefühlsmäßig solltest Du Dich glaube ich mit dem _gesamten_ CSS-Kapitel hier beschäftigen.

    mfG

    gooxsy

    1. Gudn!

      Prinzipiell ja, beschäftige Dich mit background-position.

      dachte ich auch, aber das gilt doch nur für grafiken?

      zum thema:

      du könntest ein div definieren mit rahmen und der hintergrundfarbe die du am rand haben möchtest und darüber ein anderes div ohne rahmen mit der anderen hintergundfarbe...

      Gruß aus Fürth in Mittelfranken,
      Samoht

      --
      fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
      1. Hi Samoht,

        du könntest ein div definieren mit rahmen und der hintergrundfarbe die du am rand haben möchtest und darüber ein anderes div ohne rahmen mit der anderen hintergundfarbe...

        willst Du ihn zum div-Suppen-Produzenten erziehen? :-)

        Wenn ich ein Bild ausrichten möchte, dann wende ich margin, padding, etc. auf das _Bild_ an.

        Wenn ich ein div ausrichten möchte, dann wende ich margin, padding, etc. auf das _div_ an.

        Und für Hintergrundgrafiken gibt es auch ganz tolle CSS-Anweisungen.

        Punkt. Aus.

        Außerdem habe ich das schlimme Gefühl, daß hier schon wieder ein Design gemacht wird, bevor überhaupt noch Inhalt da ist.

        mfG

        gooxsy

        1. Gudn!

          willst Du ihn zum div-Suppen-Produzenten erziehen? :-)

          nein, aber

          Wenn ich ein Bild ausrichten möchte, dann wende ich margin, padding, etc. auf das _Bild_ an.

          wo siehst du bei ihm ein Bild?

          Er möchte die Postionsangabe auf eine Hintergrund-_Farbe_ anwenden. Das ist AFAIK nicht direkt möglich, deswegen mein Workaround.

          Die nächste Frage wäre: Könnte man es auch mit einem Hintergrundbild lösen?
          Ich meine nein, weil

          - dann müsste das Bild entweder eine bekannte feste Größe haben
           - oder wiederhohlt werden und sich dann nicht mehr positionieren lässt.

          Gruß aus Fürth in Mittelfranken,
          Samoht

          --
          fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
          1. Hi Samoht,

            wo siehst du bei ihm ein Bild?

            sorry, ich hatte Recht, ich hatte die Frage falsch verstanden. Hatte irrtümmlich gedacht, er spricht von einem Hintergrundbild.

            Die nächste Frage wäre: Könnte man es auch mit einem Hintergrundbild lösen?

            Also angenommen, Du willst einen blauen Hintergrund, der aber zB. 20px nach rechts verschobensein soll. Somit muß man logischerweise auf den linken 20px das sehen, was _hinter_ dem blauen Hintergrund ist. Ist der Bereich zB. weiß, dann kann man ein 20*1 Pixel große weißes png machen, dem den Namen "background.png" geben und dann mit folgender Angabe das Ziel erreichen:

              
            background:rgb(000,000,255) url(background.png) left repeat-y;  
            
            

            mfG

            gooxsy

            1. Gudn!

              Also angenommen, Du willst einen blauen Hintergrund, der aber zB. 20px nach rechts verschobensein soll. Somit muß man logischerweise auf den linken 20px das sehen, was _hinter_ dem blauen Hintergrund ist. Ist der Bereich zB. weiß, dann kann man ein 20*1 Pixel große weißes png machen, dem den Namen "background.png" geben und dann mit folgender Angabe das Ziel erreichen:

              background:rgb(000,000,255) url(background.png) left repeat-y;

                
              und was machst du wenn der rand rundherum sein soll, nicht nur links?  
              und was machst du wenn der hintergrund nicht weiß ist, sondern verschiedenfarbig?  
                
              Gruß aus Fürth in Mittelfranken,  
              Samoht
              
              -- 
              fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
              
        2. [latex]Mae  govannen![/latex]

          Hi Samoht,

          du könntest ein div definieren mit rahmen und der hintergrundfarbe die du am rand haben möchtest und darüber ein anderes div ohne rahmen mit der anderen hintergundfarbe...

          willst Du ihn zum div-Suppen-Produzenten erziehen? :-)

          Wenn ich ein Bild ausrichten möchte, dann wende ich margin, padding, etc. auf das _Bild_ an.

          Im Beispiel des OP gibt es kein Bild.

          Wenn ich ein div ausrichten möchte, dann wende ich margin, padding, etc. auf das _div_ an.

          Nichts davon wirkt auf die Hintergrundfarbe.

          Und für Hintergrundgrafiken gibt es auch ganz tolle CSS-Anweisungen.

          Im Beispiel des OP gibt es kein Hintergrundbild.

          Punkt. Aus.

          Wie stellst du dir das vor? Es geht um eine *Hintergrundfarbe*, die _allseitig_ vom Rand einen Abstand nach Innen haben soll. Ich wüßte nicht, wie das ohne Zusatzelement zu lösen wäre.

          Cü,

          Kai

          --
          When the limos return for their final review, it's all thru'
          - all they can see is the morning goo.
          "There's no-one left alive - must be draw."
          So the Blackcap Barons toss a coin to settle the score.
          ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
          1. Hi Kai,

            Wie stellst du dir das vor? Es geht um eine *Hintergrundfarbe*

            wie ich schon sagte, hatte ich die Frage falsch verstanden und dachte, wir sprechen von einem Hintergrundbild. Und ich werde mich für diese Ungeheuerlichkeit meinerseits selbst mit einer 1-tägigen Bierabstinenz bestrafen! Mea culpa!

            die _allseitig_ vom Rand einen Abstand nach Innen haben soll. Ich wüßte nicht, wie das ohne Zusatzelement zu lösen wäre.

            zB. mit einem entsprechend dicken Border rund um ein Element.

            mfG

            gooxsy

          2. Hallo.

            Im Beispiel des OP gibt es kein Hintergrundbild.

            Wenn das Element eine in Pixeln fest definierte Größe hätte, könnte man aber eines verwenden, und so das zusätzliche Element vermeiden.
            MfG, at

  3. Grüße,
    ich dreh durch! wie faul muss man sein die frage zu stellen eher man die antwort liest?

    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    http://www.sexgott-or-not.com/?test=428054
  4. Hi,
    Erstmal Dankeschön für die vielen Antworten in so kurzer Zeit.
    Wie, kann man den Unterschied der beiden Bilder, die ich mit gepostet habe echt nicht erkennen? Auf dem "richtig Bild" sind für mich eindeutig, jeweils oben,unten,rechts und links 2px Linien mit #FFFFFF zu sehen - aber gut hab ich halt zu gute Augen :p..
    Also wie vermutet geht das nicht so einfach mit CSS über die background-position, da dies nur für background-images gilt, oder wie? Muss ich das also mit einem div oder anders lösen - jedenfalls mit der background-position bei einer background-color tut sich nichts..

    1. Gudn!

      Wie, kann man den Unterschied der beiden Bilder, die ich mit gepostet habe echt nicht erkennen? Auf dem "richtig Bild" sind für mich eindeutig, jeweils oben,unten,rechts und links 2px Linien mit #FFFFFF zu sehen - aber gut hab ich halt zu gute Augen :p..

      Meine Augen sind zwar auch ganz "ok", aber ich sitze gerade an einem etwas betagten Laptop mit wenig Kontrast und sehr viel Umgebungslicht. Selbst den Rahmen hab ich kaum gesehen ;)

      Also wie vermutet geht das nicht so einfach mit CSS über die background-position, da dies nur für background-images gilt, oder wie? Muss ich das also mit einem div oder anders lösen - jedenfalls mit der background-position bei einer background-color tut sich nichts..

      Richtig

      Gruß aus Fürth in Mittelfranken,
      Samoht

      --
      fl:| br:> va:) ls:< n4:( ss:) de:] js:| mo:}
  5. Hi,

    So sieht mein Bild bisher aus:
    http://img225.imageshack.us/img225/4419/falschnb5.jpg

    Und so soll es mal aussehen, wenn es fertig ist:
    http://img513.imageshack.us/img513/6868/richtigas5.jpg

    Ich sehe auf beiden nur etwas roten Text auf hellgrauem Hintergrund, mit etwas dunklerem Rahmen.

    Kann mir jemand mal einen Tip geben, wie ich das hin bekomme??

    Wenn du mal verstaendlich beschreibst, *was* - dann vielleicht ...

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."