overlapping problem - anfänger
Nimzo
- css
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.
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
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
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
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
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">
mitstyle="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 mittelsdocument.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
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
Das mit dem Bild hat nicht geklappt hier noch mal der Link:
http://yfrog.com/bcbeispielp
genau!
vielen vielen vielen vielen dank
benjamin
Das mit dem Bild hat nicht geklappt hier noch mal der Link:
http://yfrog.com/bcbeispielp
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