Link funktioniert nicht.

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

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Da liegt ja generell einiges im Argen - sicher wirst Du noch entspr. Hinweise bekommen :D
Aber auch ohne das CSS zu sehen, scheint mir dies der Kern der Sache zu sein:
style="position: absolute;z-index:4;"
Du positionierst das Canvas absolut und gibst ihm den z-index 4. Das führt dazu, dass es die anderen Element überdeckt, auch wenn es ohne Inhalte nicht sichtbar ist, und die Mausaktionen abfängt. Verzichte auf die absolute Positionierung, dann wird auch der Link funktionieren.
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
ohne dass dabei das "Ihr Ansprechpartner für alles." usw. verdeckt wird.
I. allg. ist es so, dass die absolute Positionierung eine Verdeckung verursacht und nicht behebt. Wenn sich das in deinem Fall anders verhält, müsste man das CSS in der style.css sehen, um die Erklärung zu finden. Allerdings finde ich in dem HTML oben nirgend wo, wo dieses eingezogen würde?

Ich schrieb ja schon, dass bei deinem HTML einiges im Argen liegt. Das heißt, dass die Struktur nicht stimmt, h1 hat im head nichts zu suchen, und dass es veraltet ist, das betrifft font und center. Wie ist dieses HTML denn entstanden?
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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

Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
PS: Auch in dem CSS für dein #div1 hast Du absolute Positionierung. Entferne es dort ebenfalls.
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
Wie meinst Du die absolute Positionierung entfernen? Einfach rauslöschen oder ersetzen? Beim Löschen verschwindet wieder der ganze Text.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Erst Mal die grundlegenden Fehler beheben: Das h1 aus dem <head> in den <body> verschieben. Und ja, die abs. Positionierung komplett löschen.
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Überlappung gibt es nur wenn man absolut positioniert (oder mit neg. Margins arbeitet, was bei dir aber nicht der Fall ist). Lösche die absolute Positionierung zunächst Mal überall. Und am besten auf diese Dinge mit dem Canvas verzichten solange Du die ganz grundlegenden Funktionen nicht beherrschst. Ich vermute, Du möchtest das Canvas im Hintergrund haben?
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Gibt es eine Möglichkeit das Canvas mit relativer Positionierung in den Hintergrund zu schieben?
Dies wäre in der Tat eine Anwendung für abs. Positionierung. Aber dann bekommst Du ein Problem mit den Mausaktionen.
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Gut. Ich habe mir das Mal angesehen: Du schreibst, dass die Schrift verschwindet, wenn Du das Canvas nicht absolut positionierst. Sie verschwindet jedoch nicht, sondern verschiebt sich unter das Canvas, da sie im HTML-Text nach diesem notiert ist. Du findest sie dann, wenn Du herunter scrollst.
 

Domahbe

Neues Mitglied
14 Januar 2020
10
0
1
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.933
370
83
67
Die Elemente werden zunächst Mal in der Reihenfolge dargestellt wie sie im HTML-Text stehen. Also brauchst Du das Canvas nur an das Ende des body zu verschieben, dann werden alle Schriften darüber dargestellt.
 
Werbung: