Header Example (Reddit)

http://www.reddit.com/r/web_design/comments/oiyvw/is_there_a_default_padding_for_images_in_a_page/

by m_raffaele

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">
    <h1>Statues</h1>
    <hr />
    <ul>
        <li><a href="#">Comics</a></li>
        <li><a href="#">Figures</a></li>
        <li><a href="#">Statues</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Map</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>
</body>
</html>

CSS

/* 
*
* CSS Example for: http://www.reddit.com/r/web_design/comments/oiyvw/is_there_a_default_padding_for_images_in_a_page/
*
*/
/* Very simple reset */
* {
    margin:0;
    padding:0;
}
body {
    font-family:Impact,Charcoal,sans-serif;
}

/* Header Wrapper */
#header {
    width:626px;
    height:128px;
    padding:10px;
    border:10px solid #000;
    background:url("http://lorempixel.com/g/626/128/nature/2/") no-repeat center center;
}

/* Title */
#header h1 {
    text-transform:uppercase;
    text-align:right;
    padding:22px 38px 0 0;
    color:#fff;
    text-shadow:2px 2px 10px #000;
    font-size:46px;
}
/* The red bar */
#header hr {
    border:3px solid #000;
    background:#f00;
    height:10px;
    margin:-18px 0 10px;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

/* Menu */
#header ul {
    list-style:none;
    background:#000;
    overflow:hidden;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
    padding:2px 0 2px 34px;
}
#header ul li {
    float:left;
    font-size:24px;
    margin:0 10px 0 0;
    color:#fff;
}
#header ul li:after {
    content:"/";
    margin:0 0 0 10px;
}
#header ul li:last-child:after {
    display:none;
}
#header ul li a {
    text-decoration:none;
    color:#fff;
    text-transform:uppercase;    
}
#header ul li a:hover {
    color:#f00;
}