Skip navigation
reelhero
reelhero
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!

951 Views   14 Replies   Latest reply: reelhero, Apr 12, 2012 1:32 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Apr 8, 2012 8:49 PM   in reply to reelhero
    Report

    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:
  • reelhero
    Currently Being Moderated
    2. reelhero,
    Apr 9, 2012 8:52 AM   in reply to Ben Pleysier
    Report

    thanks--im not sure how to do that i guess thats why i went with absolute positioning.. any suggestions re tutorials.. i know i can google but better to pointed by the experienced (im not a newbie but css is not my strongest arm

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

    This may help http://tv.adobe.com/search/?q=learning+css

     

     

    Gramps

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    4. Ben Pleysier,
    Apr 9, 2012 9:50 AM   in reply to Ben Pleysier
    Report

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

     

    Gramps

     
    |
    Mark as:
  • reelhero
    Currently Being Moderated
    5. reelhero,
    Apr 10, 2012 7:23 AM   in reply to Ben Pleysier
    Report

    thanks gramps - rather got he path of least resistance and focus just on the centering for now..ill keep searching thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Apr 10, 2012 5:26 PM   in reply to reelhero
    Report

    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:
  • reelhero
    Currently Being Moderated
    7. reelhero,
    Apr 10, 2012 6:28 PM   in reply to Nancy O.
    Report

    oh sure put that up just as i figured it out

     

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

     

    nancy you rock.  is the above valid..it seems to work pretty well

     
    |
    Mark as:
  • reelhero
    Currently Being Moderated
    8. reelhero,
    Apr 10, 2012 6:39 PM   in reply to reelhero
    Report

    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?

     

    and finally ..im trying to get the background to fade to grey and the header (mast and nav bar) and footer (share and like buttons) to appear to slide into the position of the link page (HIT REEL) on any click using jquery or even spry -- any ideas?

     

    and ill take this chance to thank you for all the help over the past few years.. i learned jquery and a lot of css because of you!!

     

    best

    Todd

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Apr 11, 2012 10:23 AM   in reply to reelhero
    Report

    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:
  • osgood_
    Currently Being Moderated
    10. osgood_,
    Apr 11, 2012 10:28 AM   in reply to reelhero
    Report

    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:
  • osgood_
    Currently Being Moderated
    11. osgood_,
    Apr 11, 2012 10:38 AM   in reply to osgood_
    Report

    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:
  • reelhero
    Currently Being Moderated
    12. reelhero,
    Apr 11, 2012 6:43 PM   in reply to osgood_
    Report

    thanks osgood.

     

    i could not find that css - is it in the supersized script or on the page?

    http://toddheymandirector.com/index_newlook.html

    i redesigned the look

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

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

     
    |
    Mark as:
  • reelhero
    Currently Being Moderated
    14. reelhero,
    Apr 12, 2012 1:32 PM   in reply to osgood_
    Report

    thank you!

     

    one more question for you guys - here:

     

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

     

    i want the thumbnails (the rollovers "nike the getaway", etc) to resize to fit the browser window width. i tried putting them in a div and adding

    }

    row {

        max-width: 100%;

        height: auto;

        width: auto\9; /* ie8 */

    }

     

    but it didnt work..

     

    ideas?

    thanks

     
    |
    Mark as:
Actions

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