Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

Thread: Centre Aligning a Div

  1. #11
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Maybe one of these methods will work? http://blog.themeforest.net/tutorial...ring-with-css/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  2. #12
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I cant seem to make these work. Maybe I'm doing it wrong. Has anyone been able to look at my code?

  3. #13
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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 | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  4. #14
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #15
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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;

    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>
    Now, in your HTML higher up the page, wrap another div inside #storm-home;

    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>
    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.

    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 | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  6. #16
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    ps - I just changed my example to
    Code:
    <div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-320px">
    instead of -300px, as I think it looks a bit more central that way.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  7. #17
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    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 | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  8. #18
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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 :-)

  9. #19
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Good stuff. Hope it works out as planned.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  10. #20
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Ive copied the cod but it doesn't seem to be centring the element :S

Similar Threads

  1. Resolved Need to get my slideshow to centre
    By Jinx13 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-19-2010, 03:35 PM
  2. get window to pop up in centre??
    By liamallan in forum JavaScript
    Replies: 1
    Last Post: 03-25-2010, 03:12 AM
  3. Centre my divs??
    By llallypops in forum HTML
    Replies: 2
    Last Post: 03-11-2010, 03:13 PM
  4. How to centre align a Div
    By neilkw in forum HTML
    Replies: 5
    Last Post: 03-30-2006, 08:49 AM

Bookmarks

Posting Permissions

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