This question already has answers here:
CSS margin-top of <h1> affects parent's margin
(5 answers)
Closed 5 years ago.
I have an issue with regards to border property in CSS. When I put border-top inside the banner id it will move or stick to the upper block element (header) but if I remove it it will have an annoying gap between header and section. I don't know what is the issue. Please help. :(
HTML
<header>
</header>
<section id="banner">
<h1>Test</h1>
</section>
CSS
body {
font-family:Arial, Verdana, sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
}
header {
background:#333333;
color:#ffffff;
height:80px;
border-bottom:red 5px solid;
}
header nav {
float:right;
}
/*issue is here*/
#banner {
height:500px;
text-align:center;
color:#ffffff;
border-top:red 5px solid;/*remove this line and see*/
border-bottom:red 5px solid;
background-color:green;
}
#banner h1 {
font-size:50px;
}
You need to remove the margin-top for your h1 element inside the #banner.
Example on jsfiddle.
For some reasons, the block level element, will take the margin-top for the first block element which is inside, and by setting a border it is removed. Read more here.
The 'gap' is there because your h1 got a default 50px margin-top (well, on a fiddle it's like that).
Just remove it.
Cheers.
You can also use CSS Reset https://meyerweb.com/eric/tools/css/reset/ first to fix multi-browser compatibility.
html, body, div, span, applet, object, iframe etc.
Example On: jsfiddle https://jsfiddle.net/wtqfp1vw/
Related
Okay, so I have an image for a background that has 1px of a blur filter in the CSS.
That works.
Then, I added a CSS :hover selector to a new CSS rule that changes the blur filter to 0.
When I hover over it on the browser, however, it doesn't change the blur at all! (I went into Google Chrome Inspect Element and used the handy feature of forcing the :hover selector, and then it worked. So I know it's not the CSS that's buggy.)
How can I get this to work? It's a blur filter on a div in a header. Any ideas?
<header>
<div id="bgimage"></div>
<nav>
Home
<span class="divider">-</span>
Types of Cake
</nav>
<h1>Cakes</h1>
</header>
body header {
width:100%;
text-align:center;
box-shadow:0 4px 4px 4px rgba(0,0,0,0.2);
z-index:4;
position:relative;
background-color:linear-gradient(CornFlowerBlue,RoyalBlue);
}
body header div#bgimage {
background-attachment:fixed;
background-position:center;
background-size:cover;
background-image:url(hydrangea-cakes-2.jpg);
filter:blur(1px);
position:absolute;
width:100%;
height:100%;
}
The important parts of the HTML are the header and the div id="bgimage"
You haven't already added the :hover pseudo-class.
#bgimage:hover {
/* the styles you want to display on hover */
}
You did not add the :hover part of the CSS but it works for me if I just add this to the CSS:
#bgimage:hover {
filter: none;
}
On this simple site, I have made several changes without a hitch. The footer, however, is not cooperating. Nothing I do to the elements within the footer has any effect. At this point, I'm just trying to apply ANY property to the child elements to see if they hold, but to no avail. The only properties that are affecting the child elements are 4 properties applied to the parent div, the footer. These four properties are what's leading the child elements to take their current position:
#footer {
color: #FFFFFF;
font-family: Helvetica,sans-serif;
font-size: 14px;
text-align: center;
}
That's it! There's is nothing else I'm able to do. If I delete those properties, the child elements react accordingly, but there is no property I can apply to the child elements themselves for any change to occur. Does this have anything to do with the badges? What am I not seeing? I use Firebug through Firefox, and even there, when I click on the child elements, Firebug keeps showing me the CSS styles above, meaning the styles I'm writing for the child elements are not even being recognized.
Actually, the problem on your site seems to be a missing closing parenthesis on the footer div. It is causing the next rule to be ignored, which is having a cascading effect.
Fix these errors and you should be seeing the changes you apply:
You have an error in your css which might be causing all this:
#footer{
width: auto;
height:auto;
font-family:Helvetica, sans-serif;
font-size:14px;
color:#FFF;
clear:both;
background-color:#000;
text-align:center;
margin-left:auto;
margin-right:auto;
padding-top:4px;
padding-bottom: 4px;
a:link { /* big no no... take this out of the #footer rules */
color: #FF0;
text-decoration: none;
}
.clearfix{clear:both;}
<div id="footer">
<div style="float:left;width:50%;height:50px">11</div>
<div style="float:left;width:50%;height:50px">111</div>
<div class="clearfix></div>
<div>
<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div class="textAreaWrapper">
<div class="textAreaWrapperPanel">
<h3 class='textblockheader'>Text Block Settings</h3>
</div>
</div>
</body>
</html>
This is my html code, and below is my css code:
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
background-color : #093459;
color: white;
margin-top:0px;
}
.textblockheader{
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
I expect there will me no space between textAreaWrapperPanel and textAreaWrapper div elements, but instead, it still have. But if I change textblockheader's margin-top to 0px, its work, can anyone explain why this happen?
That's cause the browser applies to H3 elements (and other elements) a margin by default. DEMO
All you need is to use a CSS Reset
To quickly view an ugly rest just use
*{margin:0; padding:0;} /* will apply to all (*) elements */
http://meyerweb.com/eric/tools/css/reset/
http://yuilibrary.com/yui/docs/cssreset/
Regarding your concerns about **[Collapsing Margins][2]**:
*Why the blue background of the H3's parent DIV does not fully cover the space taken by the `H3` element?*
That's cause you're nesting two block-level elements: h3 into div, where the box models and natural floats are being handled by the browser unless specified like in this three solutions:
Set overflow:auto; to the parent div
Or set your H3 element as display: inline-block;
Use a clearfix for the block-level parent element
jsBin PLAYGROUND
/* // uncomment
*{margin:0;padding:0;}
*/
.textAreaWrapper{
border: 1px solid black;
background-color: white;
}
.textAreaWrapperPanel{
/* overflow:auto; */ /* Uncomment this or */
background-color : #093459;
color: white;
}
.textblockheader{
/* display:inline-block; */ /* ... this one or ...*/
font-family : "Helvetica Neue,Helvetica,Arial,sans-serif";
font-size: 16px;
font-weight : normal;
}
/* add this class to your DIV .textAreaWrapperPanel */
.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
Micro clearfix resource: http://nicolasgallagher.com/micro-clearfix-hack/
I think your problem is that they are already at 0 space between? The two divs both have the same background color and the inner one has no border. Try making the inner one a different color just to see. I bet it will have no upper margin. It's just your H3 tag that by default has a margin.
EDIT:
Sorry I misread your code. You are correct, they are different colors. Here is the WHY of what's going on. Your H3 element is by default presenting as a BLOCK level element. This causes it to have its own background margin that is set to 10px top and bottom. If you were to tell your H3 class textblockheader to:
display: inline;
It would cause it to remove the background area and margins as well without having to reset anything. As it stands the two divs are touching each other, but the white margin from your textblockheader class is adding extra space that gets the default margin color which is white.
But yeah, the reason it's doing that is the default css styling of H3 elements as block level elements with a default top and bottom margin.
The heading tags have default margins. This link might help:Default Heading Styles
Also resetting the default css values of tags may avoid similar future errors: Reset CSS
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here
I'm trying to make a horizontal rule with some text in the left.
for example:
my title -------------------------------------
I can do it by putting a background to the text but without the colored background, I can not
Is anybody has an answer ?
<style>
h1 {
font-weight:normal;
line-height:0;
height:0;
border-bottom:1px solid #000;
vertical-align:middle;
}
</style>
<h1><span>my title</span></h1>
Thanks
Your suggestion of putting a background color on the span seems to work reasonably well. See it here.
Alternately, you could use a background image in place of the border on the h1.
h1 { background: url(http://i.stack.imgur.com/nomLz.gif) repeat-x left center; }
h1 span {
background-color: #FFF;
padding-right: 3px;
}
Example.
(A 1x1 black image for the background.1)
without using the background you could try with:
<style>
span:after{
content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>
In this case you are using the CSS :after pseudo class.
Have a look to this article to check cross-browser compatibility.
And here you will find a pre-coded example.
Hope it helps!