MyBB Community Forums

Full Version: CSS Image Overlay
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys,

As you can see on my forum our nav bar sticks out. http://www.thetechfanatics.com/forums.php
I would like to add from each of them corners all the way down to the bottom of the forum a white box. It should show like this: http://gyazo.com/8ac18dcad62d82b517b51712b9abeea8 and http://i.imgur.com/lDwUvzQ.png
try adding this to end of global.css....

#content .wrapper {
background: white;
padding: 10px;
border: 1px solid #CACACA;
}


also in custom.css remove "padding-left: 10px;" from .user_nav and add this... save all and hard refresh (Ctrl+F5) the forum

.user_nav div.float_left {
margin-left: 10px;
}
Okay, at least we made some progress with that. Thanks for your help. However, the left and the right side should be longer and the whole box should be taller so it is a box from the nav bar down.
just increase the padding for #content .wrapper
(2015-01-24, 12:11 PM)mmadhankumar Wrote: [ -> ]just increase the padding for #content .wrapper

I've done that and it worked. However, the width is correct but the height needs to be made taller, any idea?
do you mean a bigger white space at top and bottom....

you can specify separate values for vertical and horizontal padding by: padding: 50px 30px; (50 is for top and bottom)
or individual padding like: padding: 50px 30px 70px 30px; (top, right, bottom, left)
This is also moving around the whole forum. I would just like to make the box taller at the top.
what happens when you use - padding: 70px 30px 30px 30px;

can you share a screenshot of what you are trying to achieve...
Basically, the corners of the white box should meet up with the corners of the navigation bar.
so the white space should be touching the blue nav bar....

in global.css remove the top padding for #content -- padding: 0px 10px 20px 10px;

and adjust the padding for #logo ul.top_links a --- padding: 8px 15px;