CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Scrumplex
Scrumplex

Reputation: 542

HTML - div is not clickable

I am trying to create my onepager site and I am not able to click my header And i want that the is on the right side not under the logo

$(function () {
    $('a[href*=#]').stop().click(function () {
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
            var UD_HASH = this.hash;
            var UD_ZIEL = $(this.hash);
            if (UD_ZIEL.length) {
                var UD_ABSTAND_TOP = UD_ZIEL.offset().top;
                $('html,body').animate({
                    scrollTop: UD_ABSTAND_TOP
                }, 1000, function () {
                    window.location.hash = UD_HASH;
                });
                return false;
            }
        }
    });
});
body,html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.ud_scroll {
    width:100%;
    height:100%;
    float:right;
    position:relative;
}

div#header {
    position: fixed;
    left:20px;
    top: 10px;
    width: 100%;
}
a {
    color:black;
    opacity:0.5;
    text-decoration:none;
    text-align:center;
    vertical-align:top;
    line-height: 100px;
}
a:hover {
    opacity:1;
}

nav {
}
nav ul {
    margin:0;
    padding:0;
    font-family: 'Roboto Slab', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scrumplex - Home</title>
    <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="files/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="files/scroll.js"></script>
</head>
<div id="header">

    <a href="#">
        <img src="files/img/logo.png" alt="Scrumplex">
        Scrumplex
        </a>

    <nav>
        <ul>
            <a href="#Hello">Hello!</a>
            <a href="#WhoAmI">Who am I?</a>
            <a href="#dl">Downloads</a>
            <a href="#cc">Copyright</a>
            <a href="#about">About</a>
        </ul>
    </nav>

</div>
<section id="Hello" class="ud_scroll"><h2>Hi</h2></section>
<section id="WhoAmI" class="ud_scroll"><h2>WhoAmI</h2></section>
<section id="dl" class="ud_scroll"><h2>dl</h2></section>
<section id="cc" class="ud_scroll"><h2>cc</h2></section>
<section id="about" class="ud_scroll"><h2>About!</h2></section>

</body>
</html>

My Header is not clickable i dont know why ps: i'm new to css and html

Upvotes: 0

Views: 966

Answers (1)

Nathan Parker
Nathan Parker

Reputation: 308

The problem you have there is that the <section id="hello"> is over all the links because the class .ud_scroll has height:100%. So instead of clicking the links, you are clicking the section. Try making it smaller, or removing the height value.

Next time you can use one of the firefox developer features: The inspector. You can open your page, and click ctrl + shift + I, and try to click on the link. You will see something like this:

enter image description here

Thats telling you that the section, with id hello, with class ud_scroll is over everything else. Since the "Hi" is inside that section, you can click and select it, but anything that is below it is unclicable.

Upvotes: 1

Related Questions