How do I put href text on top of a rectangle div box?

Question

Whenever I put the text on top of the rectangle it doesn't let me click the link anymore. How can I fix this? Also,

whenever I try to change the color of the "San Diego" text, it doesn't let me change the position of the text. I am a beginner in HTML by the way.

  #ViewOnMaps {
    background-color: #FF604C;
    height: 35px;
    width: 150px;
    position: absolute;
    top: 245px;
    left: 50px;
    opacity: .5;
  }
  #circular {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat;
    position: absolute;
    top: 15px;
    left: 45px;
  }
  span.SanDiego {
    position: absolute;
    top: 250px;
    left: 70px;
    width: 100%;
    font-size: 20px;
    color: #999;
  }
  span.ViewOnMaps {
    position: absolute;
    top: 235px;
    left: 78px;
  }
  #maps {
    background-color: white;
    height: 300px;
    width: 220px;
    border-style: solid;
    border-color: #B4B4B4
  }
  #menu {
    position: absolute;
    right: 52px;
    bottom: 638px;
  }
  body {
    background-color: #E8E8E8;
  }
  nav {
    background-color: white;
    height: 75px;
    width: 1140px;
    float: right;
    border-style: solid;
    border-color: #B4B4B4
  }
  nav ul {} nav ul li {
    list-style-type: none;
    width: 150px;
    float: left;
    text-align: center;
  }
  li a {
    text-decoration: none;
    color: #999;
    line-height: 50px;
    display: block;
  }
  li a:hover {
    text-decoration: underline;
    color: #FF604C;
  }

<nav>
  <ul id="menu">
    <li><a href="flatuigoal.html">Home</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="#">Message</a>
    </li>
    <li><a href="#">Music</a>
    </li>
    <li><a href="#">Search</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Location</a>
    </li>
  </ul>
</nav>
<div id="maps"></div>
<div id="circular"></div>
<span class="SanDiego">
       <a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a>
    </span>
<div id="ViewOnMaps"></div>

score 1 · Answer 1 · answered Aug 07 '15 at 03:52

1

Change/add your style with this

span.SanDiego {
    position: absolute;
    top: 250px;
    left: 70px;
    width: 100%;
    font-size: 20px;
    z-index:1;
}
.SanDiego a {color:red} /*--Change your text's color here--*/

Demo

answered Aug 07 '15 at 03:52

Eezo

1,586
2
15
25

score 0 · Answer 2 · answered Aug 07 '15 at 05:38

You have used unnecessary positioning of the elements everywhere. If you are using absolute position you must specify the position:relative to the parent div, otherwise the position will be relative to the body of the html.

I didn't understood your question properly but from what i get i tried to solve it as much as possible. Here is the solution: http://codepen.io/vikrantnegi007/pen/LVqvjN

HTML Code:

<div id="maps">
    <div id="circular">

    </div>
    <div class="SanDiego">
        <a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a>
    </div>

</div>

    <nav>
  <ul id="menu">
    <li><a href="flatuigoal.html">Home</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="#">Message</a>
    </li>
    <li><a href="#">Music</a>
    </li>
    <li><a href="#">Search</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Location</a>
    </li>
  </ul>
</nav>

CSS Code:

  #circular {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat;
    position: absolute;
    top: 15px;
    left: 35px;
  }
  div.SanDiego {
    background-color: #ff604c;
    padding: 15px;
    opacity: 0.5;
    position: absolute;
    top: 220px;
    left: 35px;    
    font-size: 20px;
    color: #999;
  }

  #maps {
    background-color: white;
    height: 300px;
    width: 220px;
    border-style: solid;
    border-color: #B4B4B4;
    float: left;
    position: relative;
  }
  #menu {

    right: 52px;
    bottom: 638px;
  }
  body {
    background-color: #E8E8E8;
  }
  nav {
    background-color: white;
    height: 75px;
    width: 1140px;
    float: left;
    border-style: solid;
    border-color: #B4B4B4;
    margin-left: 30px;
  }
  nav ul {} nav ul li {
    list-style-type: none;
    width: 150px;
    float: left;
    text-align: center;
  }
  li a {
    text-decoration: none;
    color: #999;
    line-height: 50px;
    display: block;
  }
  li a:hover {
    text-decoration: underline;
    color: #FF604C;
  }

Tell me if there is anything else you want to do with it.

How do I put href text on top of a rectangle div box?

2 Answers2