CODEWITHSUNDEEP
htmlcsscursor
darkwing
darkwing

Reputation: 67

'Click' cursor is appearing over divs on webpage?

I have a small but strange problem that I'm having trouble figuring out. Whenever I move my cursor over the divs on my webpage they become clickable, which I don't want, since it affects other things on the webpage, such as web forms and such not being usable. I figured out that it's a problem between the navigation bar and divs not interacting well, since when I remove either one of them, the webpage works as intended (basically the 'click' cursor doesn't appear where it shouldn't, which is how I want it). However, I need them both at the same time, can anyone suggest a fix by looking at my code quickly? Thanks :)

The code of my small html and css pages are below: 

body {
  /*This applies to the body element of the html page as a whole*/
  margin: 0;
  /*I don't want specific margin or padding for the web page*/
  padding: 0;
}
#header {
  height: 8em;
  padding: 0;
  background-color: black;
  width: 100%;
  /*solid thick creates a border around top of header*/
}
#header p {
  margin-left: 500px;
  /*puts a 500px space between the text and left margin*/
  color: black;
  font-family: 'Dancing Script', Georgia, Times, serif;
  font-size: 58px;
  margin-top: 0px;
}
#topgraphic {
  width: 100%;
  padding: 0;
  background-color: blue;
  height: 20em;
}
#bottomleft {
  width: 50%;
  padding: 0;
  background-color: red;
  height: 21.6em;
  position: relative;
  float: left;
}
#bottomright {
  width: 50%;
  padding: 0;
  background-color: green;
  height: 21.6em;
  position: relative;
  float: right;
}
.nav {
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  padding-top: 50px;
  padding-left: 600px;
  position: fixed;
}
.nav li {
  display: inline;
  padding-right: 50px;
}
.nav a {
  color: white;
  font-size: 25px;
  font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.nav li:hover {
  background: none;
  border-radius: none;
}
.nav li:hover a {
  color: white;
}
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Home Page</title>
  <link href="ceredigioncss.css" type="text/css" rel="stylesheet" />
  <!--style sheet containing formatting-->
  <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>


</head>

<body>
  <div id="header">
    <ul class="nav">
      <li>
        <a href="index.html" />Home
      </li>
      <li><a href="submitrequest.html" />Submit a request</li>
      <li><a href=" " />Our plumbers</li>
      <li><a href="login.html" />Login</li>
      <li><a href=" " />Edit profile</li>
      <li><a href=" " />Request hub</li>
      <li><a href=" " />Admin</li>
    </ul>
  </div>

  <div id="topgraphic">

  </div>

  <div id="bottomleft">

  </div>

  <div id="bottomright">
  </div>


</body>

</html>

Upvotes: 1

Views: 1343

Answers (2)

Hitesh Dabhi
Hitesh Dabhi

Reputation: 118

You missed ending tag try to complete it 

<ul class="nav">
      <li>
          <a href="index.html">Home</a>
      </li>
        <li><a href="submitrequest.html">Submit a request</a></li>
        <li><a href=" " >Our plumbers</a></li>
        <li><a href="login.html" >Login</a></li>
        <li><a href=" " >Edit profile</a></li>
        <li><a href=" " >Request hub</a></li>
        <li><a href=" " >Admin</a></li>
    </ul>

Upvotes: 2

BasySilver
BasySilver

Reputation: 430

This effect is because your divs are children of your anchor which makes them behave like the anchor itself. This happens because you forgot to close your anchor-tags:

<li><a href="submitrequest.html" />Submit a request</li>
<li><a href=" " />Our plumbers</li>
<li><a href="login.html" />Login</li>
<li><a href=" " />Edit profile</li>
<li><a href=" " />Request hub</li>
<li><a href=" " />Admin</li>

add </a> to close your anchors.

Upvotes: 3

Related Questions