Shadowcrow: Hintergrundgrafik

hi $name,

ich bin gerade dabei meine seite zu gestalten und habe eine frage: um eine grafik zu platzieren, die nur der optischen gestaltung dient (dieses L förmige ding, rechts unter dem text), wollte ich diese als hintergrund-grafik einbinden. leider finde ich keine andere möglichkeit als diese in ein (leeres) div oder span zu packen, es müßte doch eine "elegantere/bessere/richtigere" lösung geben?

oder doch ganz "normal" als IMG einbinden? aber sagte mal nicht jmd. das bilder die nur der verschönerung dienen als hintergrundbilder besser aufgehoben sind?

HTML

  
 <div id="inhalt">  
 <h1>text</h1>  
<br/>  
<p>  
blablablub  
</p>  
<p>  
blablablub  
</p>  
<p>  
blablablub  
<span class="bg">&nbsp;</span>  
</p>  
  </div>  

und hier das CSS

  
#inhalt {  
height: 430px;  
min-width: 400px;  
  margin:20px 20px 20px 20px;  
  padding:20px 20px 20px 400px;  
  top: 50%;  
  left: 50%;  
  text-align:left;  
background-image : url(../pics/bg.gif);  
background-repeat : no-repeat;  
}  
.bg {  
background-image : url(../pics/vorlagen/div_bg.png);  
background-repeat : no-repeat;  
float:right;  
margin: -70px 0px 0 0;  
width: 90px;  
height:90px;  
}  

danke schonmal :-))

gruss
shadow

p.s.
fast vergessen
http://shadow-weaver.de

