Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript/css help

    Hi,

    Can anyone please help me with my website http://syminadive.com/test9.html ?
    I have a horizontal scrolling site and I can't seem to get the last section/image in the container no matter what.
    the css is here http://syminadive.com/testcss2.css
    the section i'm referring to is "epic8" or section 8
    The problem will be clear if you visit the page and scroll all the way to the left.

    Please help! Thanks.

  • #2
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    is it the black space on the end?

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by disbsymin View Post
    I have a horizontal scrolling site and I can't seem to get the last section/image in the container no matter what.
    After some quick messing around, I found that you can get the div#epic8 element in the desired position by moving it in the HTML so that it is the first child element of the div#epic7 element. Then apply the following CSS to the div#epic8 element: position: relative; left: 106px /* width of element */; float: right;.

    A better way to do this layout would be to unify the images into a single image and only use that one image as a background image on one element. You will have less HTML and CSS and make fewer HTTP requests to the server.

    If for some reason, you need to slice the background image anyway, it makes more sense to set background images on a nested group of div elements (essentially creating a multi-element container) than to create a bunch of empty div elements laid out side-by-side. You could also use the CSS3 Backgrounds and Borders version of the background property which allows you to declare multiple background images on one element.

    Quote Originally Posted by disbsymin View Post
    The problem will be clear if you visit the page and scroll all the way to the left.
    I think you meant "to the right."

    Quote Originally Posted by riptide View Post
    is it the black space on the end?
    "epic8" is the ID of the div element containing the hanging image on the right side of the document (which is under the form).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Oct 2011
    Location
    New york
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hello...
    How about trying jquery? Just paste my edited version of the answer above into your page right before the closing </body> tag. And remove the inline styles you have on your
    Code:
    <div class="content" style=""... and <div class="container" style=""
    . I have a solution, composed of the CSS visibility attribute and JavaScript. Also pay attention to the last note: Account for the users who have disabled JavaScript. You can try setting .a to display: inline-block and setting white-space: nowrap on #main or your container instead.

  • #5
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    After some quick messing around, I found that you can get the div#epic8 element in the desired position by moving it in the HTML so that it is the first child element of the div#epic7 element. Then apply the following CSS to the div#epic8 element: position: relative; left: 106px /* width of element */; float: right;.

    A better way to do this layout would be to unify the images into a single image and only use that one image as a background image on one element. You will have less HTML and CSS and make fewer HTTP requests to the server.

    If for some reason, you need to slice the background image anyway, it makes more sense to set background images on a nested group of div elements (essentially creating a multi-element container) than to create a bunch of empty div elements laid out side-by-side. You could also use the CSS3 Backgrounds and Borders version of the background property which allows you to declare multiple background images on one element.

    I think you meant "to the right."

    "epic8" is the ID of the div element containing the hanging image on the right side of the document (which is under the form).
    oh the right side, no wonder I didn't find the problem.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    Thanks for your answer. I actually was just missing a </div> under epic7. once i put that in, the last section showed up. see http://syminadive.com/test9.html it's fine now

    I did try to use one large image with different html/js but it didn't quite work. I'll try to figure that out. Do you think I can use similar code (as test 9) to achieve this?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by disbsymin View Post
    Do you think I can use similar code (as test 9) to achieve this?
    There will probably not be many changes required in the HTML aside from eliminating a lot of empty div elements.

    Substantive CSS changes will be needed though since most of your content seems to rely on the position of content to the left of it.

    And, obviously, you will need a stitched-together image if you don't have one already.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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