Jump to content
Sign in to follow this  
pcgs

PlatformPro: Increase page margin-top

Recommended Posts

pcgs

I want to move the #page downward. Like 30 pixels. I see that it currently has a margin-top of 12px. But I also want the #site div to be even with the top of the browser window. Like the body.fixed_width. The #page div seems to force the #site div down no matter how specific I make the rule. How can I have a larger #page margin but keep both the body and #site with no top margins (no gap at the top of the browser window)? Example of my problem: http://georgiahealthsolutions.com/wellness/

Share this post


Link to post
Share on other sites
bryan-hadaway

This is hard to understand, perhaps you can mockup a screenshot of what it should look like? Thanks, Bryan

Share this post


Link to post
Share on other sites
pcgs

Please view the link. There is no better example than the live page and I went to the trouble to upload the files to my remote server so you could see it. <http://georgiahealthsolutions.com/wellness/> It shows the problem exactly as you need to see it and you can view it with firebug or look at the CSS. I don't want the brown stripe (at the top) to show. I want the semi transparent background tile to butt up to the top of the browser window to eliminate the appearance of a solid brown stripe.

Share this post


Link to post
Share on other sites
pcgs

Actually I want the stripe at the top and bottom eliminated. Didn't see the one at the bottom. Thanks.

Share this post


Link to post
Share on other sites
cmunns

Use padding instead of margin. Try it out...I think this is what you were going for. ` .fixed_width #page { margin:0 auto; padding-top:30px; } `

Share this post


Link to post
Share on other sites
pcgs

Thanks Adam, I tried it but it didn't do what I wanted, HOWEVER you got me thinking. So I added your two rules to the body #site rule that already uses the semi transparent background tile. Like this: body #site { background: transparent url('images/bkg-stone-1-512.png') 50% 12px repeat; margin:0 auto; padding-top:30px; } So I'm 50% there. The brown line that once appeared at the top is now gone and the page is moved down 30px which I like. BUT I still have a solid brown area below the footer. I want that tiled texture to flow under the footer and all the way to the bottom of the browser window no matter what size the browser window is. Just like the texture at the top goes above the #page div. I have tried tons of combinations but cannot make it work. Please note: I changed the min-height of the #page container so you could more easily see what is going on below the footer. I intend to remove that rule once fixed. Thanks.

Share this post


Link to post
Share on other sites
pcgs

<http://georgiahealthsolutions.com/wellness/> I've tinkered with the rules again and they are now thus:

body.fixed_width {
		background: #4B2E02 url('images/bkg-body-gradient.png') 0 bottom repeat-x; }
	
	body #site {
		background: transparent url('images/bkg-stone-1-512.png') 50% top repeat;
		padding-top:30px;
		padding-bottom: 10%; } /* I think this one might be key */
	
	body #site #footer {
		background-color: #000; }

Now the page looks pretty much the way I'd like it with one exception. If a particular page happens to be somewhat short in height the background tile in the #site div doesn't continue to tile to the bottom of the browser window. I've tried using pixels, and various percentages with no luck. Is there a way to consistently fill the gap from the bottom to the #site div to the bottom of the browser window so the tile repeats and no solid color appears? Thanks.

Share this post


Link to post
Share on other sites
pcgs

Here is a screen shot of how my page now looks when I'm zoomed out so you can see the area below the footer. I want to eliminate the brown area at the footer and fill it with the tiled bkg. I think this would involve controlling the #site div. The brown color comes from the body element background rule. But so far, I've had no luck. Thanks. PagelinesExample.jpg

Share this post


Link to post
Share on other sites
Kate

@pcgs I think you would just need to change both the body and "body #site" to their default settings. So, take out the positioning and repeat values of the backgrounds. (The background will be set to top/left and repeat by default.) You also may need to change the height value of "body #site"... But at least try the first step first. Let us know how it goes.

Share this post


Link to post
Share on other sites
pcgs

Not sure what you mean but willing to try. Note that in your parenthetical statement a word is missing so not sure what you meant to say. Change both the "body.fixed_width" and "body #site" to their default settings means commenting them out, yes? Your instructions don't make sense to me what I need to do to accomplish this. But I went ahead and commented out the body #site but that just leaves me with the background color of the body and its repeat-x tile. Next I commented out the "body.fixed_width". Yes it removes the unsightly brown area at the bottom of the browser window. But that isn't addressing my goal. It just removes color and the background image. So where do I proceed? I'm putting the body.fixed_width back because there is no way to see whether the page is doing what I want without it. Also I tried adding "body #site: min-height: 100%;" but pretty much does the same thing as you see now. I need the body background and the site background to both push to the bottom of the browser window. What do I do now? Thanks. My code:

	 body.fixed_width {
		background: #4B2E02 url('images/bkg-body-gradient.png') 0 bottom repeat-x; }
	
	/*body #site {
		background: transparent url('images/bkg-stone-1-512.png') 50% top repeat;
		padding-top:30px;
		padding-bottom: 10%; } */
	
	body [img=http://georgiahealthsolutions.com/examples/PagelinesExample2.jpg]#page {
		min-height: 550px;}
	
	body #site #footer {
		background-color: #000;
		padding-bottom: 30px;}

Share this post


Link to post
Share on other sites
pcgs

Sorry but when I posted somehow my image was inserted in this odd spot. In the middle of my CSS.

Share this post


Link to post
Share on other sites
Kate

@pcgs My apologies... I can see where what I said was confusing. What I meant was, not to comment those lines out, but rather to take out the additional declarations for the background. So, in a nutshell, just leave the URL for the background,without the repeat or position settings too. So, something like:

	body.fixed_width {background:url('images/bkg-body-gradient.png');}
	body #site {background:url('images/bkg-stone-1-512.png');}

Hopefully that's a little clearer. And again, my apologies for the confusion.

Share this post


Link to post
Share on other sites
pcgs

Not sure where you were going but it didn't fix my situation but I figured it out. I think this is becoming a huge pattern and perhaps I can earn tons of answer karma this way. ;-) The first background is a gradient that has to repeat but it may have been difficult to see what was going on unless you went to the site and hard core took a look at the CSS rules and turned them off and on. The second wasn't a problem to post is as you suggested but the gap at the bottom remained because the tile stopped even with the bottom of the footer. I found that using percentages worked: "margin-bottom: 0%;" for the body.fixed_width plus using "padding-bottom: 10%;" worked for the body #site rule. For the record and the benefit of this forum community I publish my CSS here: body.fixed_width { background: #4B2E02 url('images/bkg-body-gradient.png') left bottom repeat-x; /* this is the gradient */ margin-bottom: 0%; } body #site { padding-bottom: 10%; padding-top:30px; background: url('images/bkg-stone-1-512.png'); /* This is the texture tile */ } body #site #footer { background-color: #000; } The reason I wanted to do this crazy scenario is now I can use any color I want for the body background and it will peek through the semi-transparent gradient (in the body.fixed_width div) and semi-transparent texture (in the #site div). IMO, it's really hard to fix things to the bottom of a browser window. Thanks.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×