Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Trying to understand css container shadows

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 26, 2014 at 5:36 am #166820
    TheWebDesignCompany
    Participant

    Hi im using a main container for all other elements of my webpage, the container is the same size as the elements inside it.

    The container is centered and there is <body> white space either side.
    I wish to have a drop shadow (or a box-shadow) on the right and left of the main container.

    I need to know if the shadow will display outside the container or inside it.
    For example image a page 1024px wide with a Div container called “viewsize” 950px wide.

    All other elements are within the viewsize div and are the same width 950px.

    I wish to have a box-shadow of 30px on the right and left of the main “viewsize” container, showing up on top of the whitespace of the <body>.

    Will the shadow appear inside or outside of the 950px wide main container called “viewsize”?

    (I wish it to appear outside, but cant get it to work.)
    p.s. im very new to writing my own css, please be gentle & kind…

    March 26, 2014 at 5:38 am #166821
    TheWebDesignCompany
    Participant

    Below is the relevant code from my style sheet, you can see ive tried various things to get the shows to work.

    
body {
    width: 100%;
    margin: 0;

    padding: 0;

    line-height: 1.5em;

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 12px;

    color: #666;
    
    text-align: center;

    background: #efeee4;

}

.viewsize {
    box-shadow: 0px 0px 80px #888;
    width: 950px;
    margin: 0 auto;
    background: #ffffff;
    /*box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
    box-shadow:
        inset 10px 0px 10px -7px rgba(0,0,0,0.5),
        inset -10px 0px 10px -7px rgba(0,0,0,0.5);*/
}
    March 26, 2014 at 5:46 am #166822
    Chromawoods
    Participant

    EDIT: Was going to ask for a code example but then you posted one, GJ! :)

    Also, you can play around with http://css3generator.com/ if you want to experiment and see how the shadow behaves depending on its configuration.

    March 26, 2014 at 6:07 am #166823
    TheWebDesignCompany
    Participant

    Here is a blank page using this code but it doesnt show and shadow borders at all?

    <html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
}
</script>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="templatemo_header_wrapper">
  <div id="templatemo_header">
    
    <div id="site_logo"><a href=""><img src="images/link-window.png" border="0"></a></div>
        
        <div id="templatemo_menu">
            <div id="templatemo_menu_left"></div>
             <ul>
                  <li>

<li><a href="index.asp"><font color="white">Home</font></a><a href="contact.asp"><font color="white">Contact</font></a></li>
            </ul>
        </div> <!-- end of menu -->
    </div>  
<!-- end of header -->

</div> <!-- end of header wrapper -->
<center>
<table width="950" height="50" background="images1/navigation-ribbon-bg.jpg"><tr><td> 
</td></tr></table>
<img src="images/top-header-base.jpg">
<div id="templatemo_content_wrapper">
    <div id="templatemo_content">
<div align="center"><!-- InstanceBeginEditable name="body" -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p>
You entered the wrong username or password <a href="AdminLogin.asp">Try Again </a> 
<!-- InstanceEndEditable --><br>
<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<img src="images/footer-top.jpg">
<div class="style1" id="templatemo_footer_wrapper">

    <div id="templatemo_footer">
        
        <div class="section_w180" align="left">
            <div class="style4">&nbsp; &nbsp;<font color="white"><b> Terms & Conditions</b></font></div>
            <div class="section_w180_content"> 
                <ul class="footer_menu_list">
                    <li><a href="Terms.asp" target="_parent">View Terms</a></li>
                    <li><a href="Privacy-Policy.asp" target="_parent">Privacy Policy</a></li>
<br><br>
<br>

                </ul>
          </div>
        </div>
        
        <div class="section_w180" align="left">
            <div class="style4"><font color="white"><b>Catering Equipment</b></font></div>
            <div class="section_w180_content">
                <ul class="footer_menu_list">
        <li><a href="#" target="_parent">Barware</a></li>

                </ul>
          </div>
        </div>
                
        <div class="section_w180" align="left">
            <div class="style4"><font color="white"><b>Cooking Equipment</b></font></div>
            <div class="section_w180_content"> 
                <ul class="footer_menu_list">             
          <li><a href="#"></a></li>
                            
                </ul>
            </div>
        </div>
        
        <div class="section_w180" align="left">
            <div class="style4"><font color="white"><b>Contact</b></font></div>
            
            <div class="section_w180_content">
            
                <ul class="footer_menu_list">
                  <li><a href="http://www.facebook.com/" target="_new">Facebook Page</a>
                  <li><a href="https://twitter.com/" target="_new">Twitter</a>
                  <li><a href="http://pinterest.com/" target="_new">Pinterest</a>
                  <li><a href="https://plus.google.com/" target="_new">YouTube</a>
                
                </ul>
            </div>
        </div>
        
        <div class="section_w180">
            <div class="style4">Website designed by:</div>  
            <div class="section_w180_content">      
                <ul class="footer_menu_list">
                    <li><a rel="nofollow" href="#" target="_new">Test</a></li>
                </ul>
            </div>
        </div>
        
        <div class="style5"></div>
        Copyright © 2014 
        <div class="style3"></div>
    </div> <!-- end of footer -->
</div> 
<span class="style1">
<!-- end of footer -->
</span>
</div>
</html>
    March 26, 2014 at 6:26 am #166825
    Paulie_D
    Member

    Perhaps you could make a reduced case in Codepen.io that we could tinker with?

    Just the basic outlines…no need to put the whole shebang in there.

    However, in general box-shadows will appear outside the box:

    http://codepen.io/Paulie-D/pen/sEkrv/

    March 26, 2014 at 8:31 am #166837
    TheWebDesignCompany
    Participant

    Tha problem was the in the style sheet I had .viewsize rather than #viewsize
    sorted now, thanks.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.