priyo priyo - 3 months ago 11
CSS Question

Put a link over the right border

The following script would generate a display like this:

<style>
nav { position: fixed; left: 10em; top: 5em; border-right: 100px solid #0000cc; box-shadow: 4px 0 5px rgba(0,0,0,0.8);}
</style>
<body>
<nav><a href="http://www.google.com/">Google</a>
<ul>
<li>White</li>
<li>Blue</li>
<li>Yellow</li>
<li>Black</li>
<li>Green</li>
<li>Orange</li>
<li>Pink</li>
<li>Red</li>
<li>Magenta</li>
</ul>
</nav>
</body>


enter image description here

I would like google.com link located on the right border as shown below:
enter image description here

how to fix those script ?
Thank you for the help.

Answer

Output

Here is a working fiddle for your problem.

I've simply added an ID to your link, called "floatingLink", changed the color of the link to white (#fff) and positioned it absolutely. Change the top and/or left properties to adjust the position.

The code that achieves it is:

#floatingLink {
  color:#fff;
  position : absolute;
  left: 7.5em; 
  top: 1em;
  z-index: 1;
}