ansaurus

Question

Fixed header with scrolling content? And minor css question...

Answer 1

+2 A:

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.

Yi Jiang 2010-08-25 08:05:08

When I do that the #content and #header are jumbled together though. Any suggestions?

Josh Brown 2010-08-25 08:09:20

This is a mockup, the song player will just display a css generated play/pause (.play/.pause) in #pp and the javascript will place the current song into the #song.

Josh Brown 2010-08-25 08:10:52

With what you provided this is the result: http://grab.by/64cR

Josh Brown 2010-08-25 08:12:50

@Josh: I'd noticed that. However, your `id` for the play button is `pp`, while the styles you applied for the play button were for something with the class `play`, so I assumed the play button were to be added with js.

Yi Jiang 2010-08-25 08:13:44

@Josh: Oh, I forgot the `top` property! Sorry...

Yi Jiang 2010-08-25 08:14:38

@Yi Jiang: The pp is so I can just change the class of it wether the jPlayer is playing or paused with a callback from jPlayer. Thanks

Josh Brown 2010-08-25 08:17:01

ansaurus

tags:

views:

answers:

Fixed header with scrolling content? And minor css question...

related questions