www.webdeveloper.com
Results 1 to 6 of 6

Thread: Positioning and anchor tags...

  1. #1
    Join Date
    May 2005
    Location
    In a house... thats nexts to a road...
    Posts
    45

    Positioning and anchor tags...

    when using positioning for page layout i have a page with a fair bit of text and i use named anchors to navigate the page but the problem lies in the fact that when i click on one of the links it puts that portion at the top of the window... which is conveintly under my header div

    so the question is how do i make the named achors when clicked go to the top of the content div not the window...
    I a n00b... hehe
    ~~~~~
    Weeeeeeeeeeeeeeee!!! This is fun... no?

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910

  3. #3
    Join Date
    May 2005
    Location
    In a house... thats nexts to a road...
    Posts
    45
    ok this is what i got
    even thought the images aren't there...

    http://faysart.awardspace.com/webonly.htm


    when u click on the names of the poems....

    u'll see what i tried to describe.....
    I a n00b... hehe
    ~~~~~
    Weeeeeeeeeeeeeeee!!! This is fun... no?

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You need to move the scrollbar from body to the div that needs to scroll. You'll need to do some other tweaking as well.

    Code:
    body {
      overflow: hidden;
    }
    div.content {
      overflow: auto;
    }
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  5. #5
    Join Date
    Feb 2006
    Posts
    32
    I have a similar problem. I've applied the scrollbar to my main content div, and I have a header and footer div all styled as follows:
    Code:
    #header1 {
    	position: fixed;
    	z-index: 1;
    	top: 0px;
    	left: 0px;
    	background: #FFFFFF;
    }
    #footer {
            position: fixed; 
    	z-index: 1;
            bottom: 0px;
            left: 0px;
            background: #FFFFFF;
    }
    #main_content {
    	position: absolute;
    	z-index: 0;
    	overflow: auto;
    	width: 100%;
    	top: 120px;
    	left: 0px;
    	right: 0px;
    	bottom: 23px;
    }
    To get fixed positioning working in IE I've applied an external javascript. The div scrollbar works fine in Firefox/Safari etc but not in IE 6 - a whole page scrollbar is visible and when I put anchors into the main content div I have the problem that the content with the anchor goes to the very top of the page - i.e behind the header div. Go here to see what I mean - click on one of the names:
    http://www.romanian-culture.org/personalities.htm

    So, my question is, is there any workaround for IE?!

  6. #6
    Join Date
    Feb 2006
    Posts
    32
    Ok, after trawling the web I've realised that there's no easy solution. I really don't want to use frames so here's my compromise:
    Code:
    #header1 {
    	position: absolute;
    	z-index: 1;
    	top: 0px;
    	left: 0px;
    	background: #FFFFFF;
    }
    #main_content {
    	position: absolute;
    	z-index: 0;
    	overflow: auto;
    	width: 100%;
    	top: 120px;
    	bottom: 0px;
    }
    This gives a header and scrollable main content div with working anchors in Fx/Safari etc and in IE it just appears as a single scrollable page. (i.e the header scrolls with the content). I've completely removed the footer as this was more hassle than it was worth. I've also removed fixed positioning as the scrolling of fixed position divs in IE looked shoddy with the JS I was using anyway. So, no IE support for what I wanted to achieve, but as my client uses Safari I should get away with it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles