Whenever I try to position the text above the rectangle, it disables the link. How can I resolve this issue? Additionally,
when attempting to change the color of the "San Diego" text, I'm unable to adjust its position. Just a heads up, I am new to HTML.
#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>