#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    Missouri
    Posts
    11
    Rep Power
    0

    Box Shadow Side-Effects and More.


    Hello, this is my first post here, so hi everyone!

    I have a site I'm working on; http://kcstreetnotes.tv/

    I added some box shadow effects to a few sections. I'm having a side effect in one, there appears to be a top-border that is causing a line to overlap on another section.

    the footWidgets div is causing the line that is showing in the bottom of the wrapper section.

    Here is the code I put in for teh #footWidgets section to make the box-shadow, it's the only way I could get it to work.

    Code:
    box-shadow: 6px 0px 10px -5px #888, -6px 0px 10px -5px #888;

    I'm new to manipulating CSS so It's been mostly trial and error, and I'm left with these errors I can't resolve.

    The other is either the #main or the #menu, I can't seem to get rid of the divide between the two to make is seamless.

    Any guidance you can offer would be much appreciated.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi I assume you just want all the content that from menu till footer to have an outer box-shadow.
    In that case, don't declared it for each item but simply wrap the items in a container div, and apply the box-shadow to that. The nature of the box-shadow will otherwise show gaps since it is not really rectangular but more radial

    So the hierachy looks like this
    Code:
    #container
        #topnav
        #header
        #boxshadow_div_wrapper
            #menu
            #main
            #footwidgets
            #footer
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    Missouri
    Posts
    11
    Rep Power
    0
    Originally Posted by aeternus
    Hi I assume you just want all the content that from menu till footer to have an outer box-shadow.
    In that case, don't declared it for each item but simply wrap the items in a container div, and apply the box-shadow to that. The nature of the box-shadow will otherwise show gaps since it is not really rectangular but more radial

    So the hierachy looks like this
    Code:
    #container
        #topnav
        #header
        #boxshadow_div_wrapper
            #menu
            #main
            #footwidgets
            #footer
    That's right, I didn't want it to show up on the header and and topnav. I found out that when I tried it on the container, I'll mess around with trying it this way. Thanks!
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by eljefe_cendigit
    That's right, I didn't want it to show up on the header and and topnav. I found out that when I tried it on the container, I'll mess around with trying it this way. Thanks!
    When you are coding, and have a feeling you are doing things twice. For instance declaring a box-shadow twice. Stop and see if there is a more efficient way. In this case wrapping all items with an outer boxshadow together and apply the boxshadow 1 time. You add a tiny bit of mark up. To compensate for alot of extra css.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    Missouri
    Posts
    11
    Rep Power
    0
    Originally Posted by aeternus
    When you are coding, and have a feeling you are doing things twice. For instance declaring a box-shadow twice. Stop and see if there is a more efficient way. In this case wrapping all items with an outer boxshadow together and apply the boxshadow 1 time. You add a tiny bit of mark up. To compensate for alot of extra css.
    Follow-up question, while I'm playing with the div. I've removed the box-shadow from the other items, but there is still a space between the menu and the main, I can't seem to find out where it is coming from.
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    thats because of <div class="sep">
    add margin :0

    Code:
    #container div.sep{
      margin:0;
    }
    Small trick, Get the addon named firebug and inspect the elements, you can press layout and see the dimension of them. It also gives a color indication of what is overlapping.

    btw If your are using that div often to to just show a line. Why not use <hr /> You can alter its style too.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    Missouri
    Posts
    11
    Rep Power
    0
    Originally Posted by aeternus
    thats because of <div class="sep">
    add margin :0

    Code:
    #container div.sep{
      margin:0;
    }
    Small trick, Get the addon named firebug and inspect the elements, you can press layout and see the dimension of them. It also gives a color indication of what is overlapping.

    btw If your are using that div often to to just show a line. Why not use <hr /> You can alter its style too.
    I'm still having issues with the drop shadow, I understand the hierarchy you indicated earlier, but I'm not sure how to implement it in the css of my site. The theme I'm working on has a custom.css file that overwrites the main style.css file, so I've been doing my changes there.

    I'm not sure where to put the new div for the box shadow to have ti encompass all of those items.
  14. #8
  15. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi eljefe_cendigit,

    as you know css styles html. So in order to add a html element you need to alter your template a tiny bit. As explained previously, adding a tiny bit of html will be the most efficient way of doing this.

    I see you use Wordpress, and Wordpress uses templates .
    Open up the template and place a div inside there surrounding the elements. menu, main, foterWidget, footer. (see image)

    Once you have done that you can simple target that element just like any other element and set its style with css.

    (so go into the backend of wordpress and edit the template just a tiny bit)
    Last edited by aeternus; September 25th, 2012 at 11:30 AM.

IMN logo majestic logo threadwatch logo seochat tools logo