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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    site container 'fullb' shifting site contents

    Hi,

    Well, I'm finally getting this theme together - but have been having issues with my content being pushed around ...

    If you look at: kevindavison.ca, you'll notice the semi-transparent background is shifting my header and menu a bit. I'm trying to position the div so it'll be only as wide as the menu, but 100% in width, as it is.

    Any suggestions on what I'm doing wrong would be greatly appreciated, so tired of looking at this theme now!

    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello webgurl08,
    Haven't I seen this site before? Someone else was working on it earlier today.

    It still has the broken 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.

    You have #fullb at 820px wide
    #header is not even styled (usually means it's not needed ... see divitis here)
    .isi is contained in #header and #fullb but it's set at 920px width...

    Study the box model. That is the answer to your problem.
    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
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Should I do that differently then? What I'm trying to accomplish is the semi-trans background to begin just below the menu, so that it looks like the menu is "around it" type of thing.

    Yes, there's two of us working on this thing, blind leading the blind lol

  • #4
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    If you'll look at the attached, you'll see what I've been trying to accomplish. kevindavison.ca/kevin.jpg
    Any which way I try to do this, it always seems to shift both my menu and header around. So frustrating! I don't know how to work it in there when the width needs to be less than something else already in there ... hope that made sense!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Change both #fullb and #nav-container to width: 920px;
    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

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That's what they are now ... is it even possible to make that div the way the picture shows, or would it be easier to just add it to the background itself? Guess not, then it'd be messing up on various screen resolutions wouldn't it?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by webgurl08 View Post
    That's what they are now ... is it even possible to make that div the way the picture shows, or would it be easier to just add it to the background itself? Guess not, then it'd be messing up on various screen resolutions wouldn't it?
    Ooops, a previous version was still cached.

    Since your #header contains the image you want sticking out of #fullb, we can take that element out of the natural flow of the document by using ap.
    Remember how I said an unstyled element is unneeded? .isi could easily do this and you could still get rid of #header as it seems to still be an extra element.


    Give this a try. Some postioning may still need tweaked. -
    Code:
    #fullb {
    width: 892px;
    margin: 30px auto 0;
    padding: 0px;
    position: relative;
    background: url(images/tiny.png);
    border-top: 1px solid #000;
    }
    #header {
    height: 450px;
    width: 920px;
    position: absolute;
    top: 0;
    left: -14px;
    }
    #wrapper {
    	width: 850px;
    	margin: 450px auto 0;
    	text-align: left;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    This positions #header over the now 892px wide #fullb.

    The top border is to cancel out the uncollapsing margin.

    Notice we have to push #wrapper down with a top margin (that's what caused the uncollapsing margin) now because #header is not part of the natural flow now that it's a positioned element.
    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:

    webgurl08 (11-12-2011)

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, it's really finally coming together - and I've some more reading to do with these links you've given me. It's funny that until now, I didn't even consider the padding/margin, etc when setting my width. Tsk.

    One last question if I may, the top of this tiled 'tiny.png' background, how can I push it down without it pushing the menu down along with it? I'd like the menu to cover the top of it.

    Thank you again, I'm learning a lot of necessary information this time around.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by webgurl08 View Post
    One last question if I may, the top of this tiled 'tiny.png' background, how can I push it down without it pushing the menu down along with it? I'd like the menu to cover the top of it.

    Thank you again, I'm learning a lot of necessary information this time around.
    There is two things that seem to be pushing that menu image down that far, one is the margin: 15px auto 0; you have set on .isi and the other is the image itself is 140px tall.

    Change that margin to 0 like this -
    Code:
    #header .isi {
    	width: 920px;
    	margin: 0 auto;
    	background: url(images/menu.png) no-repeat;
    }
    And crop menu.png in PhotoShop or something so it is not so tall.

    ------------
    A negative top position may work for you too.
    Try this -
    Code:
    #header {
        height: 450px;
        left: -14px;
        position: absolute;
        top: -50px;
        width: 920px;
    }
    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

  • #10
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much, I really appreciate your help and the time you've put into it!

    Thank you again

    x


  •  

    Posting Permissions

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