Bildergalerie Bild mit overflow rechts rauskucken lassen

[hasi87]

Hallo erstmal.

Ich benutze ein relativ einfaches Script als Bildergalerie.

Dieses:

Code: Alles auswählen

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid black;
margin: 0 5px 5px 10px;
}

.thumbnail:hover{
    background-color: #D6D6D6;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
position: relative;
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
position: absolute;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>


#main {
    position: absolute;
    top: 0px;
    left: 168px;
    width: 857px;
    background: url(../img/background.gif) repeat-y;
}

#footer {
    background-color: #666;
}

.clear             { clear:both; }

#navigation {
    background-color: #660000;
    width: 800px;
    height: 30px;
    float: right;
    margin-top: 13px;
}

#navigation ul li {
        display: inline;
        top: 0px;
        float: right;
        }
   
#navigation ul li a {
        font: Verdana, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        text-transform: none;
        padding: 5px 8px;
        text-decoration: none;
        }
   
#navigation ul li.home a {
        background: #520000;
        -moz-border-radius: 10px;       
        -khtml-border-radius: 10px;               
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
   
#navigation ul li a:hover {
        text-shadow: 1px 1px 1px #520000;
        background: #520000;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: inset 0px 0px 2px #2c0306;
        -khtml-box-shadow: inset 0px 0px 2px #2c0306;
        -webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/
        box-shadow: inset 0px 0px 2px #2c0306;
        color: #f6f6ee;
    }


Eingebettet ist das ganze in Menü3 bei mir:

Code: Alles auswählen

#menue3 {
    position: absolute;
    width: 560px;
    height: 422px;
    margin-bottom: 1px;
    margin-left: 3px;
    border-width: 1px;
    border-color: #000;
    border-style: solid;
    background: transparent url(../image/menuekartenblatt.gif) repeat-y;
    overflow-y: scroll;
    overflow-x: visible;
    }

Die Galierie zeigt links mehrere Bilder und rechts eine Vergrößerung des Bildes mit hover eben, also so lange man mit der Maus drüberfährt.

Ich habe mit overflow-y einen vertikalen Scrollbalken erzwungen was ja auch beabsichtigt ist.
Nur will ich das das Bild das aufpoppt rechts eben aus dem menue3 ausbricht, quasi drübergeht über seine Grenze, da es ansonsten zu einem horizontalen Scrollbalken kommt, und den will ich ja nicht.
Das Bild soll das div quasi überlappen.
Setze ich aber overflow: visible unter die scroll anweisung ist der vertikale Scrollbalken leider auch weg.

Ich kann euch leider kein Beispiel zeigen weil ich an der Page bastle und sie noch nicht online ist.

Ich hoffe ihr wisst was ich meine und könnt mir helfen.

danke.

mfg,

hasi87.

[hasi87]

Sorry konnte Thema nicht editieren. Zumindest hab ich nix gefunden.

Hab euch ein Bild von meinem Problem gemacht.

Das Bild erscheint rechts beim Mouseover es soll aber über das weiße Blatt hinausgehen, also ausbrechen und nicht einen horizontalen Scrollbalken erzwingen.

[hasi87]

Wieder nicht geklappt.

Sorry Admins könnt ihr den obigen Beitrag vielleicht entfernen.

So ich geb euch den Link zu dem Bild mit der Gallerie.

Nochmals entschuldigung für die 2 Posts.

http://img829.imageshack.us/i/galerie.jpg/

[sejuma]

Das ist ohne einen Link zur kompletten Seite mit HTML-Quelltext und Fotos schwer zu beurteilen.
Abstrakt würde ich sagen, dass du das große Hoverbild absolut zu der relativ positionierten Box positionieren musst. Dazu ist es evtl. erforderlich, einige bisherige Positionierungen zu entfernen.

Der #main muss sicher nicht absolut positioniert sein. Den kannst du auch mit normalen margin-Angaben an die gewünschte Stelle bringen oder evtl. zentrieren wie hier beschrieben: http://www.ohne-css.gehts-gar.net/0001.php.

.thumbnail span hat visibility: hidden. Also ist auch hier m.E. die absolute Positionierung mit der left-Angabe unnötig.

Aber wie gesagt: Besorge dir Free-Webspace zum Testen und lade alles mal hoch.

[hasi87]

Ok. Ja ich habs mal auf CW City hochgeladen damit ihr euch ein besseres Bild machen könnt.

Ich bekomm das Hoverbild immer noch nicht aus dem weißen Blatt raus....Laut CSS ist der Container menue3.

http://hasi87.cwsurf.de/bilder.html

[sejuma]

Lösche mal bei #menu3 das "position: absolute"

[hasi87]

Ok.
Genau das war der Fehler.
Sehr gut es funktioniert.

ps.: bei mir lokal. Aktualisiert hab ich das noch nicht.
Werde jetzt eine kleine Navigation einrichten für die Fotos.

Danke für die Tipps und für eure Hilfe...das war Gold wert..


vielen Dank.

mfg, hasi87.