nicht angemeldet
Liebe Forengemeinde,
als kleines Präsent für meine Freundin plane ich einen Adventskalender.
Nach einiger Suche habe ich auch passende Ansätze gefunden, um diesen zu verwirklichen. Jedoch stehe ich vor einem Problem: Die schon richtig justierten Link-Kästchen müssten nach rechts verschoben werden, sodass diese auf den im Hintergrundbild eingezeichneten Türchen sitzen. Hilfreich wäre es danach noch, dass die blauen Ränder um die Kästchen verschwinden würden. Wie kann ich das anstellen ?
Der Link zur Seite: Klick michUnd hier der Quelltext ( Habe den CSS Code in den Header eingefügt ):
______________________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Lea-Schatz's Adventskalender</title>
<link rel="stylesheet" href="scripts/css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
#page_margins {width:960px; margin-left:auto; margin-right:auto;}
body {
background-attachment: scroll;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center top;
background-image: url(images/background.jpg);
width: 960px;}
#padding {
padding-left:126px
}
#apDiv1 {
position:absolute;
width:50px;
height:70px;
z-index:1;
left: 0px;
top: 313px;
}
#apDiv2 {
position:absolute;
width:70px;
height:60px;
z-index:2;
left: -170px;
top: 263px;
}
#apDiv3 {
position:absolute;
width:70px;
height:70px;
z-index:3;
left: 350px;
top: 338px;
}
#apDiv4 {
position:absolute;
width:70px;
height:70px;
z-index:4;
left: 200px;
top: 322px;
}
#apDiv5 {
position:absolute;
width:60px;
height:80px;
z-index:5;
left: 500px;
top: 303px;
}
#apDiv6 {
position:absolute;
width:70px;
height:80px;
z-index:6;
left: 700px;
top: 345px;
}
#apDiv7 {
position:absolute;
width:60px;
height:60px;
z-index:7;
left: 670px;
top: 218px;
}
#apDiv8 {
position:absolute;
width:60px;
height:60px;
z-index:8;
left: 640px;
top: 80px;
}
#apDiv9 {
position:absolute;
width:40px;
height:90px;
z-index:9;
left: 490px;
top: 154px;
}
#apDiv10 {
position:absolute;
width:70px;
height:90px;
z-index:10;
left: 280px;
top: 163px;
}
#apDiv11 {
position:absolute;
width:50px;
height:70px;
z-index:11;
left: 130px;
top: 184px;
}
#apDiv12 {
position:absolute;
width:50px;
height:70px;
z-index:12;
left: -10px;
top: 135px;
}
#apDiv13 {
position:absolute;
width:40px;
height:60px;
z-index:13;
left: -200px;
top: 76px;
}
#apDiv14 {
position:absolute;
width:60px;
height:80px;
z-index:14;
left:147px;
top: 474px;
}
#apDiv15 {
position:absolute;
width:40px;
height:60px;
z-index:15;
left: -20px;
top: 496px;
}
#apDiv16 {
position:absolute;
width:50px;
height:60px;
z-index:16;
left:665px;
top: 505px;
}
#apDiv17 {
position:absolute;
width:30px;
height:90px;
z-index:17;
left: 500px;
top: 483px;
}
#apDiv18 {
position:absolute;
width:60px;
height:70px;
z-index:18;
left: 330px;
top: 507px;
}
#apDiv19 {
position:absolute;
width:70px;
height:70px;
z-index:19;
left: -176px;
top: 445px;
}
#apDiv20 {
position:absolute;
width:50px;
height:70px;
z-index:20;
left: -200px;
top: 607px;
}
#apDiv21 {
position:absolute;
width:70px;
height:70px;
z-index:21;
left: 0px;
top: 646px;
}
#apDiv22 {
position:absolute;
width:90px;
height:90px;
z-index:22;
left: 190px;
top: 608px;
}
#apDiv23 {
position:absolute;
width:80px;
height:80px;
z-index:23;
left: 441px;
top: 649px;
}
#apDiv24 {
position:absolute;
width:60px;
height:70px;
z-index:24;
left: 610px;
top: 632px;
}
</style>
<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>
</head>
<body>
<div id="apDiv1"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" width="50" height="70" alt="" /></a></div>
<div id="apDiv5"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="60" height="80" /></a></div>
<div id="apDiv6"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="80" /></a></div><div id="apDiv2"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="60" /></a></div>
<div id="apDiv3"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div>
<div id="apDiv4"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div>
<div id="apDiv7"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="60" height="60" /></a></div>
<div id="apDiv8"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="60" height="60" /></a></div>
<div id="apDiv9"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="40" height="90" /></a></div>
<div id="apDiv10"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="90" /></a></div>
<div id="apDiv11"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="50" height="70" /></a></div>
<div id="apDiv12"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="50" height="70" /></a></div><div id="apDiv13"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="40" height="60" /></a></div>
<div id="apDiv14"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="80" height="60" /></a></div>
<div id="apDiv15"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="40" height="60" /></a></div>
<div id="apDiv16"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="50" height="60" /></a></div>
<div id="apDiv17"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="30" height="90" /></a></div>
<div id="apDiv18"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="60" height="70" /></a></div>
<div id="apDiv19"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div>
<div id="apDiv20"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="50" height="70" /></a></div>
<div id="apDiv21"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div><div id="apDiv22"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="90" height="90" /></a></div>
<div id="apDiv23"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div>
<div id="apDiv24"><a href="images/nicht-spicken.jpg" rel="lightbox"><img src="images/pix50x50.gif" alt="" width="70" height="70" /></a></div>
</body>
</html>Liebe Grüße und Danke im Vorraus,
Matthias Scheible
Ein Nachtrag: Gerade bemerke ich, dass der Lightbox-Effekt auf meinem Server aus irgendeinem Grund nicht funktioniert. Kann man erst mal unbeachtet lassen :)
Danke
henman
Auge