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 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Issues in centering the slider.

    Hi,

    I am new to web development (about 6 months). I have an issue regarding centering the slider.

    I did a sample (exactly the same) from the website http://jonraasch.com/blog/a-simple-jquery-slideshow

    But I want to add a simple feature, that is to center the slider. This is extra CSS I did :

    Code:
                #SlideWrapper {
                    text-align:center;
                    background-color:brown;
                }
    
    	    #slideshow {
    		margin:auto;
    	    }
    
            <div id="SlideWrapper">
                <div id="slideshow">
                    <img src="images/slider/01.jpg"  class="active" />
                    <img src="images/slider/02.jpg" />
                    <img src="images/slider/03.jpg" />
                </div>
            </div>
    But it does NOT center. Can anybody help me please with the little amount of code. I did not use <center></center> b'cos its no longer in use.

    thanks a lot.

    Isaac

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    If your using IE to view this use margin: 0 auto; to center.
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    Isaac Sureshkum (09-25-2013)

  • #3
    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
    Also, maybe to avoid hassle in the future, add a browser reset so that your code works relatively the same on all browsers. Or just platform specific code, then you can work with a singular goal in mind.
    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.

  • Users who have thanked Nerevarine for this post:

    Isaac Sureshkum (09-25-2013)

  • #4
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    If your using IE to view this use margin: 0 auto; to center.


    Thanks a lot. Really appreciated.

  • #5
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Quote Originally Posted by L0adOpt1c View Post
    Also, maybe to avoid hassle in the future, add a browser reset so that your code works relatively the same on all browsers. Or just platform specific code, then you can work with a singular goal in mind.
    Thanks a lot.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    NP Isaac, Did you get your issue fixed?
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Hi,

    Nope, its not working even in FF/Chrome.

    I am giving you the full code here :

    Please have some 3 sample pictures with the name 01.jpg, 02.jpg & 03.jpg.

    Code:
    <html>
        <head>
            
            <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
            <title></title>
            
            
            <style>
                
    
    
    
    
    
                
                /* CSS styling for slide */            
                #SlideWrapper {
                    text-align:center;
                    background-color:brown;
                }
                
                #slideshow {
                   margin:0 auto;  
                }   
                
    
                #slideshow {
                    position:relative;
                    height:350px;
                }
    
                #slideshow IMG {
                    position:absolute;
                    top:0;
                    left:0;
                    z-index:8;
                }
    
                #slideshow IMG.active {
                    z-index:10;
                }
    
                #slideshow IMG.last-active {
                    z-index:9;
                }      
                
            </style>            
            
    
            <script>
                function slideSwitch() {
                    var $active = $('#slideshow IMG.active');
                    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
                    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');
                    $active.addClass('last-active');
                    $next.css({opacity: 0.0})
                        .addClass('active')
                        .animate({opacity: 1.0}, 1000, function() {
                            $active.removeClass('active last-active');
                        });
                }
    
                $(function() {
                    setInterval( "slideSwitch()", 2500 );
                });            
            </script>        
            
            
        </head>
        <body>
            <?php
            // put your code here
            ?>
            
    
            
            <div id="SlideWrapper">
                <div id="slideshow">
                    <img src="images/slider/01.jpg"  class="active" />
                    <img src="images/slider/02.jpg" />
                    <img src="images/slider/03.jpg" />
                </div>
            </div>
            
            
            
        </body>
    </html>
    Thanks a lot,

    Isaac

  • #8
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    "Margin: 0 auto" will not work unless you specify a width. Divs are block level elements. That means that their width will span across the entire available space. In other words, there is no horizontal margin.

    What you need to do is add "width:540px" to #slideshow, and the "auto" will automagically center it for you.
    Last edited by ttkim; 09-26-2013 at 05:42 PM.
    My signature :)

  • Users who have thanked ttkim for this post:

    Isaac Sureshkum (09-26-2013)

  • #9
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Thanks a lot, it works.

    I didn't know that it will not center unless we specify (hardcode) the width of the DIV.

    Thanks a lot for the infor.

    Isaac

  • #10
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Hi ttKim,

    Your answer worked when I hardcoded the width to 540px (the width of the image).

    But I have another question. In the following piece of code, I removed the 3 images and removed all sliding code (JavaScript code) and kept JUST ONLY 1 IMAGE and I did NOT hard code the width of the DIV to 540, but it is centering,

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            
            <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
            <title></title>
            
            
            <style>
                /* CSS styling for slide */            
                #SlideWrapper {
                    text-align:center;
                    background-color:brown;
                }
                
                #slideshow {
                   margin:0 auto;  
                }   
                
    
          
                
            </style>            
            
    
        </head>
        <body>
            <?php
            // put your code here
            ?>
            
    
            
            <div id="SlideWrapper">
                <div id="slideshow">
                    <img src="images/slider/01.jpg" />
                </div>
            </div>
            
            
            
        </body>
    </html>
    So my question is, only for the slideshow (3 images appearing every 5000 ms (or so) ) its not working without the 540px width being hard coded, but for just one image, its centering properly.

    Please throw some light on it..

    thanks a lot.

    Isaac

  • #11
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    In the previous example, you absolutely positioned the images at the (0,0) mark (absolute position with left:0 and top:0).

    That means that the top-left corner of the images will be aligned to match the top-left corner of its first relatively positioned parent element. You'll notice that #slideshow has "position: relative" in it. As a result, that is its first relatively positiond parent element. Each image is positioned at the top-left corner of #slideshow. To center the images, we centered #slideshow, not the images themselves. #slideshow was originally spanning the entire width of the browser, we shrunk the width to match the images and then centered it using "margin: 0 auto".

    When you use absolute positioning, you are taking the element out of its natural flow. Normally, if you have an element here and an element there, they affect one another. One might occupy a certain amount of space so the other has to move onto the next line or whatever. When you use absolute positioning, it's kind of like it's not there. It's like seeing a hologram. It occupies no physical space, but you can see it.

    Anyway, I think I'm starting to talk get off topic slightly, but there's a lot more happening.

    In the second example, you did not absolutely position the image. As a result, it's laid out according to its normal flow. What's centering the image is #SlideWrapper, not the #slideshow and its margin. #SlideWrapper has "text-align:center;". You can take out #slideshow entirely, and the image will still be centered because of #SlideWrapper.
    My signature :)

  • Users who have thanked ttkim for this post:

    Isaac Sureshkum (09-27-2013)

  • #12
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Got it, Thanks a lot. Isaac.

  • #13
    New Coder
    Join Date
    May 2012
    Posts
    30
    Thanks
    10
    Thanked 1 Time in 1 Post
    you have specify width for #slideshow to center your dive using margin: auto;

  • Users who have thanked Azeem Hassni for this post:

    Isaac Sureshkum (09-30-2013)


  •  

    Tags for this Thread

    Posting Permissions

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