overlapping problem - anfänger

[Nimzo]

hallo zusammen,

ich bin bezüglich css totaler anfänger und habe zum üben eine homepage gebastelt.
leider komme ich an einer stelle nicht weiter.

hier meine problemseite

eigentlich sollte das bild, (links) nicht dort sein, sondern in den rahmen eingepasst sein.

ich habe das jetzt schon mit z-index probiert, aber das klappt nicht.

weiss jemand von euch was ich falsch mache, und wie ich es besser machen kann?

vielen dank!!

viele grüsse
benjamin

[Frank123]

Ich verstehe deine Frage nicht ganz könntest du mittels Paint oder nem ähnlichen Werkzeug mal veranschauchlichen wie es aussehen soll?

Prinzipell sollte aber folgendes funktionieren:

  
<div style="width:100px; height:100px; overflow:hidden;">  
<img src="http://www.bmoeller.ch/test/images/test.jpg">  
</div>  

oder das hier:

  
<div style="width:100px; height:100px; background-image:url(http://www.bmoeller.ch/test/images/test.jpg);background-repeat:no-repeat; background-position:-70px -30px;" />  

hoffe das hilft dir. Sonst solltest du einfach mal was in Paint zusammen schneiden damit man sieht wie es aussehen soll.

Gruß

Frank

[Nimzo]

hallo zusammen,

hier nun ein beispiel, wie es aussehen soll.
beim mouseover über den dritten link soll das bild, was jetzt unterhalb der linkliste ist, nach links oben in den rahmen eingepasst werden.

viele grüsse
und danke!

benjamin

Ich verstehe deine Frage nicht ganz könntest du mittels Paint oder nem ähnlichen Werkzeug mal veranschauchlichen wie es aussehen soll?

Prinzipell sollte aber folgendes funktionieren:

<div style="width:100px; height:100px; overflow:hidden;">
<img src="http://www.bmoeller.ch/test/images/test.jpg">
</div>

> oder das hier:  
> ~~~html
  

> <div style="width:100px; height:100px; background-image:url(http://www.bmoeller.ch/test/images/test.jpg);background-repeat:no-repeat; background-position:-70px -30px;" />  
> 

hoffe das hilft dir. Sonst solltest du einfach mal was in Paint zusammen schneiden damit man sieht wie es aussehen soll.

Gruß

Frank

[Frank123]

Die einfachste Variante ist es du packst das bild einfach noch mal in den DIV:
<div id="content"> und gibst beiden Bildern eine eigene ID. Wobei das im <div id="content"> mit style="visibility:hidden;" vorbelegt sein sollte.

Wenn onmouseover ausgeführt wird gibst dem sagst du dem Bild rechts mittels document.getElementById('deineIdRechts').style.visibiity = 'hidden'; das es verschwinden soll und dem linken Bild mittels document.getElementById('deineIdLinks').style.visibiity = 'visible'; das es auf tauchen soll.

Man kann alternativ auch mit style="display:none" arbeiten. Dann wird auch kein Platz verbraucht. Mit style="visibiltiy:collapse" funktioniert das auch, Nachteil ist aber das noch ein klein bischen Platz verbraucht wird.

Hoffe das hilft

Gruß

Frank

[Nimzo]

Hallo Frank,
vielen Dank für Deine schnelle Antwort.

hihi, ich hab´s zwar nicht verstanden, probiere das aber heute abend mal aus.
Nur um sicher zu gehen, dass ich meinen "Wunsch" richtig erklärt habe.
In der Menüspalte ganz links soll kein bild sein - nie.
Lediglich beim Mousover soll ein hinterlegtes bild im grossen rahmen erscheinen.

Viele Grüsse
Benjamin

Die einfachste Variante ist es du packst das bild einfach noch mal in den DIV:
<div id="content"> und gibst beiden Bildern eine eigene ID. Wobei das im <div id="content"> mit style="visibility:hidden;" vorbelegt sein sollte.

Wenn onmouseover ausgeführt wird gibst dem sagst du dem Bild rechts mittels document.getElementById('deineIdRechts').style.visibiity = 'hidden'; das es verschwinden soll und dem linken Bild mittels document.getElementById('deineIdLinks').style.visibiity = 'visible'; das es auf tauchen soll.

Man kann alternativ auch mit style="display:none" arbeiten. Dann wird auch kein Platz verbraucht. Mit style="visibiltiy:collapse" funktioniert das auch, Nachteil ist aber das noch ein klein bischen Platz verbraucht wird.

Hoffe das hilft

Gruß

Frank

[Frank123]

Ok, das ist bislang nicht so ganz durch gedrungen. Dann hast du das Bild aber auch völlig falsch positioniert.
So soll es dann aussehen?

Du hast ein Element das heisst <div id="content"> und hier muss das IMG-Objekt rein. Da wäre es richtig untergebracht.
Ich würde das ganze dann so aufbauen:

  
<div id="content">  
    <div id="imageContainer">  
         <img src="../images/test.jpg" style="visibility:hidden" />  
    </div>  
</div>  

Im Menü musst du dann noch die Aktionen onmouseover und onmouseout einbauen das könnte dann so aussehen:

  
<li>  
   <div onmouseover="document.getElementById('imageContainer').style.visibility = visible;" onmouseoout="document.getElementById('imageContainer').style.visibility = hidden;">testgallerie 10/09<div>  
</li>  

Gruß

Frank

[Frank123]

Das mit dem Bild hat nicht geklappt hier noch mal der Link:
http://yfrog.com/bcbeispielp

[Nimzo]

genau!

vielen vielen vielen vielen dank
benjamin

Das mit dem Bild hat nicht geklappt hier noch mal der Link:
http://yfrog.com/bcbeispielp

[Nimzo]

so, jetzt hab ich da smal gemacht, funktonieren gut aber nix :)
ich stelle mich echt doof an, sorry!
kann das mit meiner css zusammen hängen?~~~css

.thumbnail span{ /CSS for enlarged image/
position: absolute;
top: 71px;
right : 500px;
width:750px;
height: 500px;
visibility: visible;
color: #ffffff;
text-decoration: none;
z-index: 50;
}
.thumbnail span img{ /CSS for enlarged image/
border-width: 0;
padding: 0px;
position: absolute;
z-index: 50;
}
.thumbnail:hover span{ /CSS for enlarged image on hover/
visibility: visible;
background: #000000;
top: 71px;
left : -600px;
position: absolute;
width:750px;
height: 500px;
padding: -1px;
margin: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

  
oder mache ich noch was anderes falsch?  
  
gruss und vielen vielen dank  
benjamin