2x background möglich?

[Olaf]

Hallo zusammen

Ich möchte gerne meinem "Bildwechsel" einen Rahmen verpassen. Auf meiner Testseite: Klick zeigt das erste Fotoden "Bilderwechsel" und darunter ist in einem Rahmen gefasst (da soll natürlich der Bildwechsel auch funktionieren).

Ich habe mich da vorerst an meinen Monatsbildern orientiert und der Einfachheit halber vorerst den Rahmen genutzt.

Nun wird ja beim Bilderwechsel sowie bei den Monatsbildern mit "background" gearbeitet:

CSS bei "Monatsbildern":

UL.month LI.januar {
	background: url(../images/bgjanuar.gif)
}
UL.month LI.februar {
	background: url(../images/bgfebruar.gif)
.
.
.
}

CSS bei Bilderwechsel:

#wechsel-runde a {
    background: url(../images/travel/travel01-runde-colored.jpg) no-repeat;
    display:block; width:220px; /* Linkbereich begrenzen */
  }
  #wechsel-runde img {
    display:block; width:220px; height:146px; border:0;
  }
  #wechsel-runde a:hover img {
    visibility: hidden;
  }
  #wechsel-runde a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel-runde a {
    margin-right:1px;
  }
  * html #wechsel-runde a:hover {
    width:220px; margin-right:0; /* Workaround fuer IE 5.01 */
  }

Meine Frage ist, wie kann ich das jetzt miteinander verbinden, oder geht das nicht so wie ich es mir vorstelle?

[lig_80]

1. Ich verstehe nicht wirklich worum es geht

2. Einem Element 2 verschiedene BG-Bilder zuzuweisen ist – noch – nicht ohne weiteres möglich.

3. In der Regel nutzt man ein zweites Element dem man dann einen der beiden BG zuweist, oft ein leeres DIV oder ein SPAN-Element.

Wenn du das ein bisschen verständlicher ausformulierst, WAS du erreichen willst, und wozu du zwei BGs haben willst, wird es sicher einfacher.

[Wishu]

Der Bildwechsel, welchen er hat, wird per CSS realisiert. Dazu ist ein background nötig.
Ebenso seine Liste wird mit einem Background gelöst.
Er fragt jetzt, wie er das am besten verbinden kann.

Ich frage mich eher wo das Problem ist. Einfach den Bildwechsel dort einfügen, wo bisher ein Bild ohne Wechsel ist.

[lig_80]

ah, ok… das ist dann allerdings kein Problem. Wahrscheinlich bin ich einfach nur von einer komplexeren Problematik ausgegangen

[Olaf]

Zitat:

Zitat von lig_80 Wahrscheinlich bin ich einfach nur von einer komplexeren Problematik ausgegangen

Jau, die schwierigen Sachen packe ich erst gar nicht an

Zitat:

Zitat von Wishu Ich frage mich eher wo das Problem ist. Einfach den Bildwechsel dort einfügen, wo bisher ein Bild ohne Wechsel ist.

Hm, da stehe ich auf dem Schlauch

Ich habe das ja darein gepackt:

<LI class=januar><a href="runde.htm" title="Vogelinsel Runde"  alt="Vogelinsel Runde"><img src="images/travel/travel01-runde-sw.jpg"></a></LI>

Aber ich müsste ja irgendwie die id="wechsel-runde" dort mitgeben und nun weiß ich nicht wo ich das einfügen muss?


Der Quelltext vom erste Foto wo der Bilderwechsel ohne Rahmen klappt sieht ja so aus:

<p id="wechsel-runde"> 
 <a href="runde.htm" title="Vogelinsel Runde"><img src="images/travel/travel01-runde-sw.jpg" alt="Vogelinsel Runde"></a>
</p

[Wishu]

Hast du dir den Bildwechsel mal richtig angesehen? Wozu den Absatz? Du gibst dem Link einen Hintergrund. Setzt diesen auf Block, gibst ihm die Größe des Bildes und blendest bei Hover das <img> aus, welches sich im Link befindet. Du brauchst kein zusätzliches Markup.

Das hier ist der Code von meinen Twittervogel auf WishuLoad:

<a href="http://twitter.com/WishuLoad" target="_blank" title="Folge WishuLoad auf Twitter" id="twitter">
  <img src="/img/twitter.png" alt="Folge WishuLoad auf Twitter" width="64" height="64" />
</a> 

Da ist kein Absatz nötig, das läuft komplett über <a> und <img>

