Skip navigation
Currently Being Moderated

vertical centering off the page

Apr 8, 2012 8:46 PM

http://toddheymandirector.com/REEL/index_2012c.html

i was able to vertically center the site but if you resize the browser smaller it disappears off the page

same on the index page

http://toddheymandirector.com/index_2012jsh22.html

 

also there is a strange black box that loads in the center of the above page before the content appears

 

thanks for the help!

 
Replies
  • Currently Being Moderated
    Apr 8, 2012 8:49 PM   in reply to reelhero

    Sorrry, when I see a absolute positioned div in a layout I know there are going to be problems. I have also found two <body> tags; fortunately only one ending <body> tag.

     

    Solution: get rid of all positioning attributes and start with floats and margins.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 9:44 AM   in reply to reelhero
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 9:50 AM   in reply to Ben Pleysier

    This may also help http://forums.adobe.com/thread/492638

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2012 5:26 PM   in reply to reelhero

    View source to see the code.  No APDivs required.

    http://alt-web.com/TEST/Resizable-BG.shtml

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 10:23 AM   in reply to reelhero

    You've got some code errors.  Not sure what's causing the box to appear on page load.  Fix these problems first.

     

    On lines 163 and 170 you have 2 #wrapper divisions with conflicting CSS styles. Remove one or combine them.

    On lines 425 and 429 you have 2 <body> tags.  Only one <body> tag is allowed per document.

     

    Not sure which jQuery transitions you're going for. 

    I did this basic jQuery demo a while back (the function code is near the bottom of the page):

    http://alt-web.com/DEMOS/jQuery-slide-n-fadeIn-demo.shtml

     

     

    Hope this helps,

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 10:28 AM   in reply to reelhero

    reelhero wrote:

     

    oh and nancy -- theres a strange sqaure thats loading in the center of the index page (these are all tests for now)

    http://toddheymandirector.com/index_2012jsh22.html

     

    do you know what causes that? something to do with the jquery slideshow maybe?

     

     

    That could be the slideshow 'loading' gif - minus the gif?

     

    Some slideshows have a loading image spinning around on page load while the images are loading. Not sure where you got the slideshow from but check to see if you have all the parts.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 10:38 AM   in reply to osgood_

    Your most likely missing the progress.gif in the loader: (see below)

     

    #supersized-loader { position:absolute; top:50%; left:50%; z-index:10; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background-color:#111; background:rgba(0,0,0,0.8) url(../img/progress.gif) no-repeat center center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

     

     

     

    OR its not where it says it is on your server (in that case check the image path)

     

     

    of course if you prefer it not to appear just either get rid of the #supersized-loader <div> in your page OR add display: none; to the #supersized-loader css selector above.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 12:20 AM   in reply to reelhero

    It's in this file: /css/supersized.css

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points