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 mich
Und 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