Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: wrapper borders - aaaggh help please! Mild NSFW

  1. #1
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default wrapper borders - aaaggh help please! Mild NSFW

    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
    Last edited by djr33; 06-26-2011 at 03:56 AM.

  2. #2
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    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.

  3. #3
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by deathbycheese View Post
    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...

  4. #4
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    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 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

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

    dbc.

  5. #5
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by deathbycheese View Post
    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 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

    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

  6. #6
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    Great! Keep me posted.

    dbc

  7. #7
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default aggh

    Quote Originally Posted by deathbycheese View Post
    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/c...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: progidXImageTransform.Microsoft.Gradient(
    StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
    }

    Thanks

    K

  8. #8
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    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

  9. #9
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by deathbycheese View Post
    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

  10. #10
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

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

    Code:
    .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

Bookmarks

Posting Permissions

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