Ergebnis 1 bis 3 von 3

Thema: Lightbox - Gößenanderung der Schatten

  1. #1
    HTML Newbie
    Registriert seit
    30.12.2010
    Ort
    Gelsenkirchen
    Alter
    43
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Lightbox - Gößenanderung der Schatten

    Hallo,

    ich benutzte Lightbox Vers. 2.0.4
    Dabei habe ich ein kleines Problem. Wenn die Bilder vergrößert werden ist das Overlay viel zu groß sprich der Rahmen. Beim Beispiel des Herstellers war das Overlay nur ca. 15px rand.
    Was mache ich bei mir falsch?

    Hier der CSS Code
    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 */
    
    body
    {scrollbar-arrow-color: #000000; scrollbar-base-color: #ffffff;
    scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
    SCROLLBAR-TRACK-COLOR: #e6e6e6;}
    
    #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: 80%; height: 80%;}
    #lightbox a img{ border: none; }
    
    #outerImageContainer{ position: relative; background-color: #380001; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }
    
    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    
    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
    
    #imageData{	padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
    
    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #380001; }
    Und hier der HTML Code:
    HTML-Code:
    <link rel="stylesheet" href="format.css" type="text/css">
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>
    
    
    <td align="center" width="175" height="125"><a href="images/atsb00000.jpg" rel="lightbox[roadtrip]" ><img style="border: 0px solid ; width: 60px; height: 90px;" src="images/atsa00000.jpg" width: 60px; height: 90px; ></a></td>
    <td align="center" width="175" height="125"><a href="images/atsb00001.jpg" rel="lightbox[roadtrip]" ><img style="border: 0px solid ; width: 60px; height: 90px;" src="images/atsa00001.jpg"></a></td>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Lightbox - Gößenanderung der Schatten

    haste das zufällig irgendwo als link? das macht das überprüfen einfacher, wie ich finde.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    30.12.2010
    Ort
    Gelsenkirchen
    Alter
    43
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Lightbox - Gößenanderung der Schatten

    Danke für das Hilfe Angebot. Doch ich habe das ganze nun mit Highslide gelöst. Dort war die Funktion für meine Sache eleganter gelöst und auch sehr einfach einzubinden.

    Danke nochmal

Ähnliche Themen

  1. Schatten erstellen
    Von Unregistriert im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 12.11.2009, 08:57
  2. Schatten bei Bildern mit css?
    Von s16 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.07.2006, 17:27
  3. Schatten bei Frames ?
    Von s16 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 06.03.2006, 15:09
  4. GIf halbtransparenter Schatten
    Von GreenRover im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 6
    Letzter Beitrag: 04.08.2005, 11:34
  5. Tabelle mit Schatten?
    Von Phill im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 28.01.2004, 19:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •