• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Link funktioniert nicht.

Domahbe

Neues Mitglied
Hallo zusammen,
ich bin noch neu in HTML und CSS und daher könnte mein Problem einfach zu lösen sein...
Ich habe ein Block-Element in meinen Code eingebaut, bei dem der Link nicht funktioniert
Es geht um folgenden Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>GoldBlatt - Trusted Marketplace</title>
<h1><font size=7 face="Bahnschrift">
  <center><font color=white>Gold</font><font color=yellow>Blatt</font><font color=white>.com</font><font color=grey> - Trusted Marketplace</font></font></center>
</h1>
</head>
<body background="hin3.jpg">

<canvas id="web-canvas" style="position: absolute;z-index:4;"></canvas>
<h1><font color=green face="Bahnschrift"></font></h1>
<h3><font color=lightgrey face="Bahnschrift">Ihr Ansprechpartner für Alles.</font> <br>
<a><font color=white face="Bahnschrift">Wir sind immer für sie da.</font></a>
<div id="div1">
  <a href="shop.html">Shop betreten</a>
</div>
Mir geht es um den Link relativ weit unten (href="shop.html")
Jetzt ist meine Frage, ob sich etwas über dem Link befindet, dass man sich verrückt klicken kann, ohne dass etwas passiert (der Link an sich ist sichtbar und verfärbt sich auch, wenn ich "shop.html" manuell öffne).
div1 habe ich in der style.css datei "gecodet" oder wie auch immer das dazu passende Verb lauten mag.
index.html und shop.html befinden sich eigentlich im selben Ordner.

Wen es interessiert, warum dieser Code in diesem Rahmen existiert:
Wir müssen für die Schule einen beliebigen Webshop entwerfen.

Vielen Dank im Voraus

MfG
Domahbe
 
Zuletzt bearbeitet:
Werbung:
Danke Dir für die Hilfe,:smile:
aber wie bekomme ich die absolute Positionierung weg, ohne dass dabei das "Ihr Ansprechpartner für alles." usw. verdeckt wird.
Wenn ich das Canvas rausnehme, klappt es.
Gibt es eine möglichkeit den Link über das Canvas zu legen?
 
Zuletzt bearbeitet:
Alles, was sich in dem Code veraltet anhört haben wir heute morgen gelernt :D
An sich ist die HTML selbst erstellt, allerding habe ich das Canvas von einer anderen Website übernommen.
Ich häng hier einfach mal den ganzen Code ran
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>GoldBlatt - Trusted Marketplace</title>
<h1><font size=7 face="Bahnschrift">
  <center><font color=white>Gold</font><font color=yellow>Blatt</font><font color=white>.com</font><font color=grey> - Trusted Marketplace</font></font></center>
</h1>
</head>
<body background="hin3.jpg">

<canvas id="web-canvas" style="position: absolute;z-index:4;"></canvas>
<h1><font color=green face="Bahnschrift"></font></h1>
<h3><font color=lightgrey face="Bahnschrift">Ihr Ansprechpartner für Alles.</font> <br>
<a><font color=white face="Bahnschrift">Wir sind immer für sie da.</font></a>
<div id="div1">
  <a href="shop.html">Shop betreten</a>
</div>


<script src="https://static.windscribe.com/js/EasePack.min.js"></script>
<script src="https://static.windscribe.com/js/rAF.js"></script>
<script src="https://static.windscribe.com/js/TweenLite.min.js"></script>
<script>
    (function() {

        var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

        // Main
        initHeader();
        initAnimation();
        addListeners();

        function initHeader() {
            width = window.innerWidth-20;
            height = window.innerHeight;
            target = {x: width/2, y: height/2};

            largeHeader = document.getElementById('home-top');
            //largeHeader.style.height = '700px';

            canvas = document.getElementById('web-canvas');
            canvas.width = width;
            //canvas.height = height;
            canvas.height = 905;
            ctx = canvas.getContext('2d');

            // create points
            points = [];
            for(var x = 0; x < width; x = x + width/20) {
                for(var y = 0; y < height; y = y + height/20) {
                    var px = x + Math.random()*width/20;
                    var py = y + Math.random()*height/20;
                    var p = {x: px, originX: px, y: py, originY: py };
                    points.push(p);
                }
            }

            // for each point find the 5 closest points
            for(var i = 0; i < points.length; i++) {
                var closest = [];
                var p1 = points[i];
                for(var j = 0; j < points.length; j++) {
                    var p2 = points[j]
                    if(!(p1 == p2)) {
                        var placed = false;
                        for(var k = 0; k < 5; k++) {
                            if(!placed) {
                                if(closest[k] == undefined) {
                                    closest[k] = p2;
                                    placed = true;
                                }
                            }
                        }

                        for(var k = 0; k < 5; k++) {
                            if(!placed) {
                                if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                    closest[k] = p2;
                                    placed = true;
                                }
                            }
                        }
                    }
                }
                p1.closest = closest;
            }

            // assign a circle to each point
            for(var i in points) {
                var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
                points[i].circle = c;
            }
        }

        // Event handling
        function addListeners() {
            if(!('ontouchstart' in window)) {
                window.addEventListener('mousemove', mouseMove);
            }
            window.addEventListener('scroll', scrollCheck);
            window.addEventListener('resize', resize);
        }

        function mouseMove(e) {
            var posx = posy = 0;
            if (e.pageX || e.pageY) {
                posx = e.pageX;
                posy = e.pageY;
            }
            else if (e.clientX || e.clientY)    {
                posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            }
            target.x = posx;
            target.y = posy;
        }

        function scrollCheck() {
            if(document.body.scrollTop > height) animateHeader = false;
            else animateHeader = true;
        }

        function resize() {
            width = window.innerWidth-20;
            height = window.innerHeight;
            //largeHeader.style.height = height+'px';
            canvas.width = width;
            //canvas.height = height;
            canvas.height = 700;
        }

        // animation
        function initAnimation() {
            animate();
            for(var i in points) {
                shiftPoint(points[i]);
            }
        }

        function animate() {
            if(animateHeader) {
                ctx.clearRect(0,0,width,height);
                for(var i in points) {
                    // detect points in range
                    if(Math.abs(getDistance(target, points[i])) < 4000) {
                        points[i].active = 0.3;
                        points[i].circle.active = 0.6;
                    } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                        points[i].active = 0.1;
                        points[i].circle.active = 0.3;
                    } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                        points[i].active = 0.02;
                        points[i].circle.active = 0.1;
                    } else {
                        points[i].active = 0;
                        points[i].circle.active = 0;
                    }

                    drawLines(points[i]);
                    points[i].circle.draw();
                }
            }
            requestAnimationFrame(animate);
        }

        function shiftPoint(p) {
            TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
                y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
                onComplete: function() {
                    shiftPoint(p);
                }});
        }

        // Canvas manipulation
        function drawLines(p) {
            if(!p.active) return;
            for(var i in p.closest) {
                ctx.beginPath();
                ctx.moveTo(p.x, p.y);
                ctx.lineTo(p.closest[i].x, p.closest[i].y);
                ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
                ctx.stroke();
            }
        }

        function Circle(pos,rad,color) {
            var _this = this;

            // constructor
            (function() {
                _this.pos = pos || null;
                _this.radius = rad || null;
                _this.color = color || null;
            })();

            this.draw = function() {
                if(!_this.active) return;
                ctx.beginPath();
                ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
                ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
                ctx.fill();
            };
        }

        // Util
        function getDistance(p1, p2) {
            return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
        }

    })();
</script>
</body>
</html>
Der obere code ist mein "index.html" der untere "shop.html", wobei "shop.html" selbstverständlich noch ausbaufähig ist ;)
HTML:
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Shop</title>
  </head>
  <body>
    <h1>Beispiel Kopfdaten</h1>
    <p>Alles nur ein Test.</p>
  </body>
</html>
Mein CSS:
CSS:
#div1{
  backgroundcolor: red;
  border-style: solid;
  border-width: 10px;
  border-color: #888888;
  position: absolute;
  width: 500px;
}
Im Anhang ist "hin3.jpg"
Die ungewöhnliche Weite bei "div1" liegt daran, dass ich gehofft habe, es dadurch auf der Seite zu finden :)
 

Anhänge

  • hin3.jpg
    hin3.jpg
    791,4 KB · Aufrufe: 2
Zuletzt bearbeitet:
Werbung:
Wie meinst Du die absolute Positionierung entfernen? Einfach rauslöschen oder ersetzen? Beim Löschen verschwindet wieder der ganze Text.
 
Der Text verschwindet, wenn ich die absolute Positionierung ganz lösche. Allerdings sieht man diesen ganz kurz beim ersten Laden der Seite. Vielleicht hat die Überlappung mit etwas Anderem vom Canvas zusammen.
 
Ja, diese Mauseffekte sollen in den Hintergrund. Allerdings würde ich echt ungern auf diese Verzichten :D Gibt es eine Möglichkeit das Canvas mit relativer Positionierung in den Hintergrund zu schieben?
Für den Anfang werde ich das Canvas dann aber rausnehmen.
Danke für die Hilfe
 
Werbung:
Gibt es eine Möglichkeit den Link als div oder allgemein als Block über die absolute Positionierung zu setzen?
Per höherem z-index z.B.
 
Oh... ist mir nicht aufgefallen. Gibt es eine Möglichikeit die Schrift auf die gleiche Höhe, wie den Titel zu schieben, damit es nicht unter das Canvas rutscht?
 
Werbung:
Zurück
Oben