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 4 of 4

Thread: positioning div

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    positioning div

    I have uploaded a test page with great difficulty onto another site: http://www.puddypaws.co.uk/test/test.html

    If you scroll down the page, you will see a gallery but I cannot get it to sit in the middle of the border box along with the mini slides at the side. I also would like a border of 1px solid #CCC and padding: 3px; around the mini slide images but it is not happening. This is a script adapted from CSS Play but maybe I have ruined it now with trying to fix it. I made it with 2 cols of mini slides as the other way using arrows images I could not do, this is my own way. Appreciate any help been struggling over a couple of days now.
    Last edited by quartzy; 12-10-2010 at 12:14 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello quartzy,
    I don't think you want those images centered. Remove the margin:0 auto; for sure, the position:relative; I think means nothing here, remove that as well.
    Like this -
    Code:
    #gallery #fullsize div {width:775px; height:550px; padding-top:70px; position:relative;}
    #gallery #fullsize div img {
    clear:both; 
    display:block; 
    /*margin:0 auto;*/
     border:1px solid #eee; 
    width:480px; 
    height:360px; 
    /*position:relative;*/
     background:#fff; 
    padding:10px;
    }

    You will need to adjust your left:xx; on your absolute positioned ul that holds your thumbnails.
    Try something like this -
    Code:
    #gallery #slides {
    position:absolute; 
    /*right:10px; */
    left: 545px;
    top:70px; 
    height:500px; 
    width:92px; 
    text-align:left; 
    z-index:500;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (12-10-2010)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    thanks Ex. I now have them lined up correctly, however I am having problems with lining up the captions at the bottom, if I do text align center they centre to the whole box and not just the large image as I want. Also the mini slides box has a wider margin on the right that I dont want. Can you hlep me? Same url http://www.puddypaws.co.uk/test.test.html As this is supposed to be elastic, I dont really want to add margin or padding to line up the captions.

    I have now fixed the captions, but the wider margin at the end of the slides is something I cannot do.

    RESOLVED
    Last edited by quartzy; 12-10-2010 at 11:51 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I've always found it easier to put caption and image in their own div together. They just never line up right otherwise.

    See captions here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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