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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't get a second background to work

    Hi,

    This is my first attempt at customizing WordPress and it's not been as "easy" as I've expected.

    I've a couple of issues with the css.

    I've been trying to add an image to the center, top bare section AND add a second tiled background on top of the 'wood' background. But only as wide and high up as the menu. I've tried a variety of ways, but it always seems to push my content around.

    Any suggestions on how I can fix this? I appreciate any direction anyone can give me, thanks.

    The website is: kevindavison.ca

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello ohyeah,
    that gap between your menu/logo and #content is cause by the 500px height of #header .isi

    Try removing that height like this -
    Code:
    #header .isi {
    	width: 920px;
    	margin: 15px auto 0px auto;
    /*height: 500px;*/
    	background: url(images/menu.png) no-repeat;
    }
    Now you can put your background image in the next nested div you have, #nav-container.
    Like this -
    Code:
    #nav-container {
    	height: 140px; /*adjust this height as needed*/
    	width: 920px;
    background: url(path/to/your/img.jpg);
    /*top: 0px;
    	left: 50px;*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thank you ... I've changed it, but if you'll take another look you'll see my header image is stuck at the top and doesn't wanna budge. I feel as though I'm missing something, but can't seem to nail it. Same thing when I try to place my seconf tiled background, though it just shoves everything around, and when I try to position it, it pushes the menu down as well.

    I've a few 'firsts' in this layout.

    Thanks again for taking the time to help, I appreciate it!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Look what this does for you. Too many changes to bother highlighting in red...
    Code:
    #nav-container {
        width: 830px;
        height: 450px;
        background: url("images/header.png") no-repeat  bottom;
        margin: 0 auto;
    /*
        position: relative;
        top: 100px;
        left: 50px;
    */
    }
    You don't need positioning so I keep commenting it out.

    That example gives #nav-container enough height to hold the background image and ul#nav. Semantically speaking, this img should probably be presented from the markup but, since we've gotten this far...

    no-repeat bottom makes the background appear only once and at the bottom of 450px high #nav-container. See CSS backgrounds here.

    margin: 0 auto; is just zeroing out the top and bottom margin and centering the element.
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ohyeah (11-11-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much ... one question, any idea why it's pushing my menu links to the right? This has been an issue with these last few things I've been trying to implement.

    Sorry, I've still so much to learn I know.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by ohyeah View Post
    Thank you so much ... one question, any idea why it's pushing my menu links to the right? This has been an issue with these last few things I've been trying to implement.

    Sorry, I've still so much to learn I know.
    .isi is 920px wide and ul#nav fits in that.
    By giving #nav-container a width of 830px and centering it, you push ul#nav over.

    You can see it better with a background color like this -
    Code:
    #nav-container {
        width: 830px;
        height: 450px;
        background: #f00 url(images/header.png) no-repeat  bottom;
        margin: 0 auto;}
    To fix the issue, try it more like this
    Code:
    #nav-container {
        width: 920px;
        height: 450px;
        background: url(images/header.png) no-repeat  bottom;
    }
    One of the hardest concepts for new coders to grasp seems to be the box model. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, reading up on that now ... then onto my tiled background again! I'm thinking it may be the width, etc that could've been messing it now, because my biggest issue was it pushing things around. Thanks again

  • #8
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    omg, I have no idea what's happened


  •  

    Posting Permissions

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