www.webdeveloper.com
Results 1 to 2 of 2

Thread: Unable to position a slider and issue with following division showing in wrong place

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Unable to position a slider and issue with following division showing in wrong place

    I have created an image slider but it appears in the middle of the page. I want to move it nearer to the right but I am having problems with positioning the slider.

    The css code for the postioning is;
    Code:
    #slideshow { 
        margin: 50px auto; 
        position: relative;
        width: 465px;
        height: 250px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
    #slideshow > div {
        position: absolute;
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    slideshow img.align-right: {float: right;
                                 Margin-right: 20px;
    }
    There is another issue which is that the following div (menu) appears a long way below the slider.
    If I alter the height in slideshow the menu moves higher up the page but the slider background collapses. How can I resolve this?
    Code:
    #slideshow { 
        margin: 50px auto; 
        position: relative;
        width: 465px;
    /* it seems that this line places the menu div 250px below the images. If I delete this line the background box collapses and the menu appears in the right place */ 
       padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
    #slideshow > div {
        position: absolute;
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    slideshow img.align-right: {float: right;
                                 Margin-right: 20px;

  2. #2
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I have managed to resolve the positioning issue. I made #slideshow position: absolute; right: 20px;

    The issue with the menu/nav bar position seems to be too hard for me to resolve.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles