Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Hi guys, new to the forums and fairly new to web design. Just putting together my first website - portfolio. Straight off the bat am having a problem with centring things.

    I want the main background images to be quite large horizontally so they extend a fair way for people with large monitors. But of course I want these images to be centred horizontally at all times.
    I've scoured through loads of threads for the answer that works but nothing yet.

    The images are png's (for transparency reasons) so need to be absolute positioned so they lay on top of one another with z-index - also I'm hoping to put in some parallax scrolling as well so I think I need them absolute positioned. I don't have the site up but below is the css I've been working on so far. 4 divs wrapped in a wrapper div.

    The problem I've got is it kind of is working, however it scrolls to the right a bit instead of staying centred.


    body {
    margin: 0;
    padding: 0;
    }

    #wrapper {
    width: 1587px;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -793.5px;
    }

    #sky {
    width: 1587px;
    height: 743px;
    position:relative;
    z-index: 1;
    margin-left: 0 auto;
    margin-right: 0 auto;
    }

    #desertfront {
    width: 1587px;
    height: 743px;
    position:absolute;
    z-index: 4;
    }

    #desertmiddle {
    width: 1587px;
    height: 743px;
    margin-top: 295px;
    position:absolute;
    z-index: 3;
    }
    #desertback {
    width: 1587px;
    height: 743px;
    margin-top: 295px;
    position:absolute;
    z-index: 2;
    }
    #nav {
    height: 192px;
    width: 411px;
    margin-top: 50px;
    margin-left: 588px;
    position:absolute;
    z-index: 5;
    }
    #home {
    float: left;
    }

    }
    #contact {
    float: left;
    }
    #portfolio {
    float: left;
    }
    #cv {
    float: left;
    }

  2.  

  3. #2
    Member
    Join Date
    Apr 2013
    Posts
    72
    Member #
    36068
    Liked
    1 times
    Here's the basic layout so you can visualise it - nav bar and contents etc will all be in the centre of the desert. The sand dunes I hope to have some parallax scrolling as you scroll down the page
    Attached Images Attached Images


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com