CSS issue regarding margin and position attribute? - html

Okay, so I have this code:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
height: 50px;
width: 100%;
padding: 25px;
margin: 0px;
bottom: 0px;
position: absolute;
}
On this page:
http://ltd.url.ph/
I'm working on a webpage for my school, but the footer seems not to fit the page, also, in the left side, there's a gap, which makes the footer look ugly, as there's a white stripe right at the beggining of the bottom of the page which is not supposed to be there.
Any ideas on how to fix that and make the width adjust itself on all pages ? width:100% won't work for me.

To the body styles, add
padding:0;
margin:0;
Then for the footer, remove the right/left padding by doing this instead
padding:25px 0; /*This gives a top/bottom padding of 25px, and a left/right padding of 0.*/
Also, it would look better if you did text-align:center for your footer.

First of all, when you add the footer padding you enlarging it so remove the padding from the footer and add it to the p.
then you need to remove the height 50px from the footer.
and for final touch set the p margin to 0; and set the padding to :0 25px;
this will give the same look in all browsers with out the need to calc() and other weird css rules
here is the cleanest code for it:
footer {
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}
footer p{
margin:0;
padding:0 25px;
}
and you don't need the extra div to hold the p.

This Should work for you:
html, body{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin: 0;padding:0; float:left; min-width:100%;
}
footer{
background-color: #359DFF;
text-align: right;
text-decoration: overline;
width: 100%;
margin: 0px;
bottom: 0px;
position: absolute;
}footer p{width: 95%;}

Related

HTML width 100% goes outside the page

I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;

Can't fix page layout in HTML and CSS

Hi I've got a website up.
I'm a no0b but I learn fast and I learn as I go.
However in one of the pages...the footer has gone up too close to the header. I want the area between the header and the footer fixed. I've tried changing the height of the main content in css but it doesn't seem to work. The front main page is ok. It's the about me page I'm having difficulty with. I just want the space between the header and footer fixed regardless of what's between them.
I use:
#site_content {
width: 950px;
overflow: hidden;
margin: 10px auto 0 auto;
padding: 10px;
}
thanks for your help.
Hey just replace your footer code by the below code
CSS
footer {
width: 100%; /* make width 100% changes done*/
font: normal 100% arial, sans-serif;
padding: 50px 20px 5px 0;
text-align: right;
background: transparent;
position: fixed; /*changes done*/
bottom: 0; /*changes done*/
top: auto; /*changes done*/
text-align: center; /*changes done*/
}
Add this to your #footer selector in your CSS:
#footer {
position:absolute;
bottom:0;
}
You can get an idea about how to do it by inspecting this template from twitter bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
BTW: Twitter Bootstap may result interesting to you (based on the screenshot you show).

How to remove white space left and right side of page?

I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps

Unwanted 48px margin over body?

I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}

how to center a footer div on a webpage

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;
}