--
Programmers don´t die, they GOSUB without RETURN.
Quelle: unbekannt
  1. Hi,

    um eine grafik zu platzieren, die nur der optischen gestaltung dient (dieses L förmige ding, rechts unter dem text), wollte ich diese als hintergrund-grafik einbinden.

    Ich sehe kein L-foermiges Ding auf der angegebenen Seite.

    MfG ChrisB

    1. hi $name,

      Ich sehe kein L-foermiges Ding auf der angegebenen Seite.

      uuups, das ist mir seit zwei jahren nicht mehr passiert: zu blöd die grafik auf den server zu spielen, sry :-(

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
  2. hi Shadowcrow,

    oder doch ganz "normal" als IMG einbinden? aber sagte mal nicht jmd. das bilder die nur der verschönerung dienen als hintergrundbilder besser aufgehoben sind?

    Das ja. Du könntest doch dem <p>, in dem das Bild ist eine Klasse geben und das Bild für das <p> als Hintergrund definieren.
    nur mal so ne Idee.

    Grüße aus H im R an Shadowcrow,
    Primus Enginus

    1. hi Engin,

      Das ja. Du könntest doch dem <p>, in dem das Bild ist eine Klasse geben und das Bild für das <p> als Hintergrund definieren.
      nur mal so ne Idee.

      war eine meiner ersten, geht leider nicht da das bild links oben ausgerichtet wird und sämtliche angaben (margin, padding sich ja auf die gesamte klasse beziehen)

      gruss von der Krähe an Engin

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
      1. hi Shadowcrow,

        war eine meiner ersten, geht leider nicht da das bild links oben ausgerichtet wird und sämtliche angaben (margin, padding sich ja auf die gesamte klasse beziehen)

        Dafür gibt es doch background-position, eine Angabe wie bottom right sollte es tun, oder umgekehrt right bottom, ich kann mir das bei dieser background Geschichte einfach nicht merken.  :)

        Grüße aus H im R an Shadowcrow,
        Primus Enginus

        1. hi $name,

          Dafür gibt es doch background-position, eine Angabe wie bottom right sollte es tun, oder umgekehrt right bottom, ich kann mir das bei dieser background Geschichte einfach nicht merken.  :)

          hmmm, hörte sich sehr gut an, funzt aber nicht, da das bild größer ist als der text absatz und ich diesen nicht weiter vergrößern kann (darunter sollte dann noch ein anderer stehen).

          aber danke das wußte ich nicht, dachte immer das ich die position eines bg elementes -außer mit "normaler" ausrichtung- nicht weiter beeinflussen kann.

          Primus Enginus

          er erkläre mir das bitte *zwinker*

          gruss
          shadow

          --
          Programmers don´t die, they GOSUB without RETURN.
          Quelle: unbekannt
          1. hi Shadowcrow,

            hmmm, hörte sich sehr gut an, funzt aber nicht, da das bild größer ist als der text absatz und ich diesen nicht weiter vergrößern kann (darunter sollte dann noch ein anderer stehen).

            Da wüsste ich dann auch nicht weiter, wobei, ein so kleines Bildchen ist dir verziehen, lass ihn drin.  :)

            Primus Enginus
            er erkläre mir das bitte *zwinker*

            Ich wusste es auch nicht, Struppi hat die Antwort.
            Manchmal bin ich auch Primus Maximus Enginus, der Majest'ästh'etische Styler. *G

            Grüße aus H im R an Shadowcrow,
            Primus Enginus

          2. Hi,

            Dafür gibt es doch background-position, eine Angabe wie bottom right sollte es tun, oder umgekehrt right bottom, ich kann mir das bei dieser background Geschichte einfach nicht merken.  :)

            hmmm, hörte sich sehr gut an, funzt aber nicht, da das bild größer ist als der text absatz und ich diesen nicht weiter vergrößern kann (darunter sollte dann noch ein anderer stehen).

            Aber die Absaetze bilden einen zusammengehoerigen Teil des Inhalts, also waere es auf jeden Fall nicht verkehrt, wenn sie durch ein Div gruppiert wuerden - und dieses koennte dann das Hintergrundbild bekommen.
            Allemal sinnvoller, als ein leeres Span-Element, welches dann "kuenstlich" auf eine bestimmte Groesse aufgeblasen und positioniert werden muss, moechte ich meinen.

            aber danke das wußte ich nicht, dachte immer das ich die position eines bg elementes -außer mit "normaler" ausrichtung- nicht weiter beeinflussen kann.

            Hm, die gaengigen CSS-Eigenschaften sollte man aber eigentlich kennen, wenn man Webdesign anbietet, oder nicht?

            Und Sachen wie <br> hinter der Ueberschrift, vermutlich um einen Abstand zu erzeugen, "gehoeren" sich auch nicht - fuer Abstaende gibt's margin und padding.

            MfG ChrisB

            1. hi $name,

              Aber die Absaetze bilden einen zusammengehoerigen Teil des Inhalts, also waere es auf jeden Fall nicht verkehrt, wenn sie durch ein Div gruppiert wuerden - und dieses koennte dann das Hintergrundbild bekommen.
              Allemal sinnvoller, als ein leeres Span-Element, welches dann "kuenstlich" auf eine bestimmte Groesse aufgeblasen und positioniert werden muss, moechte ich meinen.

              jaaa, aber des div in dem mein inhalt steckt, hat doch schon ein bg bild :-) sonst würd ich ja nicht jammern :-)

              Hm, die gaengigen CSS-Eigenschaften sollte man aber eigentlich kennen, wenn man Webdesign anbietet, oder nicht?

              ich bin halt ergebnisorientiert ;-) was andere für den 3x preis anbieten, kann ich billiger und besser, und ich hab jetzt drei aufträge -aufräumen- ich hätte mich ja nie getraut DIESE preise zu nehmen. und ja, ich kenne meine defiziete, hab trotzdem kunden, die wissen das, fair ist fair.

              Und Sachen wie <br> hinter der Ueberschrift, vermutlich um einen Abstand zu erzeugen, "gehoeren" sich auch nicht - fuer Abstaende gibt's margin und padding.

              hast recht, war ein "schnellschuss" von mir, ich hab noch so meine probleme.

              p.s. an alle -die es nicht interessiert- auf einer anderen site sind alle spacer.gif verschwunden (nach anschauen im 8er), der ja mit dem "normalen" stylesheet auch nicht wirklich was anzufangen weiß *soifz*, dafür macht der 5.5er nicht mehr mit? spacer oder Cholera?

              gruss
              shadow

              --
              Programmers don´t die, they GOSUB without RETURN.
              Quelle: unbekannt
              1. Hi,

                jaaa, aber des div in dem mein inhalt steckt, hat doch schon ein bg bild

                Von dem rede ich ja nicht - sondern davon, um die Textabsaetze im Inhaltsbereich ein zusaetzliches drumherum zu legen - die damit zu gruppieren, waere sinnvoller, als ein leeres Span einfach nur so einzufuegen.

                MfG ChrisB

                1. hi $name,

                  Hi,

                  jaaa, aber des div in dem mein inhalt steckt, hat doch schon ein bg bild

                  Von dem rede ich ja nicht - sondern davon, um die Textabsaetze im Inhaltsbereich ein zusaetzliches drumherum zu legen - die damit zu gruppieren, waere sinnvoller, als ein leeres Span einfach nur so einzufuegen.

                  aso, hatte ich auch im kopf, aber nachdem ich er hier soviel über "div suppe" gelesn habe, hab ich mich nicht getraut.

                  shadow

                  --
                  Programmers don´t die, they GOSUB without RETURN.
                  Quelle: unbekannt
  3. Liebe(r) Shadowcrow,

    wenn Du ein Hingergrundbild in dieser Größe einsetzen möchtest, dann solltest Du auch ein entsprechendes Elternelement haben, das von den Ausmaßen her das vollständige Anzeigen Deines Hintergrundbildes garantiert. Ich denke da an entweder das <body>-Element oder ein "Wrapper-Div".

    Auf http://shadow-weaver.de/ sehe ich folgendes optisches Prinzip: Inhalt in einer vom Hintergrundbild vorgegebenen "Box", darunter die globale Navigation mit "Home", "Links" und "Impressum". Hier ist der Inhalt vielleicht manchmal "zu dünn", um genügend Höhe für das komplette "L-förmige" Hintergrundbild zu bieten, daher würde ich das Hintergrundbild dem Body geben.

    Das Ganze könnte so aufgebaut werden:

    <html>  
        <head>...</head>  
        <body>  
            <div id="inhalt">  
                <h1>Webdesign</h1>  
                <p>Für einen Schauspieler ...</p>  
            </div>  
            <div id="Navigation">  
                <h2>Navigation</h2>  
                <ul>  
                    <li><a href="index.php">Home</a></li>  
                    <li><a href="links.php">Links</a></li>  
                    <li><a href="impressum.php">Impressum</a></li>  
                </ul>  
            </div>  
        </body>  
    </html>
    

    CSS (nur, was ich verändert habe):

    body {  
        background: #d5d7cc url(../pics/bg.gif) 20px 54px no-repeat;  
    }  
      
    h1 {  
        margin-bottom: 2.5em;  
    }  
      
    #inhalt {  
        margin:54px 20px 20px 20px;  
        padding:20px 20px 20px 400px;  
        text-align:left;  
        background: url(../pics/vorlagen/div_bg.png) right bottom no-repeat;  
        height: 400px;  
        overflow: auto;  
    }  
      
    /*CSS für navigation. */  
    #Navigation {  
        position: absolute;  
        top: 514px;  
        left: 0px;  
        width: 100%;  
    }  
      
    #Navigation h2 {  
        display: none;  
    }  
      
    #Navigation ul {  
        text-align: center;  
        margin: 0 auto;  
        padding: 30px 0 0 0;  
    }  
      
    #Navigation ul li {  
        list-style: none;  
        display: inline;  
        margin: 20px; padding: 0;  
    }  
      
    #Navigation ul a,  
    #Navigation ul span {  
        text-decoration: none;  
        font-weight: bold;  
        color: #6c6e58;  
    }  
      
    * html #Navigation ul a,  
    * html #Navigation ul span {  
        width: 1em;    /* nur fuer IE 5.0x erforderlich */  
    }  
      
    #Navigation ul a:visited, #Navigation ul span {  
        color: #62554d;  
    }  
      
    #Navigation ul a:hover, #Navigation ul span {  
        color: #a89f76;  
    }  
    
    

    Das sollte Deinen Vorstellungen in etwa entsprechen.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. hi Felix,

      Das sollte Deinen Vorstellungen in etwa entsprechen.

      danke, werd ich heute abend testen, liest sich aber sehr gut an....

      ich hab immer mehr den eindruck, das CSS und ich nicht füreinander geschaffen wurden :-(

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
  4. Hallo Shadowcrow!

    ...weil ich eben Dein Impressum gelesen habe...
    Wäre möglich, dass wir uns irgendwann über den Weg gelaufen sind, oder?

    Viele Grüße aus Frankfurt/Main,
    Patrick

    --

    _ - jenseits vom delirium - _
    [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
    Nichts ist unmöglich? Doch!
    Heute schon gegökt?
    1. hi Patrick,

      ...weil ich eben Dein Impressum gelesen habe...
      Wäre möglich, dass wir uns irgendwann über den Weg gelaufen sind, oder?

      In dem kleinen vor Örtchen, wäre komisch wenn nicht.  :)

      Grüße aus H im R an Patrick,
      Primus Enginus
      * SCNR

      1. Hallo Engin!

        In dem kleinen vor Örtchen, wäre komisch wenn nicht.  :)

        Geh endlich schlafen!

        * SCNR

        Ebenso ;)

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

        _ - jenseits vom delirium - _
        [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        Nichts ist unmöglich? Doch!
        Heute schon gegökt?
    2. hi $name,

      Hallo Shadowcrow!

      ...weil ich eben Dein Impressum gelesen habe...
      Wäre möglich, dass wir uns irgendwann über den Weg gelaufen sind, oder?

      öhu? möglich? dein name sagt mir aber jetzt spontan nichts.

      gruss
      shadow

      --
      Programmers don´t die, they GOSUB without RETURN.
      Quelle: unbekannt
      1. Hallo Shadowcrow!

        öhu? möglich? dein name sagt mir aber jetzt spontan nichts.

        Dein Name sagt mir auch nichts, aber Frankfurt ist eh ein Dorf, und wenn man schon im selben Stadteil wohnt, ist es durchaus denkbar, dass man sich - ohne sich zu kennen - über den Weg läuft, vielleicht beim Einkaufen an der selben Kasse steht, oder so ;)

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

        _ - jenseits vom delirium - _
        [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        Nichts ist unmöglich? Doch!
        Heute schon gegökt?
        1. hi $name,

          Dein Name sagt mir auch nichts, aber Frankfurt ist eh ein Dorf, und wenn man schon im selben Stadteil wohnt, ist es durchaus denkbar, dass man sich - ohne sich zu kennen - über den Weg läuft, vielleicht beim Einkaufen an der selben Kasse steht, oder so ;)

          *lol* im ostend? nichts ist unmöglich:-))

          gruss
          shadow

          --
          Programmers don´t die, they GOSUB without RETURN.
          Quelle: unbekannt
          1. Hallo Shadowcrow!

            *lol* im ostend? nichts ist unmöglich:-))

            Eben, vielleicht könnte man ein Anstehen an der Kasse provozieren, egal, was ChrisB. jetzt meint ;)

            Viele Grüße aus Frankfurt/Main,
            Patrick

            --

            _ - jenseits vom delirium - _
            [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
            Nichts ist unmöglich? Doch!
            Heute schon gegökt?
            1. Eben, vielleicht könnte man ein Anstehen an der Kasse provozieren, egal, was ChrisB. jetzt meint ;)

              Na super... Ich werd jetzt langsam rot.

              1. hi $name,

                Na super... Ich werd jetzt langsam rot.

                was würdest du machen, wenn wir denn mit unseren einkaufswagen aneinanderbumsen??

                SCNR

                gruss
                shadow

                --
                Programmers don´t die, they GOSUB without RETURN.
                Quelle: unbekannt
                1. [latex]Mae  govannen![/latex]

                  Na super... Ich werd jetzt langsam rot.

                  was würdest du machen, wenn wir denn mit unseren einkaufswagen aneinanderbumsen??

                  Tsss .. kennen sich nocht nicht mal und schon wird ans bumsen gedacht ... koppschüttel

                  SCNR

                  dito

                  Cü,

                  Kai

                  --
                  Some things in life are bad, they can really make you mad
                  Other things just make you swear and curse.
                  When you're chewing on life's gristle, don't grumble, give a whistle
                  And this'll help things turn out for the best...
                  ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
                2. Hallo Shadowcrow!

                  wenn wir denn mit unseren einkaufswagen aneinanderbumsen??

                  Kommt es dann zum Austausch von gekauften Flüssigkeiten?

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --

                  _ - jenseits vom delirium - _
                  [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                  Nichts ist unmöglich? Doch!
                  Heute schon gegökt?
                  1. hi $name,

                    Kommt es dann zum Austausch von gekauften Flüssigkeiten?

                    hmm, kefir?

                    gruss
                    shadow

                    --
                    Programmers don´t die, they GOSUB without RETURN.
                    Quelle: unbekannt
                    1. Hallo Shadowcrow!

                      hmm, kefir?

                      aus der Tube?

                      Viele Grüße aus Frankfurt/Main,
                      Patrick

                      --

                      _ - jenseits vom delirium - _
                      [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                      Nichts ist unmöglich? Doch!
                      Heute schon gegökt?
                  2. Ave Patrick,

                    wenn wir denn mit unseren einkaufswagen aneinanderbumsen??
                    Kommt es dann zum Austausch von gekauften Flüssigkeiten?

                    Eigentlich sollte in so einem Fall ein Gummi oder ähnliches den Aufprall beider Wagen abfangen.

                    Grüße aus H im R an Patrick,
                    Primus Enginus
                                 *SCNR*

                    1. Ave Enginus!

                      wenn wir denn mit unseren einkaufswagen aneinanderbumsen??
                      Kommt es dann zum Austausch von gekauften Flüssigkeiten?
                      Eigentlich sollte in so einem Fall ein Gummi oder ähnliches den Aufprall beider Wagen abfangen.

                      Der Aufprall der Wagen muss ja nicht abgefangen werden... nur die Folgen (crash test gummy)... ;)

                      Viele Grüße aus Frankfurt/Main,
                      Patrick

                      --

                      _ - jenseits vom delirium - _
                      [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                      Nichts ist unmöglich? Doch!
                      Heute schon gegökt?
                      1. Ave Patrick,

                        wenn wir denn mit unseren einkaufswagen aneinanderbumsen??
                        Kommt es dann zum Austausch von gekauften Flüssigkeiten?
                        Eigentlich sollte in so einem Fall ein Gummi oder ähnliches den Aufprall beider Wagen abfangen.
                        Der Aufprall der Wagen muss ja nicht abgefangen werden... nur die Folgen (crash test gummy)... ;)

                        Hab den Satz nicht zu ende gedacht/schrieben, der Gummi am Wagen soll natürlich nur den "Austausch von gekauften Flüssigkeiten" abfangen.   :)

                        Grüße aus H im R an Patrick,
                        Primus Enginus

    3. Hi,

      ...weil ich eben Dein Impressum gelesen habe...
      Wäre möglich, dass wir uns irgendwann über den Weg gelaufen sind, oder?

      • aus der Reihe "billige RL-Anmache ins WW uebertragen" ...

      MfG ChrisB

      1. Hallo ChrisB!

        • aus der Reihe "billige RL-Anmache ins WW uebertragen" ...

        Hehe, hättest Du gerne! Ich mag lieber Elster als Krähen, wobei beide Arten zu den Rabenvögel (Corviden) gehören ;)

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

        _ - jenseits vom delirium - _
        [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
        Nichts ist unmöglich? Doch!
        Heute schon gegökt?