Maybe one of these methods will work? http://blog.themeforest.net/tutorial...ring-with-css/
Maybe one of these methods will work? http://blog.themeforest.net/tutorial...ring-with-css/
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
I cant seem to make these work. Maybe I'm doing it wrong. Has anyone been able to look at my code?
I'm not sure but I think the issue is with you having all the content in one long page of chained divs.
Normally when you vertically align body content with CSS you can set the central div to a top position of 50% (of the visible screen body) but then offset it with a negative top margin that is half the height of the central div, thus pulling the central div back up to a seemingly central position on any viewing screen.
This I don't think will work here because the body contains all if your pages in one long chain of divs.
I think maybe you'll need to take a different approach, possibly with JavaScript to identify the height of the viewport (the viewing browser height) and setting that dynamically to be the height of the containing div. From there I imagine that you could then give the link container a top position of 50% with the margin-top negative offset that is half the height of the link container.
I haven't explored any further but hopefully one of these routes will start you off http://www.google.com/m?q=jQuery%20g...%20align%20div
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Thank you Bereleyh. I'm looking into it now.
One thing I noticed that I might be doing wrong is I was trying to make a div that was already within a div go into the centre of the page. Now I am trying to centre all of the content. For my site which is a single page everything is contained within #wrapper. So what I have done is this:
#wrapper {position: absolute; width:940px; height:8800px; margin:0 auto; left:50%; top:10%; margin-left:-470px;}
Now if I add margin-top:-4400px all it does it lift all off the content up and off of the screen. The top: ""% works but I cant centre it perfectly. Any ideas which doing it this way it wrong?
You're getting into a right pickle, aren't you
OK looking at the code from here: http://stackoverflow.com/questions/6...iewport-height let's borrow the jist of that function and do this...
At the bottom of your page, insert the red code into your script tags;
Now, in your HTML higher up the page, wrap another div inside #storm-home;Code:<script type="text/javascript"> function vp_height() { var height = $(window).height(); $("#storm-home").css('height', height+'px'); } $(document).ready(function() { vp_height(); $(window).bind('resize', vp_height); $.piroBox_ext({ piro_speed :700, bg_alpha : 0.5, piro_scroll : true, piro_drag :false, piro_nav_pos: 'bottom' }); }); </script>
I called it "centerme" and estimated the overall height of your existing menu at being 600px to allow me to set the -300px negative offset.Code:<article id="storm-home"> <div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-300px"> <div><a href="#storm-dfx" class="home-create"> </a></div> <div id="text-box1"><img src="http://www.stormdfx.com/stormdfx/img/text-block1.png" alt="text" width="940" height="25" /></div> <div><a href="#service" class="home-create1"> </a></div> <div id="text-box2"><img src="http://www.stormdfx.com/stormdfx/img/text-block2.png" alt="text" width="940" height="19" /></div> <div><a href="#finger-pulse" class="home-create2"> </a></div> <div id="text-box33"><img src="http://www.stormdfx.com/stormdfx/img/text-block3.png" alt="text" width="940" height="30" /></div> <div><a href="#award-winning" class="home-create3"> </a></div> <div id="text-box4"><img src="http://www.stormdfx.com/stormdfx/img/text-block4.png" alt="text" width="940" height="16" /></div> <div><a href="#repack-service" class="home-create4"> </a></div> <div id="text-box5"><img src="http://www.stormdfx.com/stormdfx/img/text-block5.png" alt="text" width="940" height="28" /></div> <div><a href="#drop-line" class="home-create5"> </a></div> <div> <div id="text-box6"><img src="http://www.stormdfx.com/stormdfx/img/text-block6.png" alt="text" width="146" height="47" /></div> <div><a href="#your-brand" class="home-create6"> </a></div> </div> <nav class="next-prev" style="margin-top:90px"> <hr /><a class="next storm-dfx" href="#storm-dfx">Next</a> </nav> </div>
Notice how I also plucked out your <nav class="next-prev"> + inner <hr> and put them inside the "storm-home" div otherwise it will go floating off into the middle of the screen. I also just added a top margin of 90px to bring it back to roundabout the same position as it previously was, but you can mess with exact pixels to suit.
If, all goes well, you'll get this: http://jemthingsandstuff.co.uk/testi...-viewport.html
Is this something you can work with?
BTW - I used to live in Alfreton (well, Riddings)
Last edited by Beverleyh; 11-07-2012 at 05:05 PM. Reason: grammar
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
ps - I just changed my example toinstead of -300px, as I think it looks a bit more central that way.Code:<div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-320px">
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Just out of curiosity, did Stormdfx used to be called Lynx? - theres a picture with Lynx on in your site.
If I was, I went for an interview there about 8 years ago - ha, ha
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Hi Beverleyh.
Thank you for the examples. Ive been holiday so today is the first chance Ive got to implement it. It looks awesome :-)
Many thanks.
We used to be called DesignFX but now we are called StormDFX. Im hoping to have the site fully complete and live by the end of the week :-)
Good stuff. Hope it works out as planned.
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Ive copied the cod but it doesn't seem to be centring the element :S
Bookmarks