0

I intend to design a webpage using Dreamweaver that scrolls only the content on the page. Leaving the background image with no effect upon scrolling.

Sub Qstn - How to allow the header to be active that is always on top as the page is scrolled down the webpage. Facebook.com attributes this feature the blue header always stays active.

I look forward for instruction designing in Dreamweaver. Responses appreciated using other methods and software tools. I'd be pleased if the answers for are structed seperately for both questions.

*content - i.e. Basically the LOGO, text, pictures and what ever that above the background image.

*header - ie.e where usually the LOGO and mostly where the menus are placed. I hope you undestand what I am referring to in Facebook.

Thanks in Advance & Cheers!

Squig
  • 862
  • 6
  • 15
theprotocol
  • 1
  • 1
  • 1
  • 1
    1) use a style of `background-attachment:fixed`. 2) I believe DreamWeaver calls these things "layers". But you can also simply use a style of `position:fixed`. 3) StackOverflow is not a tutorial site. – Mr Lister May 08 '12 at 08:11

3 Answers3

0

About the fixed header:

In CSS, this is achieved by:

#header {
    position: fixed;
}
#content {
    padding-top: enough; /* otherwise the header would hide the beginning of content */
}

There are MANY problems with this method:

  • pressing space to scroll one page will ignore the fact that part of the page is occupied by fixed content. The content doesn't occupy anymore the height of 1 page exactly, slightly less.
  • fixed footer is even worse: using a keyboard tabs through links and form elements but they'll appear below the fixed footer. Please don't do that or have a way to disable it on a per-user basis.
  • It'll take useful screen real estate on netbooks; 1024 x 600 px minus OS bar, window bars, browser menus: there aren't so much height left!
  • Users know where your header or menu is: on top of page. They know how the web works, it's OK. You can still provide 'Go to top' links/shortcuts, they can be useful on long pages.
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • I wonder why Google (in some of their apps), Twitter and Facebook for example use this technique if it's so bad. – ONOZ May 08 '12 at 08:19
  • 2
    @ONOZ I'm talking about webpages with content, not apps so Google examples are irrelevant here. Twitter has a 40px fixed header, that's reasonable (while still annoying at times). I can't remember for Facebook. Both are very particular, displaying infinite content: not your average webpage/site. Are they doing the right thing© or did users get accustomed to small "crap"? Did they solve bigger problems at the trade of introducing smaller annoyances? On a general note, "*big website A is doing it thus I can do the same even though my content is unrelated*" isn't sth we should consider imo – FelipeAls May 08 '12 at 08:31
  • I am not saying it's good because some big players use it, I was just wondering why it was. Maybe you could use this in your answer, as the question doesn't state wether it's a content-based website or a more app-like website. – ONOZ May 08 '12 at 09:59
0

I can link you in the right direction.

As mentioned on Scroll to anchor with fixed header, content hidden behind header, margin and top padding not working you can get the answer for your sub question on http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-D notice how the navigation is fixed as the content scrolls up and down.

Please see this demo on w3schools http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment with regards to fixed background. Hope this helps.

For a lot of this you will need atleast some html/css knowledge dreamweaver can only do so much before you'll need to learn html and css.

Community
  • 1
  • 1
Anicho
  • 2,647
  • 11
  • 48
  • 76
0
background: url("asdf.jpg") fixed;
Luke
  • 11,426
  • 43
  • 60
  • 69
Scuba Kay
  • 2,004
  • 3
  • 26
  • 48