This is usually a simple thing to do I thought but for some reason I just can't get it.
So as you can see below (snippet), I have a ul with lis that are fixed to the left side of the screen as small tabs. When hovered over, they expand. I am trying to make it so that it just reveals the straight line of text instead of un-wrapping it as it expands. What do I do?
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
You can add white-space: nowrap to prevent the text from wrapping to the next line.
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
/* added this: */
white-space: nowrap;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
Try using margin-left instead of width like this:
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 250px;
background-color: gray;
margin-left: -230px;
position: relative;
top: 100;
overflow: hidden;
transition: all .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
margin-left: 0px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
You could add something like this <nobr>NOT HOME</nobr>
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 10px;
background-color: gray;
margin-left: 0;
position: relative;
top: 100;
overflow: hidden;
transition: width .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
width: 250px;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1><nobr>NOT HOME</nobr></h1>
</li>
</ul>
</body>
Ashkay's answer if correct. Anyway you can also manipulate margin-left instead of width. Then you will achieve nice effect of moving text with the box.
See the snippet below.
body {
margin: 0;
background-color: black;
font-family: sans-serif;
}
#navTabs {
width: 100%;
padding-left: 0;
position: fixed;
}
#navTabs li {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
height: 75px;
width: 250px;
background-color: gray;
margin-left: -240px;
position: relative;
top: 100;
overflow: hidden;
transition: margin .75s;
list-style: none;
word-wrap: none;
}
#navTabs li:hover {
margin-left: 0;
}
#navTabs li h1 {
position: relative;
left: 30px;
}
<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>
Related
I'm trying to create a horizontal/scrollable nav with gradient fades on each end. Setting the parent to overflow: auto almost solves my problem but hides my active link border, which I position absolute as a :before pseudo above its parent link. I was wondering if there was a way for me to keep the overflow while having my pseudo border break out of it? For the sake of this question, the gradient really doesn't matter per se but this structure needs to remain in tact.
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
Negative margins will do the trick:
ul {
margin: 0;
}
li {
display: inline-block;
}
.vertical-title {
height: 55px;
margin-bottom: 13px;
border-bottom: 3px solid #dceaec;
font-size: 22px;
line-height: 57px;
color: #111;
text-align: center;
text-transform: uppercase;
}
.vertical-title-wrapper {
padding: 0;
z-index: 0;
position: relative;
}
.hub-nav {
display: block;
padding: 0 15px;
width: 100%;
z-index: 1;
white-space: nowrap;
overflow: auto;
padding-top: 16px;
margin-top: -16px;
}
.hub-nav-link {
position: relative;
}
.hub-nav-link.active-path:before {
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
position: absolute;
top: -16px;
background-color: #007eff;
}
<div class="hub-wrapper">
<div class="vertical-title">
Page Title
</div>
<nav class="hub-nav">
<ul class="hub-nav-list">
<li class="hub-nav-list-item">
<a class="hub-nav-link active-path" href="">
There's supposed to be a border above me!
</a>
</li>
</ul>
</nav>
</div>
<div>
Content Below
</div>
So that you don't have to look for too long - I added these two lines into your snippet:
.hub-nav {
padding-top: 16px;
margin-top: -16px;
}
I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>
Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
This is incredibly frustrating but I am having problems aligning link text within an li after adding an animation. I took the animation from a menu that was aligned horizontally instead of vertically and have been able to integrate the animation in however my link text skewed as a result.
Each link is within an li. Below is a demo with circle animation:
.menubar {
position: absolute;
height: calc(100% - 32px);
width: 137px;
left: -140px;
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
padding-top: 0px;
padding-bottom: 40px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
text-align: left;
}
nav ul li {} nav ul li a {
display: block;
padding: 50px;
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
-webkit-animation: circle 1.2s ease-in forwards;
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%;
height: 20px;
top: -12px;
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
text-align: center;
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>
I have tried placing padding and using left and right on menu button, menu text, nav ul li a, everything. Even tried putting text in individual ps within the li.
But my text is still not centered in the box that forms on hover:
I need the text ("username", "chat," etc) to be left aligned within the menubar and centered (the text is slightly to the bottom and very much to the right) within the "circle" box that is formed on hover.
How can I do this?
Initially I had misunderstood your question and written a different answer. Below is the correct one.
There are a lot of extra/unnecessary settings in your code but the key reason why you are not able to achieve the left align is because the ul elements always have a default padding associated with it. It pushes the contents of the list to the right by a large value and hence it will look as though alignment is not proper.
If you make the changes that I've indicated in the below snippet, you'd be able to get what you need.
.menubar {
position: absolute;
/*height: calc(100% - 32px);
width: 137px; ideally these should be large enough to accomodate the element */
/*left: -140px; commented for demo */
top: 38px;
background-color: #52DBA5;
}
.menubutton {
width: 100%;
height: 80px;
/*padding-top: 0px;
padding-bottom: 40px; not required*/
text-transform: uppercase;
/*text-align: center; remove this */
cursor: pointer;
font-family: "Source Sans", Helvetica, Arial;
font-weight: bold;
background-color: rgba(0, 0, 0, 0);
display: block;
text-decoration: none;
line-height: 80px; /* add this to vertically center align the text */
}
/*HERE for menu animations*/
nav {
width: 100%;
}
nav ul {
list-style: none;
/*text-align: left; not required as this is default */
padding: 0px; /* add this */
}
nav ul li {} nav ul li a {
display: block;
text-indent: 8px; /* add this to indent just the text without affecting white box */
padding: 0px; /* change this */
top: 10px;
text-decoration: none;
color: #52DBA5;
text-transform: uppercase;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .3s;
}
nav ul li a:hover {
color: #52DBA5;
}
nav.circle ul li a {
position: relative;
overflow: hidden;
z-index: 1;
}
nav.circle ul li a:after {
display: block;
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '.';
color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
background: transparent;
}
nav.circle ul li a:hover:after {
animation: circle 1.2s ease-in forwards; /* changed so others can see animation */
padding-right: 50px;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* Keyframes */
#-webkit-keyframes circle {
0% {
width: 1px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 1px;
z-index: -1;
background: white;
border-radius: 100%;
}
100% {
background: white;
height: 5000%;
width: 5000%;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0px;
margin: auto;
border-radius: 0;
}
}
.menutext {
width: 100%; /* change this */
/*height: 20px;
top: -12px; not required */
color: #39946f;
font-family: "source sans pro", , Helvetica, Arial;
font-weight: bold;
/*text-align: center; remove this */
text-decoration: none;
}
<div class="menubar">
<nav class="circle">
<ul>
<li class="menubutton"><a class="menutext" href="#">'.$account['username'].'</a>
</li>
<li class="menubutton"><a class="menutext" href="#">chat</a>
</li>
<li class="menubutton"><a class="menutext" href="#">settings</a>
</li>
<li class="menubutton"><a class="menutext" href="#">users</a>
</li>
</ul>
</nav>
<form class="logoutframe" method="post" id="logout">
<input class="logout" type="submit" name="logout" value="logout" /></input>
</form>
</div>
I'm having trouble with the header div of this website I'm making. There is padding or something appearing underneath my horizontal menu bar even though my padding is set to 0. I know that similar posts have been made about the but I have read quite a few and none of the answers seemed to do the trick for me. I have changed the background of the header div to yellow to make it more visible. There is also a pixel or two on either side of the menu bar which are unwanted. I'll put my css and html code below. screenshot
<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
<li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
<li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
<li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
<li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
</ul>
</ul>
And here is the relevant CSS. (The 'Big' class is what I'm using for all the major elements on the page.)
body {
background-image:url("Images/background.png");
background:tile;
}
.header img {
width: 100%;
}
.header {
background-color: yellow;
height: auto;
padding-top: 30px;
padding-left: 0px;
padding-bottom: 0px;
margin-top: 10px;
}
.big {
width: 80%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px #C5C5C5;
}
Here is the css for my navbar.
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
I have added an example to show http://codepen.io/simondavies/pen/jWjoBy
It working please check out the css, html etc
I have guestimated some stuff... Hope it will be a help
<div class="big header">
<div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<li><!--<ul class="logo"></ul>--></li>
</ul>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: yellow;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 150px;
padding: 30px 0 15px 0;
margin: 0;
}
.header-img img {
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.big {
margin: 0 auto;
padding: 0;
margin-top: 10px;
width: 80%;
box-shadow: 0px 0px 20px #C5C5C5;
}
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin: 0;
padding: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"] {
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float: right;
list-style-type: none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
You have an error in your HTML:
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
The only descendants of either <ul> or <ol> should be <li>. It is possible that this could be the issue.
I corrected the markup in two ways, without reproducing your issue:
By wrapping <ul class="logo"> inside of an <li> (essentially assuming it was a sublist in your list
By closing your first <ul>, and then letting the second list sit adjacent to it
But I also could not reproduce your issue by leaving the markup alone
So, the issue may be:
You need to use a CSS reset to remove default margins and paddings that the browser is providing
There is another ruleset that is adding padding to your .header
That other ruleset may have a higher specificity
That other ruleset may have an !important declaration
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>Home
</li>
<li>Gallery
</li>
<li>Message
</li>
<li>Music
</li>
<li>Search
</li>
<li>Settings
</li>
<li>Location
</li>
</ul>
</nav>
<div id="maps"></div>
<div id="circular"></div>
<span class="SanDiego">
View on Maps
</span>
<div id="ViewOnMaps"></div>
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
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">
View on Maps
</div>
</div>
<nav>
<ul id="menu">
<li>Home
</li>
<li>Gallery
</li>
<li>Message
</li>
<li>Music
</li>
<li>Search
</li>
<li>Settings
</li>
<li>Location
</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.