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).
Related
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.
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-->
I have a div container (header)
div.header {
width: 1024px;
height: 115px;
background-color: black;
}
which contains a h1 named header_title with a text inside:
#header_title {
font: 80px 'Oxygen', sans-serif;
letter-spacing: -8px;
margin-left: 25px;
text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}
Exactly below header div i have my menu, like you see in my image.
If I set a text shadow that will go out the div, (the 4th letter, a 'g') ho can I make it displaying anyway and don't be cut off?
I tried overflow: visible, and z-index solution, but it doesn't work =(
Thanks.
Markup for header:
<div class=header>
<h1 id=header_title>Programmazione</h1>
</div> <!-- fine header -->
<div class=menu>
etc......
Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.
I don't your HTML markup to test and be sure, but I believe that what is happening is that the the shadow is going outside the header div. I see no reason in the CSS you've provided that it wouldn't be.
What is happening is that the menu image that follows is blocking it. For most browsers, if you are positioning items by default (ie not absolutely, not relatively, not fixed) then, in situations where they overlap, the following neighbor is above. Also, if you are positioning elements this way, the z-index does not affect them. z-index only works on relative, absolute, and fixed elements.
One solution is to give both elements position:relative; and then the position your header div higher than the menu using z-index.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)
I have the following css class:
.CtractLabel
{
font-weight:bold;
padding: 2px;
text-align:left;
/* width:120px; */
width:150px;
float:left;
border-bottom:solid 1px #aaaaaa;
border-right:solid 1px #aaaaaa;
background: white url('../Images/GridHeaderBg.gif') repeat-x bottom;
}
On my page, I have a a div with text that is less than 150px. However, the div does not expand to 150px, but contracts around the text.
Is there a way to force the div to be precisely 150px regardless of the length of the text in the div?
The default value for the width of a div element is auto, which causes it to take up all available space horisontally.
If you don't get this behaviour, there are some possible causes:
You have made it a floating element.
You have specified a width for it somehow, perhaps indirectly.
You have some other element taking up space.
To see exactly what CSS applies to an element, and exactly where elements are, you can use the FireBug plugin in Firefox.