Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS/Html Layout

  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/Html Layout

    Ok here is my problem on what is confusing me I'm new to html and css however I'm starting to get the hang of html pretty well but CSS layout is hard for me. What I'm having a hard time understanding is how to get an image as my background which I can do that, however I want like a page wrapped image to be in the center on top of the background and then have a picture on top of that such as layers in photoshop. I will post a design I came up with that I'm working on

    I can get the pictures all in one place but I've tried using the z-index, with the position attribrutes as well, but for some reason I just can't get the fit right. Maybe someone could enlighten me or I could have over looked a detail.
    Attached Thumbnails Attached Thumbnails CSS/Html Layout-elite-im-blue-illusion.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Maybe someone could enlighten me or I could have over looked a detail.
    Could you post the code that you have so far (wrapped by [CODE][/CODE])or a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Blue Illusion Elite IM</title>
    </head>

    <body>
    <div="3dcubes"><img src="images/3dcubes.png" alt="3dcubes" width="688" height="503">
    </div>

    <div class="pagewrap"><img src="images/pagewrapbg.png" alt="*****tits" width="840" height="743"></div>



    </body>

    </html>



    here is my html code and here is my css

    .pagewrap {
    text-align:center;
    width:auto;
    padding:auto;
    border:auto;
    margin:auto;
    position:fixed;
    z-index:-1;

    }
    #3dcubes {
    text-align:center;
    width:auto;
    padding:auto;
    margin:auto;
    position:fixed;
    float:right;
    z-index:1;
    }
    body {
    color:white;
    font-size: 1.1em;
    background-image: url('images/bg.png');
    position:fixed;
    z-index:-2;
    }
    I have been playing around with the positions and what not, but I feel if someone explained how laying out images in layers and how to position them, that I'd understand much more. I've seen guides on how to but different people learn different ways.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also although you can not see it I have the image shown my first post broken down into 3 pieces. A background which I have concept well set, a mid ground which would be the rectangle in the center, and the cubes are another images that I have set up and will keep a transparent background thanks to css3 =)

  • #5
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok even though no one was able to answer my question I do have goodnews I answered my own question by researching, and doing a lot of experimenting so here is a screen shot of what I currently have working and coded
    Attached Thumbnails Attached Thumbnails CSS/Html Layout-capture.jpg  


  •  

    Tags for this Thread

    Posting Permissions

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