CODEWITHSUNDEEP
htmlcss
Josh Brown
Josh Brown

Reputation: 853

Fixed header with scrolling content? And minor css question

How can I make the header fixed and the content scroll "under" the header? Also how can I get the CSS Play button to be above the line and look decent?

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>lingo records</title>

    <meta charset="utf-8">
    <link rel="icon" href="/favicon.png">
    <link rel="author" href="http://forksforoatmeal.com">
    <link rel="stylesheet" href="/assets/css/lingo.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="/assets/js/jquery.jplayer.min.js"></script>
    <script src="/assets/js/lingo.js"></script>
</head>
<body>
    <div id="header">
        <h1 class="header">lingo records</h1>
        <ul id="navigation">
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#samples">samples</a></li>
            <li><a href="#contact">contact</a></li>
        </ul>
        <div id="music_player">
            <span id="pp"></span>
            <span id="song"></span>
        </div>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="clear">&nbsp;</div>
    <div id="footer">
        &copy; 2010 lingo records. <a href="http://forksforoatmeal.com">Josh Brown</a>
    </div>
    </body> 
    </html>

lingo.css:

/* Yahoo Style Reset Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
html{color:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}


body {
/*  background-color: #63B7D4;*/
    background-color: #fff;
    margin: 30px;
    font-family: 'Philosopher', sans-serif;
    font-size: 14px;
    color: #4F5155;
}

a {
    color: #475152;
    background-color: transparent;
    font-weight: normal;
}


h1.header {
    font-family: 'Philosopher', sans-serif;
    font-size: 70px;
    letter-spacing: -4px;
}

#header {
    position: static;
    border-bottom: 1px solid #D0D0D0;
}

#header #navigation a {
    font-family: 'Philosopher', sans-serif;
    font-size: 22px;
    text-decoration: none;
}
ul#navigation > li {
    display: inline;
    list-style-type: none;
    margin-right: 15px;
}

#header #navigation a:hover {
    text-decoration: underline;
}

#header #navigation a:last-child {
    margin-right: 0px;
}

#content {
    margin-top: 60px;
    font-size: 20px;
}


#footer {
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size: 12px;
}


/* Music Player */
#music_player {
    float:right;
    margin-right: 30px;
    margin-bottom: 5px;
    width: 250px;
}

.play {
    display:block;
    width:0;
    height:0;
    border-style:solid;
    border-width: 8px 0px 8px 16px;
    border-color:transparent transparent transparent #4F5155;

}
.pause{
    display:block;
    width:16px;
    height:16px;
    border-left:32px double #4F5155;
}

@font-face {
    font-family: Philosopher;
    src: url(/assets/fonts/Philosopher.otf);
    font-weight:400;
}

Thanks in advance for your help! -Josh

Upvotes: 0

Views: 989

Answers (1)

Yi Jiang
Yi Jiang

Reputation: 50155

You can use position: fixed for it to stay in place as the user scrolls, although you'd probably need to apply a (semi-transparent) background for the header contents to be visible when the user scrolls. The styles you need to add are:

#header {
  position: fixed;
  width: 100%; /* Or whatever width you need it to be */
  background-color: rgba(255, 255, 255, 0.7); /* Use semi-transparent png for IE support */
  top: 10px;
}

#content {
  margin-top: 160px; /* To push content off the top of the page */
}

As for the song player, you need to provide either a link to the page you are working on, or some sort of sample, as without the Javascript it is impossible to see what sort of markup is generated and what style is necessary for it to 'look decent'.

Edit: About that music player button... The method you're using looks to me to be a bit of a hack. I mean, you have to be really desperate to need to use border to create the play triangle, right? You're probably better off just using background-image instead, with something like

#pp {
  background: url('path/to/image.png') no-repeat scroll left top;
  padding-left: 10px;
}

for the play button.

Upvotes: 2

Related Questions