Skip to content

Instantly share code, notes, and snippets.

@bovan

bovan/roundedClickableHeader.html

Created November 8, 2010 14:02
Show Gist options
  • Save bovan/667713 to your computer and use it in GitHub Desktop.
Save bovan/667713 to your computer and use it in GitHub Desktop.
Download ZIP
rounded clickable header, the clickable field aint rounded though :(
Raw
roundedClickableHeader.html
<!doctype html>
<html>
<head>
<title>clickable header</title>
<style type="text/css">
header, a, p { margin: 0; padding: 0;}
/* ******************************************************************* */
/* the header has a rounded border */
header {
margin: 0 auto;
width: 950px;
background: #000 url('http://upload.wikimedia.org/wikipedia/commons/7/70/Deathvalleysky_nps_big.jpg') no-repeat center center;
background-size: 100% auto;
height: 100px;
border-radius: 40px 40px 0 0;
overflow: hidden;
}
/* the link inside gets a full size so the entire header is clickable */
header a {
width: 950px;
height: 100px;
display:block;
/* any way to make this have rounded edges? */
}
/* ******************************************************************* */
</style>
</head>
<body>
<header>
<a href="#"></a>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment