Probleme mit Lightbox

Stroiner · 07.06.2011

Probleme mit Lightbox ( Rand neben den Bildern)

Hallo,
ich habe mal wieder ein kleines Problemchen mit einer Homepage.
Es geht um folgende Seite:

Klickt man das Bild an erscheint ein hässlicher Rahmen mit dem vergrößerten Bild.
Wie kann ich diesen entfernen?

Oder muss man das in der .css Datei der Lightbox ändern?

Der Quellcode lautet:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>


<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="Pokaew - Traditionelle Thai-Massage">
<meta name="description"
content="Pokaew - Traditionelle Thai-Massage" >
<title>Pokaew - Traditionelle Thai-Massage in Olpe. Besuchen Sie uns, um eine einzigartige Wellnesserfahrung zu erhalten. Wir bieten professionelle Kräuterstempel und Aromaölmassagen an.</title>



<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">

<style type="text/css">
.auto-style2 {
	color: #FFFFFF;
}
.auto-style3 {
	text-align: center;
}
.auto-style4 {
	font-size: 20px;
}
</style>

</head>

<body     >


<div align="center">



<table align="center" id="main"  cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td align="center"    >

<table align="center" id="main_top"   cellspacing="0" cellpadding="0" border="0" >
<tr>
<td >
<table  align="center"  cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td colspan="2" id="top1" >
&nbsp;
</td>
</tr>
<tr>
<td  id="top2" >
<div id="hpname">
<img src="http://www.psd-tutorials.de/forum/images/Bild33.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;"> <img src="http://www.psd-tutorials.de/forum/images/Bild22.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;"></div>
</td><td><!-- bilder-->
<div id="bilder_ob" >
	&nbsp;&nbsp;
</div>
<!--ende  bilder--><td>
</tr>
<tr>
<td colspan="2" align="center"  id="top3"  >

<table width="100%"  align="center"   id="menuhorizontal"  border="0" cellpadding="0" cellspacing="0"    >
<tr>
<td width="20%"><a href="us.html"  >Über Uns</a></td>

<td width="20%" id="aktuell" >
<a href="index.html" class="auto-style2" style="width: 178px"  >Startseite</a></td>

<td width="20%"><a href="preise.html"  >Preisliste</a></td>

<td width="20%"><a href="Kontakt.html">Kontakt</a></td>

<td width="20%"><a href="impressum.html"  >Impressum</a></td>
</tr>
</table>



</td>
</tr>
<tr>
<td colspan="2" id="top4" >
&nbsp;
</td>
</tr>

</table >

</td>
</tr>
</table>







<table    align="center"  id="main_inhalt"     border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td  valign="top"    align="center" >
<table  align="center"  id="inhalt"    border="0" cellpadding="0" cellspacing="0">

<tr>


<td  id="leftcol" valign="top"     >



<!--BOX nav-->
<div class="boxnav">
<div id="menu2">
<h3 class="boxheader">Menü</h3>
<ul  >
<li><a href="index.html"  >Startseite</a></li>
<li><a href="us.html"  >Über Uns</a></li>
<li><a href="preise.html"  >Preisliste</a></li>
<li><a href="*********html"  >Anfahrt</a></li>
<li><a href="Kontakt.html"  >Kontakt</a></li>
<li><a href="impressum.html"  >Impressum</a></li>
</ul>
</div>
</div>
<!--ende BOX nav-->
<br>

<!--BOX nav2-->
<!--ende BOX nav2-->



<br>
<!--BOX bilder-->
<div class="boxbilder">

<h3 class="boxheader"> Bilder</h3>
<img src="http://www.psd-tutorials.de/forum/images/Bild1.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;margin-bottom:0px">&nbsp;<img src="http://www.psd-tutorials.de/forum/images/Bild22.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;margin-bottom:0px">
<br>
<img src="http://www.psd-tutorials.de/forum/images/Bild33.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;margin-bottom:6px">&nbsp;<img src="http://www.psd-tutorials.de/forum/images/Bild77.jpg" width="100" height="100" border="0" alt="" style="border:solid 1px #202020;margin-bottom:6px">


	</div>
<!--ende BOX bilder-->


<!-- ende boxen inhalt-->

<!-- breite der linken spalte -->
<!-- =========== hier spaltenbreite ändern für linke spalte und zwar in der format.css an entspr. stelle . wenn sie hier eine änderung vornehmen sollten sie auch noch das menü anpassen in der datei menue.css  ========== -->
<div class="breite_hauptspalte_links">&nbsp;</div>
<!-- ========= ende spaltenbreite linke spalte ============--></td>


<td valign="top"  id="inbox">

<h2>&nbsp;</h2>
<h2>Über Uns</h2>
<p>&nbsp;</p>
<p class="auto-style3">
<a href="http://www.psd-tutorials.de/forum/images/Bildg2.jpg" rel="lightbox"><img src="http://www.psd-tutorials.de/forum/images/Bildg2thumb.jpg"/></a></p>
<p>&nbsp;</p>
<p><strong><span class="auto-style4">2</span></strong> Monate lang habe ich im Wat Po Tempel in Chiang Mai, Thailand gelebt, um 
dort eine professionelle Massageausbildung zu erhalten. In der Chetawan Thai 
Traditional Massage School absolvierte ich anschließend die mir auferlegten 
Prüfungen und erhielt Zertifikate für:</p>
<p>&nbsp;</p>
<p>• oil massage &amp; aromatherapy</p>
<p class="auto-style3">
<a href="http://www.psd-tutorials.de/forum/images/Zertifikat3.jpg" rel="lightbox[group]"><img src="http://www.psd-tutorials.de/forum/images/Zertifikat3thumb.jpg"/></a></p>
<p>•&nbsp; Foot massage</p>
<p class="auto-style3">
<a href="http://www.psd-tutorials.de/forum/images/Zertifikat2.jpg" rel="lightbox[group]"><img src="http://www.psd-tutorials.de/forum/images/Zertifikat2thumb.jpg"/></a></p>
<p>• Thai traditional massage</p>
<p class="auto-style3">
<a href="http://www.psd-tutorials.de/forum/images/Zertifikat1.jpg" rel="lightbox[group]"><img src="http://www.psd-tutorials.de/forum/images/Zertifikat1thumb.jpg"/></a></p>
<p>Heute habe ich meinen eigenen kleinen Massagesalon.</p>
<p>Eine professionelle Massageliege gibt ihnen außergewöhnlichen Komfort.</p>
<p>Zusätzlich zur gewöhnlichen Ganzkörperthaimassage biete ich ihnen auch 
Aromaölmassagen an, bei denen die wertvollen asiatischen Öle zusätzlich ihre 
haut verwöhnen.</p>
<p>Außerdem bin ich zertifiziert für Massagen mit heißen Kräuterstempeln.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img alt="" height="224" src="http://www.psd-tutorials.de/forum/images/logo2.png" width="474"></p>
<p><span class="auto-style4"><strong>D</strong></span>en Namen Pokaew habe ich 
gewählt, um den Tempel zu ehren, indem ich so viel gelernt habe .</p>



</td>
<!-- ende inhalt-->




</tr>
</table>
</td>


</tr>

</table>
<!-- fuss-->
<table id="main_fuss"   border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss">


Jankaew Michler&nbsp;&nbsp;•&nbsp;&nbsp;Quellenweg 25&nbsp;&nbsp;•&nbsp;&nbsp;57462 Olpe</td>
</tr>
<tr>
<td width="100%"  id="fuss2" align="center" >

<!-- menü GANZ unten-->
<table align="center"      id="menu_un"  border="0" cellpadding="0" cellspacing="0"    >
<tr>
<td  ><a href="mailto:thai-massage-olpe@live.de">Mail</a></td><td class="trenn2" >•</td>
<td ><a href="Kontakt.html"  >Kontaktformular</a></td><td class="trenn2">•</td>
<td ><a href="impressum.html"  >Impressum</a></td>
</tr>
</table>
<!-- ende menü GANZ unten-->
www.pokaew-massage.de<br>
<br>






</td>
</tr>
</table>
<!-- ende fuss-->

</td>
</tr>
</table></div>



</body>
</html>

krid2873 · 07.06.2011

AW: Probleme mit Lightbox

Moin,

Stroiner:
...
Klickt man das Bild an erscheint ein hässlicher Rahmen mit dem vergrößerten Bild.
...

Dieser Rahmen wird hervorgerufen durch folgende Angaben in deiner format.css:

Code:

#lightbox
{     
background-color:#eee;     
padding: 10px;     
border-bottom: 2px solid #666;     
border-right: 2px solid #666;     
}

 #lightboxDetails
{    
font-size: 0.8em;     
padding-top: 0.4em;     
}     

#lightboxCaption
{
 float: left; 
} 

#keyboardMsg
{
float: right; 
} 

#lightbox img
{ 
border: none; 
}  

#overlay img
{ 
border: none; 
}

magicsepp · 07.06.2011

AW: Probleme mit Lightbox

schau Dir mal die Fehlerliste hier an:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpokaew-massage.de%2Fus.html

Stroiner · 07.06.2011

AW: Probleme mit Lightbox

Ich kriege das trotzdem nicht gebacken.
Bei mir ist keine farbe eee in der css.
Kann mir einer die .css der version 2.05 von lightbox entsprechen abändern und als Anhang mitsenden?
Ich bin leider kein Experte auf diesem gebiet.

krid2873 · 08.06.2011

AW: Probleme mit Lightbox

Moin,

Stroiner:
Bei mir ist keine farbe eee in der css.

Ruf mal deine format.css auf:

dort ab Zeile 254, also ziemlich am Ende der Datei, sind die von mir genannten Angaben betreff der Lightbox gemacht worden.
Vor allem die erste Angabe:

Code:

#lightbox
{     
background-color:#eee;     
padding: 10px;     
border-bottom: 2px solid #666;     
border-right: 2px solid #666;     
}

sorgt für den unschönen Effekt (Rahmen).

Stroiner:
Kann mir einer die .css der version 2.05 von lightbox entsprechen abändern und als Anhang mitsenden?

Was abändern? Deine lightbox.css entspricht dem des Orginals.

Stroiner · 08.06.2011

AW: Probleme mit Lightbox

ja ich habe dich missverstanden.
Ich dachte darin stände die Farbe und nicht in meiner format.css

und danke, jetzt gehts