Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: image scroll with horizontal scrollbar?

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default image scroll with horizontal scrollbar?

    I would like the arrowed scroll image to scroll with the scrollbar, horizontally to the right. Is this possible?

    Please refer to this page:
    http://www.freewebs.com/testpractic/...al-scroll.html
    CSS here:
    http://www.freewebs.com/testpractic/web-horizontal.css
    CSS code for the scrollbar image highlighted:

    #content-scroll {
    position: absolute;
    margin-left: 0px;
    margin-top: 275px;
    display: block;
    width: 934px;
    height: 32px;
    background: url('scroll-1.gif');
    }



    Thank you.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Check out fixed positioning:
    http://www.w3schools.com/Css/pr_class_position.asp
    Then you'll have to make it work in IE:
    http://www.dynamicdrive.com/forums/s...d.php?p=154648
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    questions (08-07-2008)

  4. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    You could use this, it doesn't really "scroll" it just stays in one position on the screen while the rest of the content scrolls across.

    Code:
    #content-scroll {
    background-attachment:scroll;
    background-color:transparent;
    background-image:url(scroll-1.gif);
    background-repeat:no-repeat;
    display:block;
    height:32px;
    margin-left:0;
    margin-top:275px;
    position:fixed;
    width:934px;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. The Following User Says Thank You to TheJoshMan For This Useful Post:

    questions (08-07-2008)

  6. #4
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by Nile View Post
    Check out fixed positioning:
    http://www.w3schools.com/Css/pr_class_position.asp
    Then you'll have to make it work in IE:
    http://www.dynamicdrive.com/forums/s...d.php?p=154648
    I gave it a try in IE and it worked without special coding. Maybe they've fixed their problem.

    Quote Originally Posted by Nyne Lyvez View Post
    You could use this, it doesn't really "scroll" it just stays in one position on the screen while the rest of the content scrolls across.

    Code:
    #content-scroll {
    background-attachment:scroll;
    background-color:transparent;
    background-image:url(scroll-1.gif);
    background-repeat:no-repeat;
    display:block;
    height:32px;
    margin-left:0;
    margin-top:275px;
    position:fixed;
    width:934px;
    }
    Yeah. This is exactly what I meant. It seems like it scrolls and that's all that matters!

    But, do you think that the following are necessary:
    background-repeat:no-repeat;
    background-color:transparent;
    background-attachment:scroll;

    I just put in this and it worked:
    position:fixed;

    Thanks much.

  7. #5
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    They are all necessary.
    background-repeat is so it doesn't repeat itself.
    background-color is so IE doesn't get mixed.
    and background-attachment: scroll... Well it is what it sounds like.
    Jeremy | jfein.net

  8. #6
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by Nile View Post
    They are all necessary.
    background-repeat is so it doesn't repeat itself.
    background-color is so IE doesn't get mixed.
    and background-attachment: scroll... Well it is what it sounds like.
    I guess what I meant was
    1. background-repeat... would it repeat itself if you are already defining it as
    display:block and giving its height and width?
    2. background-color - the default is transparent. What happens in IE... do they add a color to the background of a gif?

    Thanks.

  9. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    to answer your question about background repeating, yes and no.

    If you define the height and width, for all intents and purposes the image should not repeat. However, in your code you have the image set as the background of a DIV. This DIV is set to a height which is much larger than the image itself, which could cause some browsers to automatically repeat the image to fill the entire height of the DIV.

    As far as the background-color... This is not necessary. I defined it in my code because I didn't notice you had already defined the background-color of the element "body".
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  10. The Following User Says Thank You to TheJoshMan For This Useful Post:

    questions (08-08-2008)

  11. #8
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Ok. Cool. Better to be safe than sorry on the image repeating.
    So, "transparent" background means that the user's background of choice will appear, instead of the default "white"?

  12. #9
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    No, I'm affraid not.

    By using "Transparent" to define the background color of an element, that just means that the color of whatever element is underneath that element will show.

    If you define the background of "body" as transparent, then it will fall back to the default "white" or as I've recently discovered in IE -5 I believe the default BG color is somewhere in the range of "#f9f9f9" or something to that effect.


    Hope this helped.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  13. The Following User Says Thank You to TheJoshMan For This Useful Post:

    questions (08-08-2008)

  14. #10
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Thanks. So, from what I understand, if I define the background color of the body or page then I don't have to define the background color of the element. Correct?

Bookmarks

Posting Permissions

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