As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
Related
I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.
If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.
I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.
Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.
Below is my css for the content div:
#content {
margin-top: 15px;
padding-bottom:100px; /* Height of the footer element */
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
border-bottom: 2px solid #C9C9C9;
box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;
width: 1024px; /* Here adding a width causes the footer to overlap */
margin-left:auto;
margin-right:auto;
background-color: white;
text-align: center;
border: 1px solid red;
}
http://jsfiddle.net/32M9Q/1/
At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.
However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).
I would also include a margin-bottom on the content, just in case.
Try adding the following CSS rules to the #footer element:
position: fixed;
clear: both;
This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...
Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.
I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
My container div adds a scroll bar below my div #wrapper.
This is my css for the wrapper
#wrapper {
background:#383434;
width:1000px;
height:auto !important;
min-height:100%;
overflow:hidden;
height: 100%;
-moz-box-shadow: 0 2px 15px 5px #000;
-webkit-box-shadow: 0 2px 15px 5px#000;
box-shadow: 0px 2px 15px 5px #01DF01;
margin-top:20px;
border-radius:5px;
margin-bottom:50px;
}
How can I remove or hide the scrollbar?
Deleting/modifying overflow:auto; solves the problem. I think hidden is what you are looking for.
If you look at the documentation you can find what does the different values actually do:
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
overflow: auto means to show a scrollbar if the content overflows, which is happening in your case. Perhaps what you want is an overflow: hidden, which will not show any scroll bars. In your site, this seems to work.
The other option is to hunt down what it is that has a size overflowing your container and shrink it.
You can add overflow-x: hidden to the style for #wrapper.
Edit:
I'm finding that the margins for your #middle styling is causing that horizontal scrollbar to appear. Putting margin-top: -55px and clearing the margin property on it fixes the problem.
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
When using margin on the child element (h2) why does it give margin to the parent(#box) instead? If I change margin to padding it works as expected.
Did something change or am I missing something? here is my sample code
<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;
-moz-box-shadow: 15px 15px 12px grey;
-webkit-box-shadow: 15px 15px 12px grey;
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>
<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>
also if anyone or everyone could share their experience with margin quirks. THx
It's because of collapsing margins. I hate this "feature", but that's the cause of the rendering "issues" you're having. An excerpt from the specs (emphasis is mine):
If the top and bottom margins of a box are adjoining, then it is possible
for margins to collapse through it. In
this case, the position of the element
depends on its relationship with the
other elements whose margins are being
collapsed.
If the element's margins are collapsed with its parent's top
margin, the top border edge of the box
is defined to be the same as the
parent's.
Here's a couple of articles on this subject:
http://reference.sitepoint.com/css/collapsingmargins
http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php
My guess is that you've misunderstood the box model. Margin is the space outside, i.e. around a widget, while padding is space inside, i.e. betweeen the widget's outer border and its content.
You may want to look at this diagram: http://www.w3.org/TR/CSS2/box.html of the box model for reference.
I think it's working OK. Padding does just that: it pads the element its applied to. Margin separates elements from each other. So the margin is working as it should. The position of the h2 tag is where it should be. Giving it a margin would push it away from the root element, which in this case is the body. In order for it to move around in the parent element (the #box div), either you would have to position it relative to the #box element, or give it padding (just one method, but not optimal).