Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!


More SEO Content

International SEM  | Social Media  |  Search Friendly Design |  SEO |   Paid Search / PPC  |  Seminars  |  Forum Threads  |  Q&A |  Copywriting |  Keyword Research   |  Web Analytics / Conversions  |  Blogging  |  Dynamic Sites  | Linking  |   SEO Services  |  Site Architecture  | Search Engine Spam  | Wrap-ups  | Business Issues |  HRA Questions  |  Online Courses

Sponsored Content

 

 
 

Photo
- - - - -

Css Position:fixed Problem

Started by Renagade Master , Nov 22 2004 07:15 AM

  • Please log in to reply
13 replies to this topic

#1 Renagade Master

Renagade Master

    HR 4

  • Active Members
  • PipPipPipPip
  • 137 posts
  • Location:London, UK

Posted 22 November 2004 - 07:15 AM

I hope there's a CSS expert that can help.

I want my logo, banner ad and nav bar to remain on screen when a user scrolls down. Similar to the effect achieved with frames. But my content scrolls over my fixed elements! Here's the code, stripped down:

CODE
<head>
    <style>
 ul#nav {position: fixed; top: 78px; left: 8px; right: 8px;
         margin: 0 0 0 0; padding-left: 0; background: #FAEBD7;}
 #nav li {display: inline; border-right: 1px solid; padding: 0 0.33em 0 0.33em;}

 img#logo {position: fixed; top: 8px; left: 8px;}
 img#banner {position: fixed; top: 8px; right: 8px;}

 div#main_content {position: absolute; top: 105px; left: 8px right: 8px; bottom: 0;}

 a:hover {background: yellow;}
    </style>
</head>
<body>

<img id="logo" src="my_logo.gif"> <img id="banner" src="banner.gif">

<ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="forum.html">Forum</a></li>
    <li><a href="about.html">About</a></li>
</ul>

<div id="main_content">

</div>
</body>

#2 Crifer

Crifer

    HR 3

  • Active Members
  • PipPipPip
  • 70 posts
  • Location:Sweden

Posted 22 November 2004 - 07:43 AM

The position:fixed only works in mozilla, NS6+, opera 7 and IE 5 on mac. Win IE treats position:fixed as position:absolute. You have to use javascript.

Kristoffer

#3 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 5,881 posts
  • Location:Blackpool UK

Posted 22 November 2004 - 08:28 AM

you mean something like this?


www.cands.dnsalias.com/articles/css/frame-style/centre-scroll/

Work in progress.

not linking it because it's on my test site as part of my upgrade (finally biggrin.gif ) and funnily enough the second time I've posted it today.

#4 torka

torka

    Vintage Babe

  • Moderator
  • 4,392 posts
  • Location:Triangle area, NC, USA, Earth (usually)

Posted 22 November 2004 - 10:05 AM

Woo-hoo, Chris! Looks like those cobbler's children aren't going to be running around barefoot much longer... wink.gif

(The page looks good, BTW -- I'm going to (ahem) "gain inspiration" from some of your CSS, I think... biggrin.gif )

--Torka mf_prop.gif

#5 Renagade Master

Renagade Master

    HR 4

  • Active Members
  • PipPipPipPip
  • 137 posts
  • Location:London, UK

Posted 22 November 2004 - 10:25 AM

QUOTE
you mean something like this?


Kind of, but without the center window, I want the window scroll bar only.

I like the idea of your site, I'll keep visiting.

Ren

#6 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 5,881 posts
  • Location:Blackpool UK

Posted 22 November 2004 - 10:29 AM

Finally a visit from the pixies biggrin.gif that is these pixies rather than these pixies biggrin.gif

and by all means, hopefully inspiration is what they are there for. I may even tidy out all the redundant CSS in the main style sheets and link them as well, It'll save anybody rooting around in the cache for them tongue.gif

#7 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 5,881 posts
  • Location:Blackpool UK

Posted 22 November 2004 - 10:47 AM

Maybe this will be nearer then The Friar Tuck-Inn

#8 qwerty

qwerty

    HR 10

  • Moderator
  • 8,288 posts
  • Location:Somerville, MA

Posted 22 November 2004 - 10:53 AM

Now that is great biggrin.gif There's some funkiness in the scrolling on the upper left of that layer, but that's minor.

You'll have to walk me through how this is done... is the overflow: hidden a big part of this?

This may indeed be the holy grill tongue.gif

#9 Renagade Master

Renagade Master

    HR 4

  • Active Members
  • PipPipPipPip
  • 137 posts
  • Location:London, UK

Posted 22 November 2004 - 12:08 PM

Thanks for the replies, I'll go and check those links now. In the mean time I've put up a demo page to help illustrate what I mean.

test.lightweightequipment.com

Ren.

#10 Renagade Master

Renagade Master

    HR 4

  • Active Members
  • PipPipPipPip
  • 137 posts
  • Location:London, UK

Posted 22 November 2004 - 01:51 PM

I've copied the technique from the munks page = have a spacer gif then stretch it across the top, then give it a higher z-index value than the content.

But this doesn't seem the best CSS way of doing it. Also it makes the display worse in IE.

#11 chrishirst

chrishirst

    A not so moderate moderator.

  • Moderator
  • 5,881 posts
  • Location:Blackpool UK

Posted 22 November 2004 - 01:57 PM

Don't know yet Bob, I bookmarked it ages back to give it a look over.
But I'll be playing with some layouts to see what makes it tick.


watch this space biggrin.gif

#12 Crifer

Crifer

    HR 3

  • Active Members
  • PipPipPip
  • 70 posts
  • Location:Sweden

Posted 22 November 2004 - 08:28 PM

I didn't really understand you the first time Renegade, sorry. I looked at your demo. Is it something like this you mean?

www.dindesign.se/temptest/test_threecolumn_float.php

Edited by Crifer, 22 November 2004 - 08:37 PM.

#13 circle-J

circle-J

    HR 2

  • Active Members
  • PipPip
  • 41 posts

Posted 23 November 2004 - 09:06 AM

Actually it's not too hard to do with IE6. It interprets position:fixed as position:static, when means basically no positioning at all.

But you can move the scroll mechanism from the root element to the document body like
CODE

html
 {
 overflow: hidden;
 }
body
 {
 height: 100%;
 overflow: auto;
 }

This will only work with IE 6 in standards mode though, you have to have a full DTD.

Another method that will work with IE 5.x and up looks like this:
CODE

body
 {
 overflow: hidden;
 }
div.content
 {
 height: 100%;
 overflow: auto;
 }

Absolutely positioned elements outside div.content will be "fixed" to the viewport, elements inside div.content will act normally.
But to function correctly IE6 needs to be in quirks mode this time. MS has really created a mess with it's changing of implementation for each version of IE. They don't even follow their own "standards" from one version to the next.

You can do it with javascript, but it usually results in jerky screen scrolling like you see in the Friar Tuck site linked above.
Another method is to use expressions, and then there is IE7 as a solution. But it has problems too depending on the layout around it.

C-J

#14 Renagade Master

Renagade Master

    HR 4

  • Active Members
  • PipPipPipPip
  • 137 posts
  • Location:London, UK

Posted 23 November 2004 - 10:04 AM

Cheers C-J,

I was looking for something similar to your link above, but where the browser scroll bar is the only one.

I've changed the demo, this time I've used a white picture that is 1x1px then streched this to cover the area behind the logo and banner. Then placed the banner above, like this:

banner, logo and nav have z-index of 20
white spacer has z-index of 15
the main content has z-index 10

this has the effect of the main content disappearing behind the white spacer when the scroll bar is used.
Back to CSS/XHTML Discussion and Questions


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. HRF SEO Forum
  2. → Search Engine Optimization
  3. → Search Engine Friendly Design & Usability
  4. → CSS/XHTML Discussion and Questions
  5. *READ FIRST*--> Forum Rules