Benötige Hilfe bezüglich Link-Verschiebung
0 0 
Felix Riesterer
0 0 Felix Riesterer
0 0 Felix Riesterer
0 
henman
0 Felix Riesterer
0
0
Benötige Hilfe bezüglich Link-Verschiebung
AugeLiebe 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
-
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
-
Lieber Matthias,
Du hast Dir mit Deiner <div>-Suppe selbst ein Bein gestellt. Hättest Du sinnvollen Code benutzt, dann wäre das alles überhaupt kein Problem gewesen.
Vorschlag: Wandle Deinen Code so um, dass Deine Links innerhalb von Listenelementen stehen.
<h1>Adventskalender</h1> <ul id="kalender"> <li><a href="..." id="tuer_1"><span>1. Türchen</span></a></li> <li><a href="..." id="tuer_2"><span>2. Türchen</span></a></li> <li><a href="..." id="tuer_3"><span>3. Türchen</span></a></li> ... </ul>So. Mit diesem Code kannst Du dem <ul>-Element Dein Kalenderbild als Hintergrundbild zuweisen. Wenn dieses <ul>-Element dann auch noch position:relative verpasst bekommt, dann gilt seine linke obere Ecke als Ursprungspunkt für alle top und left werte der absolut positionierten <a>-Elemente.
Damit in den Links keine störenden Textelemente angezeigt werden, kannst Du die <span>-Elemente mit display:none unsichtbar machen. Falls jemand CSS deaktiviert, ist die Seite sinnvoll nutzbar.
Mit Deinen gegenwärtigen "Koordinaten" klappt das "Zurechtrücken" des Bildes allerdings nicht. Selbst wenn ich mit den Werten für die x- und y-Ausrichtung spiele, werden nur ein paar "Links" korrekt auf dem Hintergrundbild abgebildet. Daher ist mein obiger Ansatz sehr wesentlich, wenn Dein Vorhaben gelingen soll. Und wenn Du das Ausprobieren der neuen Koordinaten scheust, dann hast Du wahrscheinlich noch nicht ausprobiert, wie toll man im Firefox mit dem Firebug-Plugin solche Dinge im Handumdrehen ausprobieren und anpassen kann.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Das tuts leider nicht, wie es soll. Stattdessen wird mein Hintergrundbild gar nicht mehr angezeigt.
Den Code hab ich von einer Typo3-Seite kopiert:http://www.dak-aha-live.de/adventskalender/adventskalender-2009.html
Und hier funktioniert alles einwandfrei... Ich weiß, es ist Typo3 aber eigentlich müsste es doch genauso ohne laufen.
Liebe Grüße,
Matthias-
Lieber Matthias,
Den Code hab ich von einer Typo3-Seite kopiert:
http://www.dak-aha-live.de/adventskalender/adventskalender-2009.html
Und hier funktioniert alles einwandfrei...
das sehe ich nicht so:
1. 5 Errors
2. Die Linkflächen stimmen in meinem FF3.5.5 nicht mit den Positionen der Hintergrundbild-Türchen überein.
Ich weiß, es ist Typo3 aber eigentlich müsste es doch genauso ohne laufen.
Mir wär's lieber, das Teil stünde unbewegt and Ort und Stelle...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Oke. Also das FF Addon werde ich mir auf jeden Fall installieren ^^ Nun, ich bin kein Stück weiter. Habe zwar alle Links umgeschrieben in eine Liste und diese definiert doch immernoch das gleiche Problem. Auch die Verweis-Sensitive Grafik hilft nicht. Die versteht meine Lightbox nicht...
Schon Schwer. Aber kann man nicht alle Elemente gruppieren und verschieben ?Mir wär's lieber, das Teil stünde unbewegt and Ort und Stelle...
Mir auch. Aber selbst wenn die Flächen so bleiben würden, oke. Nur das die Kästchen überhaupt auf den Türchen sind wäre gut ^^
Liebe Grüße zurück.
-
Lieber Matthias,
Nun, ich bin kein Stück weiter. Habe zwar alle Links umgeschrieben in eine Liste und diese definiert doch immernoch das gleiche Problem.
So? Wo denn? Unter Deiner alten "Klick mich"-Adresse schwimmt noch immer die <div>-Suppe herum...
Aber kann man nicht alle Elemente gruppieren und verschieben ?
Wenn Deine Links in der Liste im Verhältnis zur Liste absolut (und korrekt) positioniert sind, dann kannst Du die Liste als kompletten Block herumrutschen, wie's Dir beliebt.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
So? Wo denn? Unter Deiner alten "Klick mich"-Adresse schwimmt noch immer die <div>-Suppe herum...
Jetzt nicht mehr...
Liebe Grüße,
Matthias-
Lieber Matthias,
Unter Deiner alten "Klick mich"-Adresse schwimmt noch immer die <div>-Suppe herum...
Jetzt nicht mehr...
Du hast noch immer jede Menge Unfug in Deinem Code. Was sollen diese (im Übrigen nicht korrekt beendeten) <img>-Elemente in Deinem Code? Entferne sie restlos!! Mein Code-Vorschlag war vollständig. Du brauchst ansonsten nichts weiter!
Trenne Dich komplett von der Code-Vorlage aus der Typo3-Seite, die Du abzukupfern versuchst. Wir machen das komplett neu und außerdem richtig. Die Vorlage der von Dir verlinkten Seite ist mehr als nur fehlerhaft, sie ist auch unsinnig! Also mach' es nicht nach!
Wenn Dein Code sauber ist, dann kann man mit CSS darangehen, ihn visuell zu gestalten - und unter anderem auch die Links zu platzieren. Aber bitte(!!!) immer erst einen Schritt nach dem anderen! Insbesondere dann, wenn Du nicht sicher weißt, was Du tust!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
ich habe mir nun die Arbeit gemacht, den ganzen Kalender komplett selbst neu zu bauen. Dafür habe ich jetzt doch den area-tag benutzt und das CSS komplett vernachlässigt. Läuft jetzt alles. Ist zwar nich sauber aber für mich reichts :) DANKE EUCH ALLEN !!! Jetzt hab ich zwar noch das Problem, meine Freundin iwie davon abzuhalten, vorher schon das 24. Türchen zu öffnen aber gut. Mal sehn wie ichs schaffe :D
Liebe Grüße,
Matthias
-
Lieber Matthias,
ich habe mir nun die Arbeit gemacht, den ganzen Kalender komplett selbst neu zu bauen. Dafür habe ich jetzt doch den area-tag benutzt und das CSS komplett vernachlässigt.
in anderen Worten: Du hast aufgegeben. Schade. Dabei wäre das so einfach gewesen: Adventskalender mit CSS (Koordinaten Deiner <area>-Elemente übernommen)
Läuft jetzt alles.
Nö, steht schön still an Ort und Stelle.
Ist zwar nich sauber
Stimmt. Da ist ein schließendes </a> ohne Sinn und Zusammenhang. Das stört jeden Validator.
aber für mich reichts
Da wäre ich an Deiner Stelle nicht lange mit zufrieden.
Jetzt hab ich zwar noch das Problem, meine Freundin iwie davon abzuhalten, vorher schon das 24. Türchen zu öffnen aber gut. Mal sehn wie ichs schaffe :D
Na, indem Du die Links auf ein "Ja is denn heut scho Weihnachten?"-Bildchen verweisen lässt, und erst spät am Vorabend den jeweiligen Link auf das eigentliche Bildchen korrigierst. Du könntest auch eine serverseitige Scriptsprache einsetzen, die Dir diesen Schritt abnimmt...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
-
-
-
-
-
hallo,
Hilfreich wäre es danach noch, dass die blauen Ränder um die Kästchen verschwinden würden. Wie kann ich das anstellen ?
Schreib ins CSS, dass Bilder keinen Rand haben sollen
Dein Problem ist wohl eher, dass die Grafik des Kalenders rechtsbündig ist und die divs mit den Links linksbündig.
.. und ich mach gleich nen anderen Vorschlag, wie wäre es, eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweis-sensitive Grafik zu nehmen?
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
Lieber henman,
wie wäre es, eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweis-sensitive Grafik zu nehmen?
für "Designer" bietet diese Lösung zuwenig Möglichkeiten den visuellen Eindruck mit Hovereffekten aufzuhübschen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber henman,
wie wäre es, eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweis-sensitive Grafik zu nehmen?
für "Designer" bietet diese Lösung zuwenig Möglichkeiten den visuellen Eindruck mit Hovereffekten aufzuhübschen.
Liebe Grüße,
Felix Riesterer.
Die Hover-Effekte sind eigentlich weniger wichtig. Es muss halt nur wie die Verweis-Sensitiv Grafik schon beschreibt ein Viereck über dem Bild liegen, mit dem ich die Links geöffnet bekomme.
Ich probiers mal aus
-
-
Auch das mit den sensitiven Verweisen hilft nicht so sonderlich weiter. Eigentlich müsste ich doch nur einfach die ganzen Links als Container um x Pixel nach rechts befördern können oder ?
-
hallo,
Eigentlich müsste ich doch nur einfach die ganzen Links als Container um x Pixel nach rechts befördern können oder ?
Die Grafik im Hintergrund ist aber rechtsbündig. Sie verschwindet links, je enger ich das Fenster ziehe. Dann bringt es dir auch nichts, die Container nach rechts zu verschieben.
grüße,
henman--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
Die Grafik im Hintergrund ist aber rechtsbündig. Sie verschwindet links, je enger ich das Fenster ziehe. Dann bringt es dir auch nichts, die Container nach rechts zu verschieben.
Gibt es dazu keine Möglichkeit ?
-
Hallo
Die Grafik im Hintergrund ist aber rechtsbündig. Sie verschwindet links, je enger ich das Fenster ziehe. Dann bringt es dir auch nichts, die Container nach rechts zu verschieben.
Gibt es dazu keine Möglichkeit ?
Ich würde Felix' Vorschlag folgen. Die Liste (
<ul>) bekommt das Bild des Adventskalenders als Hintergrund und auch dessen Dimensionen undposition:relative;als Basis der Positionierungen der einzelnen Links. Die Listenpunkte (<li>) und Links (<a>) werden mitdisplay:block;versehen, damit du ihnen Größenangaben verpassen kannst.Die Listenpunkte werden absolut positioniert und mit
left:..px;sowietop:..px;(bezogen auf die linke obere Ecke von<ul>, die mit der entsprechenden Stelle des Hintergrundbildes übereinstimmt, werden sie an die richtige Stelle gerückt. Den Listenpunkten gibst du auch die notwendigen Größenangaben, den Links selbstwidth:100%;undheight:100%;. Vergesse nichtmarginundpaddingfür<li>und<a>auf 0 zu setzen. Für <ul> musspaddingebenfalls mit 0 angegeben werden.So sollte es klappen.
Tschö, Auge
PS: die von dir in diesem Posting erwähnten Änderungen enthalten (mindestens) 24 Fehler. Du hast die
<img>-Tags in den Links sämtlichst nicht geschlossen (Beispiel:<span><img src="images/pix50x50.gif" alt="" width="70" height="70" </span>).--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
Veranstaltungsdatenbank Vdb 0.3
-
-
-
-
-
hi,
hier mal eine Starthilfe für dein CSS (für dein Aktuelles HTML-Gerüst).
#body { margin:0 auto; padding:0; position:relative; z-index:1; width:1024px; height:758px; list-style:none; border:5px solid #F00; background:url(http://youthbroadcast.bplaced.de/advent/images/background.jpg) no-repeat 0 -10px; } #body img { border:0 none; } #body li, #body a { margin:0; padding:0; } #body a { display:block; position:absolute; z-index:2; } #apDiv1 { top:50px; left:55px; width:90px; height:90px; background:#FE0; }Ein Tipp am Rande: da du den Links bereits IDs zugewiesen hast, würde ich die Bilder nicht via
<img />einbinden, sondern als Hintergrundbilder.
Dann kannst du auch direkt CSS-Sprites verwenden und so die Ladezeit verringern.
Würde auch dein HTML übersichtlicher machen.mfg