Newbie: Hintergrundbild auf dem man schreiben kann

SELF-Forum

Hintergrundbild auf dem man schreiben kann

Newbie
– Informationen zu den Bewertungsregeln

Guten Tag liebes selfhtml-forum,

ich bin neu in der Webseitenerstellung habe also nur geringe Vorkenntnisse in Css. Ich habe meine Website mit Html und Css erstellt (ohne Frames) und brauche Hilfe bei meiner linken Navigation. Nun möchte ich für die Links in meiner Navigation ein Hintergrundbild einsetzen das ich erstellt habe. Und zwar so: es kommt drauf an wo man sich befindet, bei news hinter news das Bild setzen bei Impressum nur bei Impressum. Jemand hat mir gesagt ich müsste zuerst die einzelnen links in div setzen. Dies hab ich auch gemacht aber div background="...png" <a href...</a></div> klappt nicht. Die Maße des Bildes sind width="150px" height="21px". Also nochmal zusammengefasst auf der Webseite soll die Navigation so dargestellt werden das wenn ich auf der Seite News bin der link News mit einem Hintergrundbild versehen ist der somit verdeutlicht das ich auf News bin. Wenn ich auf Impressum bin soll der Link Impressum (natürlich von ganz links nach ganz rechts der navi) mit einem Hintergrundbild sein.

Vielen Dank :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrundbild auf dem man schreiben kann

    bleicher Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Grüße,
    dann erzeuge klasse .active
    und weise die jeweils dem aktuellen menüpunkt zu - svon deirner beschriebung her hast du eh für jede sseite eigene datei.
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrundbild auf dem man schreiben kann

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@bleicher:

      nuqneH

      dann erzeuge klasse .active
      und weise die jeweils dem aktuellen menüpunkt zu

      Eine solche Klasse sollte nicht erforderlich sein, wenn man’s richtig macht.

      Und schon gar nicht sollte man sie 'active' nennen, da besteht Verwechslungsgefahr mit der Pseudoklasse :active, die etwas ganz anderes tut.

      Wenn’s denn unbedingt sein muss, eher sowas wie 'selected'. Aber wie gesagt, es muss nicht sein.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Hintergrundbild auf dem man schreiben kann

    Marc Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Newbie,

    Guten Tag liebes selfhtml-forum,

    ich bin neu in der Webseitenerstellung habe also nur geringe Vorkenntnisse in Css.

    Ein paar sind aber nötig. Mein Tipp: wenn Du die Seiten per Hand erstellst, also lauter einzelne HTML-Dokumente hast, dann schreib in den öffnenden body-Tag eine ID, die der Seite entspricht.

    Also zum Beispiel

    <body id="news">

    Dann kannst Du mit dem Nachfahren-Selektor arbeiten!

    Was ein Nachfahren-Selektor ist, verrät Dir SelfHTML :-)

    Vielen Dank :)

    Bitte sehr, ich hoffe, das hilft.

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Hintergrundbild auf dem man schreiben kann

    Gunnar Bittersmann Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    @@Newbie:

    nuqneH

    Und zwar so: es kommt drauf an wo man sich befindet, bei news hinter news das Bild setzen bei Impressum nur bei Impressum.

    Du willst also die jeweils aktuelle Seite im Menü hervorheben?

    Jemand hat mir gesagt ich müsste zuerst die einzelnen links in div setzen.

    Wann immer dir jemand sagt „mach mal’n 'div' drum“, glaub ihm kein Wort! Es zeugt davon, dass derjenige wenig Ahnung hat.

    Die Links in Menü wären per CSS auch ansprchbar, wenn gar nichts drumrum ist:

    <a href="foo.html">foo</a>  
<a href="bar.html">bar</a>  
<a href="baz.html">baz</a>

    nämlich per Attributselektor, bspw. 'a[href="foo.html"]'.

    Und wenn was drumrum sollte, dann 'li', denn ein Menü ist eine _Liste_ von Links:

    <ul>  
  <li><a href="foo.html">foo</a></li>  
  <li><a href="bar.html">bar</a></li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

    Aber halt! Die aktuelle Seite sollte im Menu nicht verlinkt sein! (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

    Auf der Seite foo.html könnte das Menü dann so aussehen:

    <ul>  
  <li>foo</li>  
  <li><a href="bar.html">bar</a></li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

    Auf der Seite bar.html so:

    <ul>  
  <li><a href="foo.html">foo</a></li>  
  <li>bar</li>  
  <li><a href="baz.html">baz</a></li>  
</ul>

    Wenn du die 'li'-Elemente einzeln ansprechen möchtest, bietet es sich an, ihnen IDs zu geben (und der Navigationsliste auch eine):

    <ul id="nav">  
  <li id="foo">foo</li>  
  <li id="bar"><a href="bar.html">bar</a></li>  
  <li id="baz"><a href="baz.html">baz</a></li>  
</ul>

    Im Stylesheet gibst du dann die Hintergrundbilder an:

    #nav  
{  
  list-style: none;  
  padding-left: 0;  
}  
  
#nav li  
{  
  height: 21px;  
  margin-left: 0;  
  padding-left: 0;  
  width: 150px;  
}  
  
#foo { background: url(foo.png) }  
  
#bar { background: url(bar.png) }  
  
#baz { background: url(baz.png) }

    Die Menüpunkte außer dem der aktuellen Seite sollen kein Hintergrundbild haben? Kein Problem, darin befinden sich ja 'a'-Elemente, denen man einen anderen Hintergrund (bspw. eine Farbe) geben kann, der den Hintergrund der 'li'-Elemente überdeckt:

    #nav a  
{  
  background: #042;  
  display: block;  
}

    Auch ein Hover-Effekt wäre denkbar: Beim Überfahren eines Menüpunkts erscheint das betreffende Hintergrundbild. Dazu die obigen Zeilen abändern:

    #foo, #foo a:hover { background: url(foo.png) }  
  
#bar, #bar a:hover { background: url(bar.png) }  
  
#baz, #baz a:hover { background: url(baz.png) }

    Der Weisheit letzter Schluss ist das aber immer noch nicht, denn die Hintergrundbilder sollten in _einer_ Grafikdatei (CSS-Sprites) zusammengefasst sein:

    #nav li, #nav a:hover { background: url(foobarbaz.png) }  
  
#foo, #foo a:hover { background-position: 0 0 }  
  
#bar, #bar a:hover { background-position: 0 21px }  
  
#baz, #baz a:hover { background-position: 0 42px }

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln