Hallo zusammen,
ich habe ein kleines Problem. Ich habe mir mit Hilfe der Software „Thumb-Studio“ eine Gallery erstellt. Jedoch möchte ich nicht wenn man auf ein Bild klickt das dieses in einem Seperaten Fenster geöffnet wird, sondern möchte es eleganter mit einem Hover Effekt versehen. Es muss nicht unbedingt ein Hover sein. Kann auch ein anderer Effekt sein, wenn ihr eine bessere Lösung habt.
Mein Problem ist, das ich trotz ID´s diese Funktion innerhalb eines Div Boxes nicht hinbekomme.
Habe eben erst mit dem Programmieren angefangen, habt also ein wenig rücksicht mit mir.
Hier mal der CSS Code:
body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; padding:0px; height:100%;
background-image:url(images/sword_mit_inklusive.jpg);background-attachment:fixed;
background-repeat:no-repeat;background-position:160px 100% ;
background-color:#000;font-size: 100%;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;}
h1{font-size: 17pt;line-height: 125%;
font-family: georgia,times,arial, helvetica, tahoma ,verdana, sans-serif;color:#A65E60;
margin-bottom:25px;margin-top:0px;
letter-spacing:1px;
font-style:italic;}
}#aussen{height:100%;
min-height: 100%;
height: auto !important;
}
#nav {background-image:url(images/backmen.png)!important;
;background-image:url(images/backmen.jpg);background-repeat:repeat;
height:100%;padding:20px 0px 0px 0px;
margin: 0px 0px 0px 0px;
vertical-align:middle;
width:200px;
border: 1px solid #800000;
position: absolute;
top: 0px;
left: 80px;
color:#fff;
_filter: progid: DXImageTransform.Microsoft.Alpha(opacity=60);
}
#main {height:100%;
padding:20px 25px 20px 45px;
margin: 0px 70px 0px 300px;
vertical-align:top;
border: 1px solid #78324D;
background-image:url(images/back.png)!important;
background-image:url(images/back.jpg);
_filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
color:#A65E60;
}
#main p {text-align:justify;color:#;margin: 0px; }
/* menue links*/
#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
font-size: 13pt;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#400000;
line-height:28px;
text-decoration:none ;
text-align:right;
width:200px;
#menu1 a:hover{
color:#fff;
text-decoration:none ;
background-image:url(images/cube1.png)!important;
background-image:url(images/cube1.gif);
}
/* scrolleiste internet explorer ab vers.5.5 */
img {
border:none;
}
#box{
height:80px;
width:80px;
padding:0;
margin:20px;
border:1px solid black;
font:bold 14px verdana, sans-serif;}
#box div{display:none;}
#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
border:1px dashed black;
padding:15px;
font:normal 14px verdana, sans-serif;}
Und hier der Quellcode: