I have a custom PHP CMS which uses templates. I have a layout.tpl in which I set the overall look of the site including a class called boxmain which is the central content of the layout. In that, I have defined my style.css file, which contains the boxmain class.
.boxmain {
background-color:#F5F5F5;
width:1025px;
height:auto;
margin:0 auto;
font-size:11px;
overflow: hidden;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 15px;
}
Above it, I have a class for an image banner. This also contains a margin to create a space between the content and the banner.
div#banner {
background: url("../images/banners/banner1.jpg") repeat scroll center center rgb(0, 0, 0);
width: 100%;
height: 270px;
z-index: 1;
margin-bottom: 25px;
-webkit-box-shadow: 0px 2px 15px 2px ;
box-shadow: 0px 2px 15px 2px ;
}
What I want to do, is to be able to remove all of the padding and margins on the banner and on the boxmain without having to modify the stylesheet, but instead including it in the template. For some reason, it doesn't work when I do this in the template, it just breaks Cufon.
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
I was therefore thinking, maybe position the child elements (basically all of the content from the template) out of the parent element (boxmain defined in layout.tpl) and this would clear the margins and the paddings, but how can I do this and would it work?
The content in the template is basically a few div tags and a few images.
Here is a working JSFiddle.
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
<div id="banner">Banner content</div>
<div class="boxmain">Main content</div>
Since the inline style easily overrides the main stylesheet, I would say, this is an ordering issue. You probably include the main stylesheet after the inline style, which would explain why it is not working.
Moving the inline <style> into boxmain works too
<div id="banner">Banner content</div>
<div class="boxmain">
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
Main content
</div>
So, prefixing $page_content with the overriding style should do as well.
See JSFiddle
Disclaimer: this is tested with Firefox 16 only.
Related
I have a navbar div in my website. Sometimes it stays at the top and sometimes it adds unnecessary margin-top. I'm not sure what's wrong. I checked my website, it's not collapsing with any margin for any of my div. I am very confused. I tried to use position but that did not work. Can anyone help? Here's my code snippet :
.container-navbar{
background-color: #ffffff;
height: 60px;
display: flex;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
transition:5s;
}
.button-collapse-sidebar{
padding-top: 10px;
padding-left: 10px;
}
.button-collapse-sidebar button{
height: 40px;
width: 60px;
font-size: 20px;
border:none;
background-color: blue;
color: #ffffff;
}
.button-collapse-sidebar button:hover{
transition: 1.5s;
cursor: pointer;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.user{
display: flex;
}
.user-name{
padding: 18px;
}
.user-name i{
padding-left: 5px;
}
.user-name i,a{
text-decoration: none;
}
.user-picture{
margin-top:5px;
margin-right: 5px;
width: 60px;
position: relative;
overflow: hidden;
border-radius: 50%;
height: 50px;
}
.user-picture img{
width: 100%;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container-navbar">
<div class="button-collapse-sidebar">
<button class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></button>
</div>
<div class="user">
<div class="user-name">
Admin name<i class="fas fa-circle"></i>
</div>
<div class="user-picture">
<img src="" alt="user-picture">
</div>
</div>
</div>
</body>
</html>
so i update the code and add the body{ margin:0; } here i have 2 different file html but with same html tag and css but for some reason my main one not working but my test html it work and not adding the unnecessary margin-top.
When a browser renders an HTML page, it applies basic styles before you’ve even written a single style.
For Example, the <h1> to <h6> HTML tags in all browsers differ from the normal text:
in general, their font sizes are larger, their font-weight is bold(font-weight: bold), and they have margins on the top & the bottom.
While all browsers apply their basic styles, each browser has its specific styles different from other browsers, and that, of course, causes an inconsistency problem. That’s the problem that you are talking about in this question.
The attempt to solve the browser inconsistency problem has produced two approaches: the Normalize CSS approach and the CSS Reset approach.
If you are talking about this margin, you can simply add
body{
margin : 0px;
}
in your CSS. That should solve your issue. If you only want to remove margin on the top, use margin-top instead.
As for now, you can get used to adding this at the top of your css-file:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This will remove all paddings and margins and box-sizing will simply make it easier for you. Mozilla box-sizing.
that's a simple reset you can do for your website:
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
The issue is to align the image at the center of the div. This is working properly in chrome, except for IE
<DIV id="content"><P>Internal resources </P>
<DIV class="containertop">
<P>External resources </P>
</DIV>
<DIV class="contentcontainer">
<DIV class="containerImg">
<img height="286" width="381" src="http://www.bestwestern.com/img/bg-groups-meetings.png" /alt="Banner Image" title="Banner Image"></img>
</DIV>
</DIV>
</DIV>
CSS:
.containerImg Img {
border: 0 none;
padding: 0px !important;
margin: 0px;
width: 368px;
height: 277px;
margin-left: auto;
margin-right: auto;
display: block;
}
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
#content .containertop {
padding-top: 15px;
color: #999;
}
div#content {
font: normal 12px/1.6em arial;
font-size: 12px;
color: #666;
width: 471px;
padding: 10px 10px 0 10px;
margin: 0;
background-color: #fff;
min-height: 100%;
height: 100%;
background-color: #fff !important;
min-height: 100% !important;
height: 100%;
}
I removed tag and tried above CSS and that is also not working.
Here is the fiddle : https://jsfiddle.net/nf5hghqy/10/ (Open in IE)
Can we resolve this?
<center> tag is deprecated (see here)
This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the
CSS text-align property, which can be applied to the element or
to an individual . For centering blocks, use other CSS properties
like margin-left and margin-right and set them to auto (or set margin
to 0 auto).
To get img aligned center you have to set it display:block ( because img is by default an inline element) and margin:auto
Another mistake, img is a self-closing tag, so you can't do this <img></img>
See snippet below:
div {
border: 1px solid red /*demo purposes */
}
img {
display: block;
margin: auto;
}
<div class="containerImg">
<img src="http://www.bestwestern.com/img/bg-groups-meetings.png" alt="Banner Image" title="Banner Image" />
</div>
UPDATE - Based on OP's new fiddle:
your issue is here:
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
simply remove float:left, like this:
#content .contentcontainer {
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
First check you have added doctype
center tag doesn't work in IE ,you can use CSS as text-align: center , and auto for margin , then it will work ok in IE. Fine more here
From http://www.w3.org/Style/Examples/007/center.en.html#block:
.containerImg img{
display:block;
margin-left:auto;
margin-right:auto;
}
The important part is to make sure the image is a block element; this way it has width. The margin-left and margin-right set to auto automatically set margins based on the width of the block element image, making the image center itself.
try this.
.containerImg img{
margin:auto;
display:block
}
You need to remove the tags and add some css either as separate file or in line and use margin:auto; instead of your margin-left and margin-right
I need a div-header like the blue facebook header which has no free space on top and on the left/right side.
My actually code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#header {
height: 100px;
background-color: #3B5998;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I add extra no marigin and no padding, but i still have some free space on all 4 sides of my header...
html, body { margin: 0; padding: 0; }
Try this
html, body {
padding: 0;
margin: 0;
}
#header {
float: none;
width: 100%;
height: 100px;
background-color: #3B5998;
}
By default every browsers puts some amount of margin/padding around the body of the document.
To remove it you can add a css style in your html
html, body {
margin: 0;
padding: 0;
}
Also, it is worth noticing that browsers attach insert various kinds of styles to elements, and these styles can be very different in different browsers. There are some style sheet files out there that can fix it, one of them could be found here
http://www.cssreset.com/
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.
I'm using Less Framework 4 for two websites I'm designing. In both designs I want to apply a 5 pixel border both on top and bottom of the document.
The problem: because of the styles applied to body, I'm applying the border-bottom and border-top to the html object, so the bottom border never sticks to the bottom of the page like it would happen in a usual sticky footer situation.
Here are the screenshots for the two cases:
Here's the (LESS) CSS I'm using for html and body: pastie.org/private/us5x1vhjnwzq6zsiycnu2g
html {
border-top: solid #black 10px;
border-bottom: solid #black 10px;
background: url('img/bg.png') repeat;
}
body {
width: #8col;
margin: 0px auto;
padding: 100px 48px 84px;
background: #white;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
font: 13px/20px 'OftenRegular';
-webkit-tap-highlight-color: #green;
}
I've tried using height: 100% both for the body and html objects, but here's how it looks live: http://prikonline.be/prikactie/
How should I stick the border to the bottom of the page?
You could instead use a footer wrapper like this.
.footer {
position: absolute;
bottom: 0;
border-bottom: solid #black 10px;
width: 100%;
}
and just insert this right before </body> or somehting
<div class="footer"></div>
You can use position:fixed; and bottom:0px; to always, regardless of your scrolling state and content height, fix it to the bottom.
Try changing it to:
height:auto;
for your HTML CSS.
Hmmm... Putting min-height: 100% on the html element on your page (manipulating in Web Inspector) worked for me right away in Chrome; what are you testing in?
This approach does, however, go a little bit over 100% because of the height of the border, which you can correct for in IE8+/Gecko/WebKit with the CSS box-sizing property (use the value border-box).
For IE7 and IE6, if you care to make them render the same, it'd be pretty easy to write a little JavaScript that, on load or on resize, checks the window height, compares to document height, and if necessary forces the HTML element to the window height minus 20.
It looks like you're using some sort of dynamic stylesheet tool (like LESS). Usually the dynamic stylesheet tools let you use JavaScript. So you could define height as:
#height: `window.innerHeight + 'px'`;
And then add something like
body{
...
min-height: #height;
}
Of course, the problem with this is that if the user were to resize his/her browser window, the layout would not update appropriately. You could use the window.onresize callback to handle that.
Of course, you could use JavaScript to handle the whole thing. Granted, some vehemently oppose the use of JavaScript to do styling (separation of behavior, content, and style), when attempting things like a sticky footer, sometimes its easier to just write two lines of JavaScript than to try to come up with some clever CSS that may or may not work in every browser you're trying to target. If the user has JavaScript turned off, then the page just doesn't fill the whole height of the page on pages with less content.
window.onload = window.onresize = function(){
document.body.style.minHeight = (window.innerHeight-204) + "px";
// -4px for the border
// -200px for the padding on your body element
}
I do not advise you to apply CSS to html element. Instead create div with similar styles.
In general case your code sould be like this:
HTML
<div id="wrapper">
<!-- main content goes here -->
<div class="reserveSpace"></div>
</div><!-- #wrapper end -->
<div id="footer"></div>
CSS
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; }
#wrapper .reserveSpace { height: 100px; /* equals to footer height */ }
#footer { height: 100px; margin: -100px auto 0; background: #3CF; }
This works perfect in all browsers, even in IE6 :)
You can always implement this working sticky-footer CSS (I've added with inline social bar):
.sticky-bar {
background: #000000;
bottom: 0;
color: #D3D3D3;
font-weight: 300;
left: 0;
margin: 0;
opacity: 0.9;
padding: 0em;
position: fixed;
width: 100%;
z-index:99999;}
.sticky-bar-inner {
margin:0 auto;
text-align: center;
width:100%;
background-color: #D3D3D3;
padding: 3px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: #000000;
}
.sticky-bar-inner p {
margin:0 auto;
padding: 3px;
text-align: center;
width:100%;
font-size: 11px;
}
#footerlist {
padding-left:0;
}
#footerlist li {
display: inline;
list-style-type: none;
}
HTML:
<!-- Footer -->
<div class="sticky-bar">
<div class="sticky-bar-inner">
<p>©2015 The astrobox.io Project<p>
<ul id="footerlist">
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
<li class="social"><img src="#" height="42" width="42"></img></li>
</ul>
</div>
</div>
Just edit the hrefs to your own personal urls, and the image src to the social style images you want (or include the font awesome package if you have it).
Here is how I added a body border at the bottom:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
The key is min-height: 100vh, which ensures that body height will at least be height of the viewport. Because of box-sizing: border-box, border of the body will be accounted in the body height. There is still a problem of content margins pushing the border below viewport, but that can be fixed with an arbitrary padding-top value.