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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Positioning of a slideshow

    I hope I can explain myself sufficiently here.

    I'm using this template to build a website for someone: http://all-free-download.com/templat...template_2391/

    The client has asked if I can change the image in the monitor to a slideshow. I've successfully inserted a java-script slideshow which I wrapped in a div id, then used the id to position it in the CSS so that it sits over the monitor. The code I've used used to position the slideshow is:

    Code:
    #slider { margin: 0 0 -264px 733px; }
    And now the problem. If the website is viewed on a different size monitor, or I resize the website (using Ctrl and mouse wheel) the slideslow doesn't stay positioned over the monitor screen.

    In spite of the fact that I've been asked to do this, I actually understand very little about html and CSS and was wondering if anyone can help explain how I would ensure the slideshow stays locked on the monitor screen, regardless of the PC it's being viewed on, etc.

    Thanks in advance.
    Last edited by OurJud; 10-03-2013 at 05:18 AM.

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Use percentages. Instead of
    Code:
    #slider { margin: 0 0 -264px 733px; }
    Use:
    Code:
    #slider { margin: 0 0 50% 50%; }
    Edit: These are not the proper percentages. They are just showing what you should put there. You have to figure out the numbers on your own.

    Now, I don't know for sure if this will work, I haven't used percentages with something like this. And make sure it's set to:
    Code:
    position: relative;
    If this doesn't work we'll try something else.
    Last edited by Nerevarine; 10-02-2013 at 01:21 PM. Reason: Spelling error D: / Explaining
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Large negative margins on something like that usually suggest an issue with the positioning somewhere. There's usually a better approach.

    If you can post a link to your page you'll get a more specific answer.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thank you for the replies, guys, but today I decided to scrap the template I was using and pick one that had a slideshow already installed.

    The cheats way out, I know, but it needs finishing ASAP.

    Thanks again anyway

  • #5
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    No problem. If you have any more issues, let us know and we'll try to help.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Posting Permissions

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