wrapper borders - aaaggh help please! Mild NSFW

[kruzyk]

Hello and thank you for reading!

I am working on a site and am having an issue, I am using 960gs i.e I have a header, navigation, bar, background-repeat, content and footer.... All fine, but I am still finishing things...
However I want to put a wrapper-style boder around the main body of the content and am having a brain freeze...
Here is the url...
http://www.misskittylea.com/index_neverfind3.html
Adult Link
Where you see the footer image with a background style border, I would like to style a border similar to that around all of the main body content...
Can anyone point me in the right direction please?
many thanks in advance...
K

[deathbycheese]

Not sure if you just want a 'frame' look or rounded corners, but the footer is an image. If you want rounded corners, you can use border-radius. Note this is only CSS3, so you will have to be aware that older browsers won't see it.

[kruzyk]

Not sure if you just want a 'frame' look or rounded corners, but the footer is an image. If you want rounded corners, you can use border-radius. Note this is only CSS3, so you will have to be aware that older browsers won't see it.

Thanks for the repsonse...no I need a frame style border, I know the bottom is an image. I need a solution for the main body...:)

[deathbycheese]

Well, you seem to have enough divs to create the effect. If you specify the height of your "bodysec" div to not go down as low as your footer (since footer is not within bodysec anyway), you could then use that as the main "frame" by filling it with a gradient or whatever and the first inner child, "padder-10," could be the pink as you have it now, creating a frame effect.

I case you're not familiar with css gradients, here's a link (http://webdesignerwall.com/tutorials/cross-browser-css-gradient) to a quick tutorial.

You could also try the new css3 box shadow, just remember it won't show up in older browsers: here's a link for that (http://www.css3.info/preview/box-shadow/)

If I'm not "getting" your need correct, please explain further. I'm kinda stabbing in the dark here.

dbc.

[kruzyk]

Well, you seem to have enough divs to create the effect. If you specify the height of your "bodysec" div to not go down as low as your footer (since footer is not within bodysec anyway), you could then use that as the main "frame" by filling it with a gradient or whatever and the first inner child, "padder-10," could be the pink as you have it now, creating a frame effect.

I case you're not familiar with css gradients, here's a link (http://webdesignerwall.com/tutorials/cross-browser-css-gradient) to a quick tutorial.

You could also try the new css3 box shadow, just remember it won't show up in older browsers: here's a link for that (http://www.css3.info/preview/box-shadow/)

If I'm not "getting" your need correct, please explain further. I'm kinda stabbing in the dark here.

dbc.

Thanks dbc,
I shall be trying both of these ideas and seeing how I get on. I believe you understand what I mean and I will let you know how I get on..

Regards,

K

[deathbycheese]

Great! Keep me posted.

dbc

[kruzyk]

Great! Keep me posted.

dbc


/* Body */
#bodysec{
width:100%;
text-align:left;
/* STICKY FOOTER Footer Space */
border: inherit;
border-left-style: groove;
padding-left:1px;
padding-bottom: 340px;
background-color:f2bfe8;
/*background:url('../images/backgroundmain.jpg') no-repeat;*/
}

I have tried a couple of variations to get like a frame effect but it shows me nothing as yet, how do you write the inner-child for the above css? Sorry I'm swamped and having issues... I was thinking of adding the below horizontal gradient as a frame with the pink as the inner child like you said...I'm stuck

.gradientV{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
/* fallback (Opera) */
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
}

Thanks

K

[deathbycheese]

Your bodysec is still going down as low as your footer, though your footer is outside bodysec. Here are some suggestions:

*Specify a height for bodysec or else the gradient will fall behind footer as well.
*Add the .gradientV class to the bodysec div so the gradient gets applied to it.
*Reduce the width and height of padder-10 by ten px instead of using it for padding 10 px (might need to change the class name) so that it is actually smaller than bodysec. That way you will be able to see the gradient.

Hope this helps!

dbc

[kruzyk]

Your bodysec is still going down as low as your footer, though your footer is outside bodysec. Here are some suggestions:

*Specify a height for bodysec or else the gradient will fall behind footer as well.
*Add the .gradientV class to the bodysec div so the gradient gets applied to it.
*Reduce the width and height of padder-10 by ten px instead of using it for padding 10 px (might need to change the class name) so that it is actually smaller than bodysec. That way you will be able to see the gradient.

Hope this helps!

dbc
hiya DBC,

I've got the gradient working with a fading colour set I like.

http://www.misskittylea.com/index_neverfind3.html

I am just getting my head round the padder-10, i've never used it before. So you mean create a new div class to fit inside the body sec with the pink colour as the background, thus creating kind of border effect by blocking over the gradient....? Am I on the right track... just not sure how I would style this using - is it some kind of inner-child div???? I think I'm close...

Would adding a height for the bodysec effect the gradient on other pages with varying content heights? Cheers

[deathbycheese]

You've got the idea. Now, add this in your CSS and include it as a class to your padder-10 div:


.innerbodysec {
width:95%;
height:95%;
position:relative;
top:13px;
left:13px;
background-color:#F2BFE8;
}

You'll have to adjust the size of your elements within padder-10 accordingly.

Maybe you won't need to specify a height to your bodysec? I was only trying to get it out from behind your footer but it looks like you've got the footer 'sticky', so idk.

Best of luck!

dbc

[kruzyk]

just wanted to say thanks dbc...I ended up using a css3 border and stretched the image to fit around the content. Works really well just hope the browsers can keep up... cheers
K

[deathbycheese]

I"m glad it worked out for you!