Gruß
Wishu

[Olaf]

Hi Wishu,

so wie Du das machst hatte ich es zunächst für meine Hintergrundrahmen versucht, aber dann funktioniert der Bilderwechsel bei mir gar nicht mehr. Ich habe das mit den Rahmen zur besseren Fehlersuche einmal weggelassen: Klick hier

Ich kann da keinen Unterschied zu Deinem Code entdecken:

<a href="runde.htm" title="Vogelinsel Runde" id="wechsel-runde">
   <img src="http://website-forum.info/images/travel/travel01-runde-sw.jpg" alt="Vogelinsel Runde">
</a>

Kann dann ja nur am CSS liegen, aber hier finde ich auch keinen Grund warum der Bilderwechsel dann so bei mir nicht funktioniert?

CSS:

#wechsel-runde a {
    background: url(../images/travel/travel01-runde-colored.jpg) no-repeat;
    display:block; width:220px; /* Linkbereich begrenzen */
  }
  #wechsel-runde img {
    display:block; width:220px; height:146px; border:0;
  }
  #wechsel-runde a:hover img {
    visibility: hidden;
  }
  #wechsel-runde a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel-runde a {
    margin-right:1px;
  }
  * html #wechsel-runde a:hover {
    width:220px; margin-right:0; /* Workaround fuer IE 5.01 */
  }

Edit (nochmal nachgedacht ):
Vermutlich liegt es doch daran, dass "id=wechsel-runde" nun nicht mehr für "img" greift, aber im Quelltext "img src=...." noch einmal "id=wechsel-runde" einfügen funktioniert auch nicht. Wie löse ich das den am besten?

[Wishu]

So wie du auf deiner Testseite den HTML-Code hast, ist es schon richtig. Nur sprichst du es im CSS falsch an. Der Code müsste so aussehen:

#wechsel-runde {
    background: url(./images/travel/travel01-runde-colored.jpg) no-repeat;
    display:block; width:220px; /* Linkbereich begrenzen */
  }
  #wechsel-runde img {
    border:0;
  }
  #wechsel-runde:hover img {
    visibility: hidden;
  }
  #wechsel-runde:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel-runde {
    margin-right:1px;
  }
  * html #wechsel-runde:hover {
    width:220px; margin-right:0; /* Workaround fuer IE 5.01 */
  }

So wird das <a id="wechsel-runde"> angesprochen. Vorher wurde ein <a> in einem Element namens "wechsel-runde" angesprochen.
Vielleicht solltest du dir die Grundlagen von CSS noch einmal ansehen Wenn du dein a im CSS behalten willst, pack es direkt vor #wechsel-runde. Also a#wechsel-runde ohne Leerzeichen

Gruß
Wishu

[Olaf]

Hallo Wishu,
danke Dir erneut für die Hilfe! Wenn ich das Bild nun in die Liste einfüge, kommt es zu einem Versatz den ich mir im Augenblick nicht erklären kann: Klick

Im dritten Bild habe ich id="wechsel-runde" weggelassen, natürlich funktioniert der Bilderwechsel dann nicht mehr, aber der Versatz ist dann auch nicht mehr da.

Was mir noch aufgefallen ist, dass die beiden Bilder im "Januar-Rahmen"eine leichte Unschärfe bekommen haben, die im Vergleich zum ersten Bild (ohne Rahmen) nicht vorhanden ist.

Vermutlich gibt es in älteren Browsern noch ganz andere Probleme. Mein Browser im PSPad-Editor zeigt sogar einen Versatzt zwischen den Schwarz-Weiß- und Farbbild an.
Ich glaube ich sollte das mit den Rahmen einfach weglassen, da das ganze doch eher Probleme bereitet

P.S.
Mit dem CSS hast Du recht und werde mir das noch einmal mit den Selektoren an lesen

[Wishu]

Hallo Olaf!

Die Unschärfe kommt von der Skalierung: 220px × 146px (skaliert auf 220px × 147px)

Der Versatz durch das Blockelement. Dieses wird von text-align:center nicht erfasst. Dazu einfach das Blockelement mit margin:auto; zentrieren:

a#wechsel-runde {
    background: url(../images/travel/travel01-runde-colored.jpg) no-repeat;
    display:block; margin:auto; width:220px; /* Linkbereich begrenzen */
  }

Jetzt sollte es dann eigentlich ohne Probleme klappen

Gruß
Wishu