I have a page with one div and 1 H1 tag in the div;
I am giving a margin to a H1 and it's giving the margin the the entire div
Why is this?
http://craveadeal.com/indexV2.php
Here is the entire code:
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#wrapper {
margin-right: auto;
margin-left: auto;
background-image: url(image-files/mockupV2.jpg);
background-repeat: no-repeat;
height: 555px;
width: 1040px;
background-position: center top;
}
#wrapper h1 {
text-align: center;
font-size: 72px;
font-family: "Comic Sans MS", cursive;
text-decoration: blink;
color: #F07D00;
background-color: #000;
margin-right: 125px;
margin-left: 125px;
display: block;
margin-top: 125px;
}
-->
</style>
</head>
<body>
<div id="wrapper"><h1>COMING SOON</h1>
</div>
</body>
Just add a overflow:hidden to the #wrapper
That should work.
The Problem
It's being caused by margin collapse:
"In this specification, the expression
collapsing margins means that
adjoining margins of two or more boxes
combine to form a single margin."
Or more simply:
when the vertical margins of two
elements are touching, only the margin
of the element with the largest margin
value will be honored, while the
margin of the element with the smaller
margin value will be collapsed to
zero.
The Solution
You can fix it by:
Adding vertical padding to your #wrapper.
Adding a border to your #wrapper.
Floating your <h1>.
Related
I have a footer and I set all margin and padding to be zero at the start. When I want to set my footer to text-align: center , nothing changed formy .footer p.
However the padding is still 0 horizontally, not 9px vertically.
.footer{
background-image: url("../img/naviga.png");
width: 1000px;
height: 30px;
/* my div settings */
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
/* my div settings */
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
/* p tag is my footer text */
.footer p{
padding: 9px auto 9px auto;
}
[have a look plz][1]
[1]: http://i.stack.imgur.com/D77IT.png */
Why this override is not working? I also tried with !important.
You can`t use auto at padding.
Try it for css :
.footer p {
padding: 9px 0px;
}
and don't miss your footer height is set to 30 px. You could resize it or p will get out .footer
Check link : https://jsfiddle.net/L5p38nc3/1/
You cannot do padding: 9px auto because auto is an invalid property for padding. That's why property is lined-through in the picture you provided.
Check the MDN docs for padding, here.
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Here's one of a few ways to vertically and horizontally align your text in the middle. Check this fiddle or the snippet below.
.footer {
display: table;
background: red;
width: 1000px;
height: 30px;
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
.footer p {
display: table-cell;
vertical-align: middle;
}
<div class="footer">
<p>
text
</p>
</div>
I'm using this method to get my footer at the bottom of the page properly.
However, when I add a border to my footer, I end up with a scroll bar regardless of the content on the screen. My confusion is that:
I thought borders functioned outside padding but inside margins, such that like padding they do not effect any layout external to the div.
Is this wrong?
Here is my skeleton html:
<body>
<div class="wrapper">
<div id="top"></div>
<div id="body">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
And here is the relevant CSS:
#top
{
height: 105px;
border-bottom-style: solid;
border-bottom-color: #044E97;
border-bottom-width: 7px;
}
#body
{
margin-top: 25px;
width: 100%;
background-color: white;
color: #282828;
font-size: 85%;
}
#box1
{
width: 460px;
float: left;
margin-left: 25px;
margin-right:75px;
}
#box2
{
margin-left: 25px;
margin-top: 15px;
padding-top: 0%;
padding-bottom:0%;
margin-bottom:45px;
width: 350px;
height: 320px;
float:left;
border-top-style: solid;
border-top-color: #FFFFFF;
border-top-width: 10px;
}
html
{
height: 100%;
}
body
{
min-height: 100%;
background-color: white;
margin: 0;
}
html, body
{
min-height:100%;
position:relative;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3em;
}
.footer, .push
{
height: 3em;
clear: both;
}
.footer
{
width:100%;
background-color: #0563A1;
border-top-style: solid;
border-top-color: #044E91;
border-top-width: 8px;
color: white;
font-size: 77%;
padding-top:.3em;
padding-bottom:.3em;
}
If I change the footer div to not have padding, the scroll bar clears.
This assumption is incorrect:
I thought borders functioned outside padding but inside margins, such that like margins they do not effect any layout
Margins and borders do affect layout—it is just that they are positioned outside the padding. The hierarchy of spacing starts from explicitly defined dimensions (width and height), followed by paddings, then borders, then margins.
If borders and margins did not affect layout, it would then be impossible to create spacing between elements (no margins) or that borders of adjacent elements will overlap (borders taking up no additional space).
The issue you are facing is that borders are computed not as part of the width or height—when you leave a 3em space at the bottom of your body, the footer that is 3em high will fill the space. But when you add borders and/or padding to it, it will add an additional vertical height (sum of top padding of 8px, and top and bottom borders of 0.3em each) to the defined height, causing it to exceed 3em and hence trigger an overflow.
To force your footer to stick to 3em, you can either use box-sizing: border-box to force the height attribute to take into account border widths and padding, or height: calc(3em - 0.6em - 8px) to manually reduce the height of the footer so the sum of height, top padding and top+bottom border widths remains at 3em total.
Change your box-model to border-box, like this:
html{box-sizing: border-box;}
Let me know if it helps.
I have been trying to figure out why setting margin-top: 100px on the p tag brings its parent element down with it. I can't figure it out. Anyone got any ideas?
http://jsfiddle.net/HU4pR/
HTML:
<div id="Sections">
<section id="Biography">
<div class="InnerLeftSection">
<p class="SectionTitle">Bio<br /><small>About Me</small></p>
</div>
<div class="InnerRightSection">
</div>
</section>
<section id="Blah">
<div class="InnerLeftSection">
<p class="SectionTitle">Blah<br /><small>Blah blah</small></p>
</div>
<div class="InnerRightSection">
</div>
</section>
</div>
CSS:
#Sections
{
width: 100%;
height: auto;
margin: -30px auto;
}
#Sections section
{
width: 200px;
height: 468px;
float: left;
margin-right: 15px;
opacity: 0.9;
}
#Sections #Biography .InnerLeftSection
{
background-image: url('/Shared/Assets/Images/BioTile.png');
background-repeat: no-repeat;
text-align: center;
width: 100%;
height: 100%;
background-color: blue;
}
#Sections #Biography .InnerLeftSection p
{
font-weight: bold;
}
#Sections #Biography .InnerLeftSection p small
{
font-weight: normal;
font-size:0.65em;
}
#Sections #Blah .InnerLeftSection
{
background-image: url('/Shared/Assets/Images/BlahTile.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
text-align: center;
background-color: green;
}
#Sections #Blah .InnerLeftSection p
{
font-weight: bold;
margin-top: 100px;
}
#Sections #Blah .InnerLeftSection p small
{
font-weight: normal;
font-size:0.65em;
}
That's because of the collapsing margins of CSS Box model definition:
CSS 2.1 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
From the definition:
Margins of inline-block boxes do not collapse (not even with their
in-flow children).
So change the display of p to inline-block to avoid this behavior.
Demo: http://jsfiddle.net/HU4pR/4/
That is because of margin-collapse. When a block child is flush against side X of the parent block (assuming no border-/padding-X), the margin-X of the child will instead be applied to the parent. Just add this:
#InnerLeftSection { padding: 0.0001px }
Change p to either inline-block or inline instead of block
#Sections #Blah .InnerLeftSection p {
font-weight: bold;
margin-top: 100px;
display:inline-block;
}
DEMO
That's called collapsing margins: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Vertical margins collapse but not horizontal margins.
To prevent that, you can set the parent overflow to overflow:auto or overflow:hidden, or just add the parent any border or padding.
See it here (overflow): http://jsfiddle.net/HU4pR/1/
Or here (padding): http://jsfiddle.net/HU4pR/2/
I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.
This is the css I use:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
The html is quite simply:
<h1>title</h1>
No matter what value I enter for vertical-align, the text is always at the top of the h1 element.
Am I miss-understanding the vertical-align property?
No CSS hacks needed. If I understand you correctly, then you can use this CSS:
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
See demo fiddle which equals a minimum height of 30px;
A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.
I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect
h1
{
font-size: 12pt;
line-height: 50px;
height: 50px;
}
Center the H1 title using flexbox align items center and justify content center, see this example:
div {
padding: 1em;
border: 1px dashed purple;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div>
<h1>Center this h1</h1>
</div>
Just add a float property and use padding-top: 50% for example:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
position: absolute;
float: center; /* If you want it to be centered */
padding-top: 50%;
}
I used a CSS custom property (variable) and calc
:root {
--header-height: 100px;
}
* {
margin: 0;
padding: 0;
}
header {
font-size: 16px;
height: var(--header-height);
justify-content: space-evenly;
display: flex;
border-bottom: 1px solid #000;
}
h1,i {
font-size: 1.2rem;
display: inline-block;
padding-top: calc(var(--header-height) - 1.2rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
<img src="https://placekitten.com/100/100" alt="logo" height="100">
<h1>
Kitten Stories
</h1>
<i class="fas fa-lock"></i>
</header>
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}