...

View Full Version : site container 'fullb' shifting site contents



webgurl08
11-12-2011, 02:43 AM
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

Excavator
11-12-2011, 02:51 AM
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 (http://www.w3.org/TR/CSS2/box.html). 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 (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/))
.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.

webgurl08
11-12-2011, 02:57 AM
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

webgurl08
11-12-2011, 05:38 PM
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!

Excavator
11-12-2011, 06:21 PM
Change both #fullb and #nav-container to width: 920px;

webgurl08
11-12-2011, 06:30 PM
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?

Excavator
11-12-2011, 07:01 PM
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. -


#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 (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).

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.

webgurl08
11-12-2011, 07:38 PM
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.

Excavator
11-12-2011, 08:11 PM
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 -
#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 -
#header {
height: 450px;
left: -14px;
position: absolute;
top: -50px;
width: 920px;
}

webgurl08
11-12-2011, 08:43 PM
Thank you so much, I really appreciate your help and the time you've put into it!

Thank you again :)

x



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum