Skip to content

Instantly share code, notes, and snippets.

@cesine

cesine/index.html

Last active November 7, 2016 02:44
Show Gist options
  • Save cesine/e4553e00293f3078210563a2bbe85035 to your computer and use it in GitHub Desktop.
Save cesine/e4553e00293f3078210563a2bbe85035 to your computer and use it in GitHub Desktop.
Download ZIP
Example display block with floats (a navigation bar) Click to import: https://popcode.org/?gist=e4553e00293f3078210563a2bbe85035
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Make a navigation bar</title>
</head>
<body>
<ul class="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
<li class="nav-profile"><a href="#profile">Me</a></li>
</ul>
<div class="pretend-section">
<a id="home"></a>
</div>
<div class="pretend-section">
<a id="news"></a>
<h1>News</h1>
</div>
<div class="pretend-section">
<a id="about"></a>
<h1>About</h1>
</div>
<div class="pretend-section">
<a id="profile"></a>
<h1>Me</h1>
</div>
</body>
</html>
Raw
styles.css
.navigation {
list-style: none;
background-color: #333333;
padding: 0;
margin: 0;
}
.navigation li {
display: inline-block;
}
.nav-profile {
float: right;
}
.navigation li a {
color: white;
padding: 20px;
display: block;
}
.navigation li a:hover {
background-color: #111111;
}
.pretend-section {
border-width: 1px;
border-style: solid;
background-color: gray;
height: 20em;
}
@cesine
Copy link
Author

cesine commented Nov 7, 2016

Example display block with floats (a navigation bar)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment