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
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with Centering Custom CSS Popup Image Viewer

    Hello,

    I have modified code I found at the Dynamic Drive CSS Library, but because my knowledge is not in depth, I can not complete my re-design.

    Here is what I have completed so far...My photography portfolio. It took me a little bit of playing around, and I ended up giving up on centering it because it always messed up the layout when I tried. I know it is a little wide for smaller resolutions, but I don't care. The one thing I really would like to have is fully horizontal centered the contents, but because of the way it is written, all of the modifications to center I have tried will not center it. I have followed all the centering techniques discussed in CSS, but I have had no success with these modification. What is stopping this content from being centered.

    Here is the CSS, I have modified the code from Dynamic Drive CSS Library to create my website.
    Code:
    @charset "utf-8";
    /* CSS Document */
    <style type="text/css">
    .loadpic{
    position: relative;
    z-index: 0;
    }
    .loadpic:hover{
    background-color: transparent;
    z-index: 50;
    }
    .loadpic span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: white;
    padding: 5px;
    left: -1000px;
    border: 1px solid black;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    .loadpic span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    .loadpic:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 79px;  /*position where enlarged image should offset from the top */
    left: 101px; /*position where enlarged image should offset from the left */
    }
    
    img#background {
    	position:absolute;
    	top:79px;
    	left:101px;
    	width:797px;
    	height:542px;
    	border:hidden;
    	z-index:-2;
    }
    img#topleft, img#top1, img#top2, img#top3, img#top4, img#top5, img#top6, img#top7, img#top8, img#topright {
     position:absolute;
     top:0px;
     left:0px;
     width:91px;
     height:69px;
     border:hidden;
     z-index:-1;
    }
    img#top1 {left:101px}
    img#top2 {left:202px}
    img#top3 {left:303px}
    img#top4 {left:404px}
    img#top5 {left:505px}
    img#top6 {left:606px}
    img#top7 {left:707px}
    img#top8 {left:808px}
    img#topright {left:909px}
    img#left1, img#left2, img#left3, img#left4, img#left5, img#left6, img#left7, img#bottomleft { 
     position:absolute;
     top:79px;
     left:0px;
     width:91px;
     height:69px;
     border:hidden;
     z-index:-1;
    }
    img#left2 {top:158px}
    img#left3 {top:237px}
    img#left4 {top:316px}
    img#left5 {top:395px}
    img#left6 {top:474px}
    img#left7 {top:553px}
    img#bottomleft {top:632px}
    img#right1, img#right2, img#right3, img#right4, img#right5, img#right6, img#right7, img#bottomright {
     position:absolute;
     top:79px;
     left:909px;
     width:91px;
     height:69px;
     border:hidden;
     z-index:-1;	
    }
    img#right2 {top:158px}
    img#right3 {top:237px}
    img#right4 {top:316px}
    img#right5 {top:395px}
    img#right6 {top:474px}
    img#right7 {top:553px}
    img#bottomright {top:632px}
    img#bottom1, img#bottom2, img#bottom3, img#bottom4, img#bottom5, img#bottom6, img#bottom7, img#bottom8 {
     position:absolute;
     top:632px;
     left:101px;
     width:91px;
     height:69px;
     border:hidden;
     z-index:-1;
    }
    img#bottom2 {left:202px}
    img#bottom3 {left:303px}
    img#bottom4 {left:404px}
    img#bottom5 {left:505px}
    img#bottom6 {left:606px}
    img#bottom7 {left:707px}
    img#bottom8 {left:808px}
    
    </style>
    If anyone can help, It would be greatly appreciated.

    Thanks!

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You should view source. You've put your site's content into the head tag instead of the body tag. That's not a good start. EDIT: Correction - it's not even in the head tag. It's in never-never-land between the two. My mistake.


    Once you move the content to where it should be, check your validation results again. A lot of the current errors are from using uppercase attribute names - that's not valid XHTML. Working toward a valid document will help getting things to display how you want.
    Are you a Help Vampire?

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have moved the content to inside the body tags.

    From what I am seeing my html source code nor my CSS uses any Uppercase attribute names. The image filenames are Uppercase, but those are filenames. Correction: I found the Uppercase Attribute names.

    I have updated Source Code with one method of trying to center the contents.
    Standard Container Centering...

    Thanks
    Last edited by tobyllama; 01-13-2010 at 10:26 PM. Reason: Correction: I found the Uppercase Attribute names.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I forgot to provide the validation link in my last post.

    All of that absolute positioning is going to screw with any layout, I think. You can work around by applying a position:relative; and margin: 0 auto; to your container. That seems to patch it up in FF3.5. The remaining validation issues should be fixed up to help reduce problems across other browsers.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    tobyllama (01-13-2010)

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, I need to work on figuring out those XHTML errors now, the centering worked out great.


  •  

    Posting Permissions

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