www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS problem.

  1. #1
    Join Date
    Feb 2005
    Location
    Pasadena, CA
    Posts
    55

    Question CSS problem.

    I am trying to have a horizontel section just on the very top of my page that extends the entire horizontel length of the page. I want that section or my "links" section to be a different background color than the "body1" section. I also would like for the "body1" section to scroll separately from the "links" section and therefore have the links section stay fixed on top of the page.
    How do I do this? My code below is not working correctly:

    #links {
    position: absolute;
    background-color:#ffcc99;
    background-repeat: repeat-x;}

    #body1 {
    position: absolute;
    top: 100px;
    background-color:#cc9900;}

    #area1 {
    position: absolute;
    top: 200px;}

    #area2 {
    position: absolute;
    top: 400px;}

    #area3 {
    position: absolute;
    top: 600px;}

    #area4 {
    position: absolute;
    top: 800px;}

    I tried fixed positioning for the links section only but that did not work. The body1 section is always overlapping the links section and scrolling over it while the links section just sits there. Also I can not get the links section to extend horizontely across the page with the background color. I am using div's. Please help and explain simply since I am new at this. Thanks.

  2. #2
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    Hi,
    Thought I might give this a go...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .links {
    position: absolute;
    background-color:#ffcc99;
    height:19px;
    width:100%;
    }
    .body {
    position: absolute;
    top: 50px;
    background-color:#cc9900;
    clear:both;
    width:100%;
    }
    </style>
    </head>
    <body>
    <div class="links">Home</div>
    <div class="body">&nbsp;</div>
    </body>
    </html>

    Although I can't make the navigation perminately stay at the top if the page scrolls down, but ideally you should limit the amount on each page so that the user does minimal scrolling anyway. If you desperately wanted it this way you can use frames (which I strongly don't recommend).

  3. #3
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    There is a way you can do this using css but IE doesnt support it.

    or fit this to the page:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Scrolly div thing.</title> <style type="text/css"> div#text{ width: 300px; height: 300px; position: absolute; left: 100px; right: 150px; overflow: auto; } </style> </head> <body> <div id="text"> <p>This text will scroll when there's enough of it. This is pretty good because all the other bits and pieces can be positioned without buggering anything up, it's also cross-browser friendly. The one limitiation is that the scroll bar will be on the edge of the &gt;div&lt;, rather than at the edge of the page.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus commodo aliquet diam. Nunc eget orci et nunc tristique volutpat. Suspendisse in mi ut nunc ornare vestibulum. Suspendisse dui est, tempus ut, consectetuer ac, imperdiet et, nisl. Phasellus pellentesque dignissim lacus. Aliquam aliquet. Donec sagittis dui. Phasellus tellus. Ut congue fermentum diam. Quisque nec ipsum id odio auctor auctor. Vestibulum sollicitudin, dolor iaculis dignissim scelerisque, nulla orci rhoncus magna, nec laoreet pede libero non enim. Nulla facilisi. Donec bibendum, risus non pulvinar euismod, tortor wisi molestie ante, vel euismod ipsum turpis eu justo. Donec laoreet tempor augue. Ut tortor mauris, convallis sit amet, placerat at, blandit non, sapien. Praesent venenatis pulvinar neque. Integer dapibus, ligula sit amet rutrum vestibulum, augue nulla dictum ligula, vel venenatis nulla nibh non velit. Suspendisse adipiscing ullamcorper eros. Cras suscipit.</p> </div> </body>

  4. #4
    Join Date
    Apr 2005
    Posts
    3
    The IE issue was one that I faced as well. IE does not suppor the position:fixed attribute, which is the ideal way to achieve this effect. I eventually gave up on the whole idea in order to maintain more cross-browser compatibility. That said, I still held on to several non-cross-browser things because dammit, people should upgrade! (he said, snootily).

    If you want some neat ideas for layout, check out Eric Meyer's CSS/Edge stuff at http://www.meyerweb.com/eric/css/edge/. Have a look in both IE and Mozilla (or Netscape) to see where IE falls short.

    Also, I don't believe you would need to use the clear:both, and I would certainly stay away from using that attribute in the Body tag at any length.

    Unless you want to use JavaScript (and I don't), you'll have to wait until IE supports position:fixed to make that non-moving menu effect. The W3 use it on some of their pages - it is a functional menu in IE, but it does what it's supposed to in Mozilla (see: http://www.w3.org/QA/Tips/).

  5. #5
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Quote Originally Posted by Kurius_O
    The IE issue was one that I faced as well. IE does not suppor the position:fixed attribute, which is the ideal way to achieve this effect. I eventually gave up on the whole idea in order to maintain more cross-browser compatibility. That said, I still held on to several non-cross-browser things because dammit, people should upgrade! (he said, snootily).

    Unless you want to use JavaScript (and I don't), you'll have to wait until IE supports position:fixed to make that non-moving menu effect.
    There are ways of getting fixed positioning in IE without javascript - here's a quick (not very pretty) example.

    You could also look at my company's site (in my sig - cheers) - that uses a pretty complex layout to achieve fixed positioning for the header, footer and side menu.

  6. #6
    Join Date
    Oct 2004
    Posts
    24
    Hi

    Wouldn't it be a lot easier to have a line of links above or to the side of an iframe? Simply make the links load the contents into the iframe. The iframe would scroll as you want and the line of links above very easy to customize. Hiding the iframe borders makes it invisible. Works with most if not all browsers too.

    I know people hate frames and iframes but are they really that bad? I use iframes a lot but I must admit that they are used inside an Xoops portal so the impact on search engines etc is lessened.

    If you want the code for loading links into an iframe I will post it for sure.

    By the way I don't like blatently advertising my own site but on the very first page is something you are looking for I think. Below the large green 'Website and Software' images is a line of links, many of which load into the hidden iframe below. Picking 'Information' and then 'Popups' will show the iframe scrollbars which only appear when needed. Simple matter to customize the background. Not very neat I must admit. I am very slap happy with code with my own site and have to work through it all to validate it but not got around to it yet.

    Regards

    MKJ
    Sites-4u
    Last edited by MKJ; 04-01-2005 at 05:35 PM.

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