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.
Page 2 of 4 FirstFirst 1234 LastLast
Results 16 to 30 of 49
  1. #16
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    okay figured it out. my style.css was not in a folder called wpstyles. now it is.

  2. #17
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Also,

    Code:
    <div id="container">
    	<div id="gallery"></div>
    	<div id="content"></div>
    </div>
    needs to be placed inside of the <body> tag.

    Styling and Java are the only things that should be inside of the <head>, all the rest of the content should take place inside of the <body>

  3. Users who have thanked dylanbaumannn for this post:

    virtuoso (02-08-2012)

  4. #18
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    ok here is what i got thus far

    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="wpstyles/style.css" rel="stylesheet" type="text/css" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="gallery"></div>
    	<div id="content"></div>
    </div>
    </body>
    </html>
    style.css
    Code:
    body{
    margin:0;
    padding:0;
    }
    
    #container{
    position:absolute;
    width:900px;
    left:50%;
    margin-left:-450px;
    overflow:auto;
    background-color:#0C9;
    }
    
    #gallery{
    position:absolute;
    top:0;
    width:880px;
    height:250px;
    background-color:#ccc;
    margin-left:10px;
    z-index:2;
    }
    
    #content{
    width:900px;
    height:1000px;
    background-color:#000000;
    z-index:1;
    }

  5. #19
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    yup yup, you got it.

    Now all you have to do really is get your Gallery to run inside of the div named 'gallery'. Readjust the widths of everything so that it fits your background image that you had and re-link that background-image to the 'content' div.

    CSS
    Code:
    #content{
    background-image:url(link it here);
    }
    Last edited by dylanbaumannn; 02-08-2012 at 07:10 PM.

  6. Users who have thanked dylanbaumannn for this post:

    virtuoso (02-08-2012)

  7. #20
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    my "Images" folder is outside of my "wpstyles" folder so how do I get it to call BG.png?. This is what I put
    Code:
    #content{
    background-image:(Images/BG.png);
    }

  8. #21
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    It depends on where the file is located in relation to your CSS file. Use "../" to navigate back 1 level.

    EX: if we have the following structure

    Web_Folder
    --images
    -----BG.png
    --wpstyles
    ----style.css
    -- wpscripts
    --index.html


    then we'd use the following
    Code:
    background-image:url(../images/BG.png);
    Last edited by dylanbaumannn; 02-08-2012 at 07:11 PM.

  9. Users who have thanked dylanbaumannn for this post:

    virtuoso (02-08-2012)

  10. #22
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    I had 2 #content ids in in the css so i removed the background color and replaced it with the image but now it is just showing up cyan...

  11. #23
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="wpstyles/style.css" rel="stylesheet" type="text/css" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="gallery"></div>
    	<div id="content"></div>
    </div>
    </body>
    </html>
    style.css
    Code:
    body{
    margin:0;
    padding:0;
    }
    
    #container{
    position:absolute;
    width:900px;
    left:50%;
    margin-left:-450px;
    overflow:auto;
    background-color:#0C9;
    }
    
    #gallery{
    position:absolute;
    top:0;
    width:880px;
    height:250px;
    background-color:#ccc;
    margin-left:10px;
    z-index:2;
    }
    
    #content{
    width:900px;
    height:1000px;
    background-image:url "../Images/BG.png";
    z-index:1;
    }

  12. #24
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post

    site

    Please refer here to view changes as they progress...

    http://default6.getsaleswithjoe.info/

  13. #25
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    Thought it might be the size so I changed it to the size of the image. This is the new code.
    style.css
    Code:
    body{
    margin:0;
    padding:0;
    }
    
    #container{
    position:absolute;
    width:1000px;
    left:50%;
    margin-left:-450px;
    overflow:auto;
    background-color:#0C9;
    }
    
    #gallery{
    position:absolute;
    top:0;
    width:980px;
    height:250px;
    background-color:#ccc;
    margin-left:10px;
    z-index:2;
    }
    
    #content{
    width:1000px;
    height:1200px;
    background-image:url "../Images/BG.png";
    z-index:1;
    }

  14. #26
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    when linking to an image you have to be sure that everything is case sensitive. AKA if your images folder is named "images" it's going to be different than a folder named "Images". The same goes for 'BG.png' vs 'bg.png'.

    Code:
    background-image:url(../Images/BG.png);
    is different than

    Code:
    background-image:url(../images/bg.png);
    Also the cyan you're seeing is the color of the container, which means that it's not linking to your background image properly. How many levels back is your images folder from your wpstyles folder? [if it's more than one you'll need to add another '../' to your background-image so it'd be url(../../Images/BG.png)]
    Last edited by dylanbaumannn; 02-08-2012 at 07:07 PM.

  15. #27
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    do I put the bg.png id in #content or #container?

  16. #28
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by virtuoso View Post
    do I put the bg.png id in #content or #container?
    you don't need to assign an ID to the image actually, abut you'll want to set that as the background of the #Content

  17. #29
    New Coder
    Join Date
    Dec 2011
    Posts
    35
    Thanks
    17
    Thanked 1 Time in 1 Post
    nvm i got it it was using "file/location.png" instead of (file/location.png)

  18. #30
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Does your image show up now in your background?


 
Page 2 of 4 FirstFirst 1234 LastLast

Posting Permissions

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