Skip to content

Instantly share code, notes, and snippets.

@kalinchernev

kalinchernev/index.html

Created June 5, 2014 14:01
Show Gist options
  • Save kalinchernev/bc25e1a5cfdfa30a57a3 to your computer and use it in GitHub Desktop.
Save kalinchernev/bc25e1a5cfdfa30a57a3 to your computer and use it in GitHub Desktop.
Download ZIP
Example user information bar, which re-sizes in width depending on the length of the user's name.
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8"> <![endif]-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
<title>Resizable user info bar</title>
<style type="text/css">
#block-user {
width: auto; /* important to have the box resizing depending on the length of the user name */
background: #e5e5e5;
height: 20px;
position: absolute;
top: 100px;
right: 493px;
text-align: left; /* important to keep the username text increasing in the left rather than the right */
}
.user-menu .user-name {
margin-left: 7px;
}
.user-menu .user-controls {
margin-right: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="block-user">
<div class="user-menu">
<span class="user-name">Hello {Kalin Chernev}</span>
<span class="user-controls">
<a href="#" class="user-profile">My account</a>
<span> | </span>
<a href="#" class="logout">Logout</a>
</span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment