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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Centering the DIV with Overflow Hidden

    Hey everyone. This one has me stuck.

    I need the ability to center an image (1598px wide) in a DIV at 100% width and overflow is Hidden.

    I cannot use the background-url CSS with background-position CSS and background-repeat CSS as I have in the past. The reason why is because I will be replacing the img with a slideshow. I need the slideshow fill the whole screen like a background would. Here is an example

    http://www.besthostingplanever.com/test/divcentering.html

    This is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Samplet</title>
    <style>
    
    .slide {
    text-align:center;
    position:relative;
    display: inline-block;
    overflow:hidden;
    height:433px;
    width:100%;
    }
    </style>
    
    </head>
    
    <body bgcolor="#090000" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
    
    <div class="slide"><img src="images/sampleslide.jpg" width="1598" height="433" /></div>
    </body>
    </html>
    Its so close! I have it 100% so the image takes up the whole screen, I have the overflow hidden so there will be no left and right scrolling for monitors smaller then 1598pixels (width of image) but I need the hidden overflow to be equal on the left and right side making the image centered.

    I hope someone can crack this one. I searched for a long time and maybe I'm not searching the right keywords but I can't get the answer.

    Thank you in advance!

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    I can't think of a way this could be done with pure CSS (without the background property). Would it be possible for you to use Javascript?
    Code:
    <img style="position: relative;" onload="
    this.style.left=(this.parentNode.offsetWidth-this.offsetWidth)/2+'px';
    this.style.top=(this.parentNode.offsetHeight-this.offsetHeight)/2+'px';"
      />
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    eclipsemedia (01-17-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I had a feeling this might be the case. What I think I may need to do is is make the widest slide 1340pixels and use javascript to disable horizonal scrolling for resolutions 1024x768 (or between 1024 and 1366) or lower. I saw statistics at http://www.w3schools.com/browsers/browsers_display.asp that show 14% people have 1024x768 resolutions.

    Thanks for the input


  •  

    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
    •