Difference between revisions of "Template:Manchester/CSS"

Line 1: Line 1:
 +
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
 +
body {margin:0;}
 +
 
ul {
 
ul {
 
     list-style-type: none;
 
     list-style-type: none;
Line 8: Line 11:
 
     overflow: hidden;
 
     overflow: hidden;
 
     background-color: #333;
 
     background-color: #333;
 +
    position: fixed;
 +
    top: 0;
 +
    width: 100%;
 
}
 
}
  
Line 22: Line 28:
 
}
 
}
  
−
li a:hover {
+
li a:hover:not(.active) {
 
     background-color: #111;
 
     background-color: #111;
 +
}
 +
 +
.active {
 +
    background-color: #4CAF50;
 
}
 
}
 
</style>
 
</style>
Line 35: Line 45:
 
   <li><a href="#about">About</a></li>
 
   <li><a href="#about">About</a></li>
 
</ul>
 
</ul>
 +
 +
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
 +
<h1>Fixed Top Navigation Bar</h1>
 +
<h2>Scroll this page to see the effect</h2>
 +
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
 +
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
<p>Some text some text some text some text..</p>
 +
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 11:44, 14 June 2016

<!DOCTYPE html>

Fixed Top Navigation Bar

Scroll this page to see the effect

The navigation bar will stay at the top of the page while scrolling

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..

Some text some text some text some text..