The give example is based on the default Angular 2 skeleton created by ng init.
Lets assume I want my main component to fill the entire screen with a blue background.
app.component.css:
my_component_div {
background-color:lightblue;
height:100%;
}
(global) styles.css:
html, body {
height: 100%;
margin:0; padding:0;
}
This is the result:
I do not want a scroll bar. I don't like scroll bars. Why is there a scroll bar? Why is there a white border on top? According to inspection (see screenshot), this padding-margin-something in the top is outside of body, yet inside of html. How can this totally basic functionality be achieved?
This is because, by deafult, your angular component is using a <h1>app works!</h1>
browser has some built in default CSS which gives your H1 a margin of .67em
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
try setting the h1 margin to 0 and your body will re-align with your window.
h1 {
margin:0;
padding: 0.67em 0;
}
Maybe
my_component_div {
background-color:lightblue;
height:100vh;
}
html, body {
height: 100vh;
margin:0;
padding:0;
overflow: auto;
}
You need to try to use Reset css as mentioned in the below link-
A CSS Reset, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
http://cssreset.com/what-is-a-css-reset/
Related
I'm trying to hide header and footer on a page when printed from Chrome on Mac. The header and footer does not appear by default via Chrome on Windows. Based on a basic Google, looks like I should set page margin to 0 like this:
#page {
margin:0;
}
Then configure the margin property in #media print body definition like this:
body {
margin:20px;
}
I'm experiencing weird behavior though. Setting the property as above does nothing. Setting the property like this only changes the top margin:
body {
margin: 20px auto !important;
}
I also tried setting each margin explicitly in this way like this:
body {
margin: 20px auto !important;
margin-bottom: 20px auto !important;
margin-left: 20px auto !important;
margin-right: 20px auto !important;
}
However, using this approach also only changes the top margin. Am I correct in setting the #page{margin:0} in order to eliminate the header and footer from the printout? What do I need to do in order to properly set the margins in the body like I'm trying to do in the examples above? Or is there a better way?
The trick to disable specific items from being printed is to explicitly hide those in the #media print css definition.
Here is the css code to hide navbar, footer-section, background and shadows from being printed:
#media print {
.navbar {
display: none;
}
.footer-section {
display: none;
}
* {
text-shadow: none !important;
color: #000 !important;
background: transparent !important;
box-shadow: none !important;
}
}
The above example also sets text colour to black for printing.
Personally, I would suggest just removing them from the display view entirely with a simple media query;
/* Where the magic happens */
#media print {
#header, #footer { display: none !important; }
}
#header {
padding: 1rem;
background-color: #00f;
display: block;
}
main {
background-color: #0f0;
padding: 5rem;
}
#footer {
padding: 1rem;
background-color: #f00;
}
<header id="header">
<h1>Header (will not be in print version)</h1>
</header>
<main>
<p>The main body of stuff whatever it might be...</p>
</main>
<div id="footer">
<strong>Footer (will not be in print version)</strong>
</div>
this is my css:
body {
margin: 0px;
background-color: white;
}
#navbar {
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}
#navbar a {
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
navbar is a div inside body and i have a couple of tags inside navbar.
this is the output:
there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.
Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!
div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}
In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!
I figured it out, I just needed to use: display:inline-block;
you can try like this: Demo
#navbar a {
display:block;
float:left;
}
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#body {
min-width:1015px;
background-color: #efeeef;
padding-bottom: 35px;
position: relative;
display: inline-block;
vertical-align: top;
}
I have css above in a page of mine. The #body is used for a div that's getting populated by partial views using ajax.
The problem is that when content in #body is overflowing to the right then body does not encapsulate the content of #body, it stays the size of the window when loaded. So when scrolling horizontally the background looks different for the body part in the region that becomes visible when scrolling.
How can i get the body to continue look the same when #body owerflows to the right?
http://jsfiddle.net/q2j4wcmo/
UPDATE:
Hashem Qolami did solve part of my problem, when zooming in on the content in #body, body still incapsulates #body and it looks as it supposed to. But in my solution when loading the page and the content in #body is overflowing body is not encapsulating the content in #body.
Any idea what could be different when running in jsfiddler where it's obviously working as supposed to?
UPDATE 2:
new example
http://jsfiddle.net/q2j4wcmo/10/
One option is changing display type of the <body> to inline-block to let it grow horizontally by its contents.
Also you could use min-width: 100%; to make sure that the <body> always fills the entire page even if its content is not that wide:
EXAMPLE HERE
html {
white-space:nowrap;
width: 100%;
}
body {
display: inline-block;
min-width: 100%;
}
Note: Since a percentage value of min-width refers to the width of the containing block, you have to specify an explicit width of <html> element as well (as I did).
This is driving me crazy! I need assistance with this CSS code, please. I have used HTML in the past but I need to use CSS for this layout and I have never used it before. My issue right now is that the top header will not align with the lower image. I can change the margin and everything moves! If I change the size of the picture, it still will not align. Also, when I resize my browser the background moves with it and I need it fixed so the "table" stays in the middle of it. Can you please help?
CSS:
html {
margin: 0;
padding: 0;
}
body {
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
font-size:12px;
color: #06185c;
background: #ffffff url(crysbg.png) no-repeat top center fixed;
margin: 0;
padding: 0;
position: absolute;
}
p {
margin: 10px;
padding: 0;
}
h1, h2, h3 {
display:none;
}
.page-wrapper {
margin: auto;
width:auto;
background:url(topbanner.png) no-repeat top center;
position:absolute;
margin-left: 318px;
margin-right: auto;
}
HTML:
<body id="crystal-self-acceptance">
<div class="page-wrapper">
Images of the issue:
http://i.imgur.com/eI8Cmns.jpg
positioning issue.
i.imgur.com/3EUEYnr.jpg
When the window is resized the center area moves away from the background. (this includes wide screens, just no screenshot of that).
Any help, please?
Edited to add jsFiddle: http://jsfiddle.net/Q3y36/8/
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}